Add support for svg symbol/use feature

[ivands]

Please add support for the svg symbol/use feature. That way you don't have to create a black or white version. People can just import the svg via the use tag and style the icon how every they want.

<style>
.icon {
  color:red;
}
</style>
<svg class="icon">
  <use xlink:href="currencies.svg#btc"></use>
</svg>

[sindresorhus]

Can you link to an article about this?

[ivands]

Here is an article about the svg use tag. https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

And here is an article about using the svg use tag with an external source. https://css-tricks.com/svg-use-external-source/

Basically, you just need to wrap the svg inside a symbol tag with some ID attribute. And u can also make it more customizable friendly by using the svg currentColor feature. https://css-tricks.com/cascading-svg-fill-color/ That way people can just set the color property.

[MannyC]

This is already there. See the example file in the project root.

edit: oh, but when I looked at it some of the svgs had issues with the way they were displayed. They need viewBoxes defined in order to correctly work as an external xlink like that, but not all of them had one.

[BDominik]

Where is the exampe file?

[MannyC]

Looks like it was all removed last week

[lukechilds]

We cleaned up the repo a bit and split the example website out to a separate repo. Is this what you're looking for?

https://github.com/atomiclabs/cryptocurrency-icons-website