Icons in list

[yougotdirked]

-added icons to the list with items -icons are stored in .svg files -added necessary css classes

[netlify[bot]]

✅ Deploy Preview for the-infi-way ready!

Name	Link
🔨 Latest commit	736af576252981d5d0af169b20e523724b027d6b
🔍 Latest deploy log	https://app.netlify.com/sites/the-infi-way/deploys/64d4a4f420d81100080afd2c
😎 Deploy Preview	https://deploy-preview-76--the-infi-way.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[LucaScorpion]

With these assets now in separate files, does it make sense to also replace the inline <svg> elements?

[yougotdirked]

I think its wise to leave the svg tags inline as much as possible as it gives way more control. I used tags because there was no way around this, unfortunately. A case can be made that it should be unified, though - but the image tag is the "lowest common denominator" i guess

[LucaScorpion]

@yougotdirked I see. The consistency was indeed my main point/worry :sweat_smile: Since with this setup we define the SVGs in 2 places (inline and in a file). I tried playing around with it locally, and there it does seem to work fine if we use an img tag instead of the inline svg. The .block-image svg { CSS selector then needs to be changed to .block-image img {, but that seems to be all that's needed. So while the inline SVGs do give more control, it doesn't seem like we need that functionality. This approach would have a (slight) preference from me.

Edit: if we do use the external files, I also see a possibility to greatly simplify the template, since that would potentially mean we could just loop over all topics instead of having to define them all in the HTML...