Archived topic
GB/GP/GPP 3 Icon Lists with SVG
3 replies · Started by Mike on September 7, 2020
I'm trying to put together a performant approach to SVG icons that are repeatedly used in "bulleted" lists using custom SVG icons, but what I see so far is that the GB approach is to use buttons for lists when I look at the site library with inline SVG. (really seems like GB is missing a UL based block IMHO)
Is there are better approach without inlining the SVG for every bulleted list coming? Or is this something I need to find an alternative solution of my own? For example:
https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Hi there,
simplest method at the moment is to use the Headline block. But that still relies on inline SVG.
SVG sprites with the USE SVG xlink:href are a bit hit and miss and would require ( to the best of my knowledge ) JS as it has vague cross browser support.
You can alternatively use the :before pseudo CSS content property to display an image including SVG. Or sometimes better to add it as a background. This of course would require each LI to have a different class if the icons were differing.
We are looking at Lists but that would more likely be at a later date when we dive into loop features.
Yes, it seems the "Icon SVG HTML" does not even accept the "use" element.
Looks like the CSS approach is it for now.
Thank you David! (Love your work btw!)
You're welcome and that really kind of you! Much appreciated.
