[Resolved] GB/GP/GPP 3 Icon Lists with SVG

Home Forums Support GB/GP/GPP 3 Icon Lists with SVG

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1434117
    Mike

    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/

    #1434180
    David
    Staff
    Customer Support

    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.

    #1434260
    Mike

    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!)

    #1434508
    David
    Staff
    Customer Support

    You’re welcome and that really kind of you! Much appreciated.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.