Use-svg NPM | npm.io

use-svg

The best tool to work with SVGs icons

Current version: 0.0.7

Install & basic usage

npm install use-svg

How to use

You can use package's default icons, your custom ones or combination of them.

To include default icons

Just before the end of the closing <body> tag you have to include the default-icons and the script file:

<script type="text/javascript" src="use-svg/dist/js/default-icons.js"></script>
<script type="text/javascript" src="use-svg/dist/js/use-svg.js"></script>
<script type="text/javascript">
    Icons.start();
</script>

To include your custom icons

If you wants to add any custom svg icon to the icons list you first copy the d attribute from the path

Important to note that the viewBox for your icon should be 24*24

<svg id="iconName" viewBox="0 0 24 24">
    <path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>
</svg>

Then add it with icons name to an object and name it icons

<script type="text/javascript">
    var icons = {
        iconName: "M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z",
        moreIconName: " ... ",
        ...
    };
</script>
<script type="text/javascript" src="use-svg/dist/js/use-svg.js"></script>

To use the icon

Simply as the ordinary way using <use> tag and but in the xlink:href attribute the icon names

<svg class="icon">
    <use xlink:href="#android"></use>
</svg>

...

<script type="text/javascript">
    useSVG.start();
</script>

<section class="section-1">
    <svg class="icon">
        <use xlink:href="#android"></use>
    </svg>
</section>

...

<script type="text/javascript">
    var section = document.querySelector('.section-1');
    useSVG.add(section);
</script>