7 ms·
When developing, the fact that icon fonts follow the size and color of the surrounding text is nice, though. E.g. when tweaking the text color of a button. At
by petters 6y ago
When developing, the fact that icon fonts follow the size and color of the surrounding text is nice, though. E.g. when tweaking the text color of a button.
At least in my limited frontend experience.
- DangerousPie 6y agoSVGs can do the same thing.
- tobyhinloopen 6y agoThat SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
- DangerousPie 6y agoYou can use an "SVG sprite" with <use>. No need to inline the SVG every time.
- tobyhinloopen 6y agoOh? I have to look that up
- DangerousPie 6y agoTook me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.
- faeyanpiraat 6y agoBut how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?
- jarek-foksa 6y agoThis should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".
- 8lall0 6y agoYou 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 6y agoYou'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.
- f-word 6y agoEither 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 6y agoYou can also use Boxy SVG to create and edit SVG sprites: https://boxy-svg.com/#tour-symbols https://boxy-svg.com/#tour-symbols
- leipert 6y agoWe are using this at GitLab: https://gitlab-org.gitlab.io/gitlab-svgs/ https://gitlab-org.gitlab.io/gitlab-svgs/, using svg-sprite to build the sprite file: https://www.npmjs.com/package/svg-sprite https://www.npmjs.com/package/svg-sprite
- Mauricebranagh 6y agocompared to the massive Js CSS and Images included on almost all 99.9% of pages a bit of SVG is trivial.
- d0gbread 6y agoEverything's a bit in isolation, that's how they get ya. Easily to bulk up, hard to trim back down.
- Mauricebranagh 6y agosigh tell me about it
- Aeolun 6y ago1kb is a lot for a simple svg icon. That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.
- kps 6y agoBut if you want 5 icons, 5K of SVG beats 55K of WOFF.
- tobyhinloopen 6y agoI wonder how React copes with a whole bunch of inline SVGs. Seems expensive
- RobertKerans 6y agoCopes totally fine and it's trivial to memoise them anyway.
- duhi88 6y agoMost icons are generally tiny. Millage will vary, but they can speed up your site. Fewer requests for a slightly large page size.
- petters 6y agoThanks for the clarification. Clearly, I have things to learn about SVGs.