use-svg
v0.0.7
Published
The best tool to work with SVGs icons
Downloads
3
Maintainers
Readme
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