Oh? I have to look that up

DangerousPie · on March 3, 2021

Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.

faeyanpiraat · on March 3, 2021

But how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?

8lall0 · on March 3, 2021

You can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work.

Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner.

The greatest advantage is that you can reference externally your svg with xlink.href on top of your website: you have to make one more request, but it's cacheable. Pick your tradeoff :)

nikkwong · on March 3, 2021

You're saying you can embed all the SVGs onto one page, and then reference them on other pages/domains by using xlink.href? I haven't heard of this?

So what you're describing is having site.com/page1 which has markup: <body> <svg id="icon-1"> ... </svg> </body>

and then on site.com/page2 having

Or something of this manner? Haven't encountered this, but sounds awesome; especially since you'd get the power of both inlining and caching the asset.

jarek-foksa · on March 3, 2021

This should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".

f-word · on March 3, 2021

Either fill: currentColor or fill: var(--iconColor, currentColor) should do the trick. I prefer the 2nd one because it lets me change iconColor whenever I find it appropiate

jarek-foksa · on March 3, 2021

You can also use Boxy SVG to create and edit SVG sprites: https://boxy-svg.com/#tour-symbols

reaperducer · on March 3, 2021

Boxy says "15 day free trial" but there's no information about how much it costs.

Dora anyone know? I'm not going to sign up for something without knowing what I'm getting into.

jarek-foksa · on March 3, 2021

Linux desktop app is free, macOS desktop app costs 9.99 USD (one-time payment), web app costs 9.99 USD / year (no cloud services) or 9.99 USD / month (with cloud services). The complete pricing table is shown in the footer area of the home page when you open it with a Chromium-based browser.

jefftk · on March 3, 2021

> when you open it with a Chromium-based browser

Looks like they're using the experimental CSSStyleSheet() constructor [1] to display the pricing table. Ugh.

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

jessaustin · on March 3, 2021

Someone has to push us to the future! Why wouldn't a business be happy to exclude 30% of browsers?

https://www.npmjs.com/package/construct-style-sheets-polyfil...

leipert · on March 3, 2021

We are using this at GitLab: https://gitlab-org.gitlab.io/gitlab-svgs/, using svg-sprite to build the sprite file: https://www.npmjs.com/package/svg-sprite