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!).
- Add the following script to your page:
<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 defaultsource
.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! 🎉