Canopy Theme Icons

[slickfish]

Hi all. First time posting so excuse me if I'm not hitting normal community ettiquette.

Where is the icon library for the Scrolling Banner located in Canopy's code? I searched through Snippets but couldn't find it. I found the generic icon .liquid objects for wider theme use, but can't find the location which contains icons such as "Award" "Box" "Briefcase"... etc. I want to add more icons to this list. 

Cheers!

[suyash1]

@slickfish - can you share the page link where you have these icons? 

[Sinaran · Accepted solution]

Hey @slickfish . Also new here, but I've done some digging in Canopy (v 6.0.1) as we use it ourselves.

The icons are  (award, box, briefcase) in snippets/icon.liquid macro which renders them as SVGs. First line of that macro opens the <svg> tag, the long IF statement in that macro conditionally renders the icon "body" and the final line of the macro closes the SVG with </svg>. No more magic there.

So I think to add your own icons you'll need to convert them into SVGs, then add their "body"  (curves/objects) to the conditional rendering in snippets/icon.liquid. If you also want to make them available in Theme Editor, then include the newly added icons in options for relevant sections or blocks. 

Check how sections/faq.liquid works. It has simple code so it's a good starting point.  Line 54 renders the icon for given FAQ section based on what option is selected in block.settings.icon. The Liquid statement {% render 'icon', icon: block.settings.icon ... %} is the call to to snippets/icon.liquid.  The icons available for selection in Theme Editor are then listed in the options array starting on line 184. 

Best,

Michal

sinaran.cz

[namphan]

Hi @slickfish,

You can try to find it at 'icons-with-text.liquid' file. Or send me the file code, I will check it for you