Streaming live at 10am (PST)

SVG icons using Style Palette colors


#1

Good evening!
Pasting in SVG code into an Embed item will help you to use resolution-flexible graphics in your designs. We can all appreciate the power of vector graphics.
Here’s an easy way to add SVGs to your designs that don’t need the help of CMS Colors but can be colored and sized using the Style palette.

  1. Insert an Embed element in your design, preferably in a place where text color has already been defined

  2. Paste in your SVG code

  3. Inside the Embed code, look for the fill attribute declaration and replace the #'d color with a word called currentColor (case important)

  4. Click Save & Close

It will inherit any colors from its container or as directly defined by you using the Style palette.
Boom!:boom:
image

Here is the SVG arrow icon showing hovers obeying the Nav item’s hover state colors:
image

Enjoy!


#2

Luke, that is so cool :slight_smile: So, so cool! Thanks a ton! How did you figure that out?


#3

Well, first you’ll have to remove the standard dropdown arrow, then you’ll have to position the SVG, and note that this will only work in dropdown parts of the nav, not the other navlinks in the nav, unless you create your own from scratch, because regular navlinks are links, and down allow embeds inside them. Again, if you create your navbar from scratch this will be less of an issue.
As far as the trick using currentColor, this has been out there awhile for SVGs, but it is the crux of this trick. There is likely a larger discussion about SVGs vs ICONfonts, but…

Also, there is a lot to discuss about refining your SVGs to only include info that it needs, allowing much more flexibility, but, well… that’s the beauty of learning web design and coding HTML. :wink: Always learning!


#4

SUPER SUPER COOL! Thanks for sharing! :slight_smile:


#5