svg-icon.js

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!).

Install with Unpkg CDN

1. Add the following script to your page:

   <script src="https://unpkg.com/@rnbws/svg-icon.js/dist/svg-icon.min.js"></script>

Install with NPM

1. On you Terminal

   npm i @rnbws/svg-icon.js

2. 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/" }

3. Enjoy icons/icons.html to view all your icons in a simple, organized, and searchable manner.

4. Place all of your icons in /icons at your root directory.

   root/
   ├─ icons/
   │  ├─ icon1.svg
   │  ├─ icon2.svg
   │  ├─ icon3.svg/

   You’re ready to go!

Usage

1. 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.company/images/icon.svg"></svg-icon>

2. 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>

3. You can set the size directly (or simply apply your own CSS).

   <svg-icon size="80">arrow</svg-icon>

Dependencies

Many thanks to svg-inject for enabling the passing of properties to SVG files.

Documentation

Visit svg-icon.fyi to view the full documentation.

Community

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.

Contributing

Please see our contributing.md.

That's it! 🎉