On: Stop Using Icon Fonts

[ygra]

You can reference elements from an external file just as well:

  <use xlink:href='icons.svg#foo'/>

Theoretically the browser should only download that file once, just as with multiple img elements referencing the same image. I haven't seen that approach much in the wild, though.

[lenkite → ygra]

This approach prevents CSS styling though since SVG referenced this way has its independent DOM and is not part of the current page DOM.

[ygra → lenkite]

Yes, in that sense it's more like CSS sprites, just a bit easier to use.

[city41 → ygra]

Good to know. This has me thinking it'd be cool to have a babel plugin or something that extracts out svgs like this. I currently have a website that heavily uses svgs and for the bulk of them I resorted to img elements because embedding the svg so many times increased the size of the html significantly. This use approach seems like it might be better.