Web component for SVG icons. Works in any web framework and for any purpose. Optimized for smooth design and development workflow (we built it for ourselves!).
<script src="https://unpkg.com/@rnbws/svg-icon.js/dist/svg-icon.min.js"></script>
On you Terminal
npm i @rnbws/svg-icon.js
Use /svg-icon.config.json
in your root directory and set the default source
.
You can use relative path based on the root directory
{ "src": "icons/" }
It can be also any other CDN
{ "src": "https://raincons.rnbw.dev/" }
Enjoy icons/icons.html to view all your icons in a simple, organized, and searchable manner.
Place all of your icons in /icons
at your root directory.
root/
├─ icons/
│ ├─ icon1.svg
│ ├─ icon2.svg
│ ├─ icon3.svg/
You’re ready to go!
Set the icon-name
within the element’s content.
<svg-icon>arrow</svg-icon>
Or, you can do folder/icon-name
if you’ve categorized your library into folders.
<svg-icon>arrows/right</svg-icon>
Override the source directly by setting a different one in the src
attribute. You can Either use internal or external links.
<svg-icon src="https://rnbw.design/images/icon.svg"></svg-icon>
Colors are one of the main reasons svg-icon.js
was created!
The fill color of svg-icons is set by default to the inherited color of the font, so it can be overridden using a plain CSS selector.
<div style="color: red;">
<svg-icon>arrow</svg-icon>
</div>
And, you can always override colors using the color
attribute.
<svg-icon color="red">arrow</svg-icon>
You can set the size
directly (or simply apply your own CSS).
<svg-icon size="80">arrow</svg-icon>
Many thanks to svg-inject for enabling the passing of properties to SVG files.
Visit svg-icon.fyi to view the full documentation.
The svg-icon.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
Join Rainbow's Discord to chat with other community members about svg-icon.js.
Please see our contributing.md.
That's it! 🎉