Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

SVG Icon Format that will change color with text

  • GeneratePress has had an Icon feature for a while, which enables you to add icons to elements such as a button. With the icons that are organically provided with GeneratePress, when you change the color of the font used for a button element, for example, the icon changes to the same color.

    GenerateBlocks Pro offers an asset library where you can store additional icons for later use in GeneratePress. We’ve stored some icons licensed from Adobe to that end. However, the svg icons we’ve saved from Adobe won’t change color along with the text as described above.

    Is there a format that needs to be used with additional icons saved to the icon library to enable them to change color to the text they are associated with?

  • Hi there,

    theres a chance that those SVGs either:
    a. have a inline color set
    b. are not using FILLs which we require ( won’t work with stroke color )
    c. have some inline CSS classes / styles.

    If you can share one of the problem SVGs here or where in can see it on your site, then i can take a look and advise

  • Thanks David –

    I’ve attached a link in private information below with one sample Adobe icon. I thought being Adobe they’d be easier to use, but I think it may be their format – but look forward to your thoughts.

    In the interim, I’ve found that the icons at Phosphor icons work well:
    https://phosphoricons.com/

    Ted

  • Yeah the SVG has a set fill color, its code includes this: style="fill:rgb(3,4,4);fill-rule:nonzero;"/

    You can use this tool to clean up the SVG:
    https://jakearchibald.github.io/svgomg/

    And in the SVGs HTML look for the fill attribute and change it to: fill="currentColor"

  • Thank you!

  • You’re welcome

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