Hacker News new | ask | show | jobs
by 8lall0 1931 days ago
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 :)
1 comments
nikkwong 1931 days ago
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

<body> <svg> <use href="/page1#icon-1"> </svg> </body>

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.

link