use-svg
v0.0.7
Published
The best tool to work with SVGs icons
Downloads
11
Maintainers
abdelrahman3dReadme
use-svg
The best tool to work with SVGs icons
Current version: 0.0.7
Install & basic usage
npm install use-svgHow 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