SwiftUI: Formatting text, images, and links together

2023-08-03T00:00:00+00:00
Introduction
Text</span>(</span>"Accept **[Terms and Conditions](https://oliverfoggin.com)** and **[Privacy Policy](https://oliverfoggin.com)**"</span>)</span></span>
  .</span>tint</span>(</span>.green</span>)</span></span></code></pre>
</p>
A promising start. And then I added the images...</p>
Text</span>(</span>"Accept **[Terms and Conditions </span>\(</span>Image</span>(</span>systemName</span>:</span> "square.and.arrow.up"</span>))</span>](https://oliverfoggin.com)** and **[Privacy Policy </span>\(</span>Image</span>(</span>systemName</span>:</span> "square.and.arrow.up"</span>))</span>](https://oliverfoggin.com)**"</span>)</span></span>
  .</span>tint</span>(</span>.green</span>)</span></span></code></pre>
</p>
This is where it got tricky as the images were not picking up the tint colour. And adding the .foregroundColor</code> modifier to the Image</code> gave an error.</p>
The solution#</span></a>
</h2>
By wrapping the Image</code> in Text</code> we can finally append the color to make it look right...</p>
Text</span>(</span>"Accept **[Terms and Conditions </span>\(</span>Text</span>(</span>Image</span>(</span>systemName</span>:</span> "square.and.arrow.up"</span>))</span>.</span>foregroundColor</span>(</span>.green</span>))</span>](https://oliverfoggin.com)** and **[Privacy Policy </span>\(</span>Text</span>(</span>Image</span>(</span>systemName</span>:</span> "square.and.arrow.up"</span>))</span>.</span>foregroundColor</span>(</span>.green</span>))</span>](https://oliverfoggin.com)**"</span>)</span></span>
  .</span>tint</span>(</span>.green</span>)</span></span></code></pre>
</p>
Except now the line of text is getting a bit out of hand. So extracting a couple of helpers made it much nicer to read.</p>
Text</span>(</span>"Accept </span>\(</span>terms</span>)</span> and </span>\(</span>privacy</span>)</span>"</span>)</span></span>
  .</span>tint</span>(</span>.green</span>)</span></span>
</span>
@</span>ViewBuilder</span></span>
private var</span> linkIcon: Text </span>{</span></span>
  Text</span>(</span>Image</span>(</span>systemName</span>:</span> "square.and.arrow.up"</span>))</span></span>
    .</span>foregroundColor</span>(</span>.green</span>)</span></span>
}</span></span>
</span>
@</span>ViewBuilder</span></span>
private var</span> privacy: Text </span>{</span></span>
  Text</span>(</span>"**[Privacy Policy </span>\(</span>linkIcon</span>)</span>](https://oliverfoggin.com)**"</span>)</span></span>
}</span></span>
</span>
@</span>ViewBuilder</span></span>
private var</span> terms: Text </span>{</span></span>
  Text</span>(</span>"**[Terms and Conditions </span>\(</span>linkIcon</span>)</span>](https://oliverfoggin.com)**"</span>)</span></span>
}</span></span></code></pre>
I was surprised at how straight forward it was to get this working as there seemed to be a million different ways recommended online.</p>
Oliver Foggin - swiftui

SwiftUI: Formatting text, images, and links together
