Hi there,
I was wondering, if it was possible to pilot an SVG icon’s color, from a collection list color field ?
Here is my public share link: LINK
(how to access public share link)
Depending on how may icons etc, you can use SVG inline code (inside of a custom code component). Then you can add CMS variables to your custom code to control color, size, stroke width etc
http://vincent.polenordstudio.fr/snap/ulshf.jpg
(CSS can’t control the color of an SVG external file, that’s for sure.)
sounds awesome !
when you say add cms variable are you speaking about “slug” ?
I read something similiar somewhere when someone wanted to link an ecommerce variable into a webflow collection list.
Okay, let me record a demo. 5mn.
Are you in a hurry? I’d like to make a proper demo but I can’t do it right right away. probably in a couple of hours.
hey no I’m not in a hurry 
please take your time !!
glad you’re willing to help !!
cheers !
I’ll outline it quickly for you.
In the relevant CMS item, add a color field and go into each item to add a color.
SVG icons are code. Take an icon, open it in a text editor, copy everything from to and paste it in a custom code component. Save it and you should see it right away.
Attention! Carrefully export the size of your icon because it’s tought to do it in code.
Now in the code of the icon, spot where the color is (usually start by # after a fill or stroke attribute).
Select the color.
Now your Custom code box MUST BE either inside of a dynamic list or inside a template page. If it is, you can see an Add field link at the top right of the box.
Having the color selected in the code, click on Add field and look for your CMS color value. (can be in this item or in a reference, depends on your structure).
Now the color of the icon is dynamic.
Your CMS color can be put on a CMS item, so that each time you add an item you get to select a color for the icon. (in my example, the cion never changes). But you can also reference a collection of colors and name the color (example green=available red=not in stock), and then in the item referencing the color collection, you simply chose available or not in stock, and the color applies.
You could think of having a different icon and a differennt color for each item but that requires to also add the SVG code in the CMS, and to know how to clean SVG code to control it with embeded CSS. In that case you’ll add the scg code, the color in CMS, and you’ll have a CSS code with custom code element, targeting the SVG class, and coloring it.
3 Likes
This is pure awesomeness ! Thank you !
Did you succeed with just the outline? i reached an issue with my video demo because I want to use an icon on which I have a lot of SVG code cleaning to do. So I’m going to just redo the icon myself and try to have a cleaner structure, like the one in my first screenshot.
There’s a lot to know about inline SVG control, FYI. For example, the normal good practice to use inline SVG is to first declare all the icons in the code somewhere, anywhere, and then use a tiny piece of code to call instances of each declared icon. So you don’t repeat code and you can style each one differently.
If you have a design with a handful of tiny icons that you’re going to repeat everywhere in the site with different style, it can be effective to use inline SVG. I have found a cool method to repeat code on every page. usually you have a Symbol for your navbar… then place a custom code box inside of the symbol. And put all the snippets of CSS and SVG code you want to see repeat through all the pages of the site AND see the effects in the designer. Because if you place CSS code at page settings level or site settings level, you don’t see the effects in the designer.
Edit: here is more info about the <use>tag for SVG instances. http://taye.me/blog/svg/a-guide-to-svg-use-elements/
1 Like
Vincent is there any good resources for this. I’m wanting to switch from font icons, to svg’s but trying to wrap my brain around, svg sprites, inline svg. So I can add hover effects. Since webflow treats them as images and therefore unable to #fill ect. Would be super helpful for a page that has a ton of icon files.
appreciate any direction you can assist with .
always
Jer
Good questions and I don’t have all the answers.
There’s surely a limit of using incons inline, it’s not for all icons but if it’s for icons you repeat a lot, you can consider it. Read my answer above and check http://taye.me/blog/svg/a-guide-to-svg-use-elements/ because that’s the practice you want to put in place. Also consider the trick of having your inline SVGs declared in a custom code component plaed in the navbar symbol.
And… come back to report on how it goes
1 Like
Normally I’d say that there is no possibility to affect and external SVG with CSS in your page. I have to verify again to see if there’s any news on this front.
But you can use the <use>tag to call external icons SVG `use` with External Source | CSS-Tricks - CSS-Tricks
I don’t know what the benefits of doing so are. One benefit is not having extra code in your page and count on the browser cache to do all the work. My advice on having code repeated on every page is for the case you really are using all the icons on every page… And even in that case, the technique of calling external SVG spends less data… But I’m pretty sure you lose the ability to style the SVg as desired on the way.
1 Like
