`<use>` Support

[shshaw]

It would be awesome if there was a <defs> style variant of this to allow for prototyping <symbol> and <use> based icon systems.

For example:

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="https://icon.now.sh/defs.svg#chevron-down" fill="red"></use>
</svg>

Perhaps they could be split by libraries to keep the def size down for easier serving & faster loading, like https://icon.now.sh/material.svg#android

[jxnblk]

Interesting... so the idea would be to fetch the resource, then inject it in the page as an svg with defs?

[shshaw]

I was thinking simpler than that; just an SVG file with each icon as a <symbol> with appropriate ID.

So https://icon.now.sh/material.svg would be something like this:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="android" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill-rule="nonzero" d="..."></path></symbol>
<symbol id="announcements" ...></symbol>

...
</defs>
</svg>

That way when you do <use xlink:href="https://icon.now.sh/material.svg#android" fill="red"></use>, the <symbol> is pulled from that material.svg.

I mentioned this elsewhere and there may be issues with cross-origin xlink:href references in certain browsers, but I haven't done any recent testing to know for sure.

[shshaw]

Since it's mainly for prototyping, cross-browser support isn't vital, but a tool like SVG4Everybody could help mitigate some issues client-side by injecting like you're describing.

[davidhund]

There's more advantages to embedding the icons useing a 'sprite'. microicon would provide a quick way to prototype certain library's icons without needing to download (and converting to a sprite) them ourselves.