An SVG icon component for the web. Optimized for smooth design and development experience. Fits into any web framework and can be used anyhow.
<svg-icon size=”80px” color=”gray”>arrow</svg-icon>
-
Install with NPM:
npm install svg-icon.js
Or, you can get it going quickly with Unpkg CDN:
<script src="https://unpkg.com/rnbwdev/dist/svg-icon.min.js"></script>
You’ll then find (or manually create when manually embedding the script.
/icons
for placing all of your icons.icons/svg-icon.config.js
to locate the Icons' folder and defining a global defaultcolor
andsize
..icons/icons.js
andicons/icons.html
to view of all your icons in a simple, organized, and searchable manner.
-
Place all of your icons in the
/icons
folder.Or set different source at
svg-icon.config.js
...
-
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://en.wikipedia.org/wiki/Google_logo#/media/File:Google_2015_logo.svg"></svg-icon>
-
Colors are one of the main reasons svg-icon.js was created! Icons' fills are set by default to the font's inherited color, therefore can be overridden with plain CSS selectors using the
color
property.<div style="color: red;"> <svg-icon size="80">arrow</svg-icon> </div>
You can set a global
color
usingsvg-icon.config.js
...
-
Set the
size
directly or simply apply your own CSS.<svg-icon size="80">arrow</svg-icon>
You can set a global
size
usingsvg-icon.config.js
...
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! 🎉