❤
npm
Sign UpSign In

use-svg

0.0.7 • Public • Published

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> 

Methods

Method Arguments Description
start Initializes
add element: html or DOM object To render SVG icons only in specific section

I'm currently add more icons to this package

Readme

Keywords

Package Sidebar

Install

npm i use-svg

Repository

github.com/Abdelrahman3D/use-svg

Homepage

github.com/Abdelrahman3D/use-svg#readme

Weekly Downloads

0

Version

0.0.7

License

MIT

Last publish

Collaborators

  • abdelrahman3d
Try on RunKit
Report malware