Proper way to use custom AlignmentGuide - swiftui

Question

So my problem is that I am trying to align text from different HStacks. Different sized SFSymbols are causing this problem.
I know that AlignmentGuide can solve my problem but I'm not sure how to implement. If anyone can lend any insight I would be greatly appreciative!
I have watched the WWDC talk on this.
And this is the main screen that relates to this problem,
Yet I need a little clarification of to put it together.
Here is relevant code
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("SOS Mayday!").bold()
.font(.largeTitle)
Rectangle()
.frame(height: 1)
HStack {
Image(systemName: "textformat.abc").imageScale(.large)
Text("Trying to figure out how to use alignment guide").bold()
}.padding(.vertical)
HStack {
//MARK:- FIX ALIGNMENT
Image(systemName: "aqi.low").imageScale(.large)
Text("This text should align with the text above").bold()
}
Spacer()
}.padding(.horizontal)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 1

I was able to produce the output you want using these steps:
Create a custom alignment enum based on AlignmentID and a
static instance of it as shown in the slide you linked.
Add a new VStack around just the part you want to custom align. Otherwise it can affect the alignment of the other components.
Add an alignmentGuide() on the two Text's that you want to align at their
leading edge.
Here is the updated code:
extension HorizontalAlignment {
private enum LeadingAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
return context[.leading]
}
}
static let leadingAlign = HorizontalAlignment(LeadingAlignment.self)
}
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("SOS Mayday!").bold()
.font(.largeTitle)
Rectangle()
.frame(height: 1)
// The new VStack using the custom alignment.
VStack(alignment: .leadingAlign) {
HStack {
Image(systemName: "textformat.abc").imageScale(.large)
Text("Trying to figure out how to use alignment guide")
.bold()
.alignmentGuide(.leadingAlign) { d in
d[.leading]
}
}.padding(.vertical)
HStack {
//MARK:- FIX ALIGNMENT
Image(systemName: "aqi.low").imageScale(.large)
Text("This text should align with the text above")
.bold()
.alignmentGuide(.leadingAlign) { d in
d[.leading]
}
}
Spacer()
}
}.padding(.horizontal)
}
}