logos/rnbw logos/github GitHub ↗

svg-icon.js

Web component for SVG icons. Works without or with any web framework and for any purpose. Optimized for smooth design and development workflow (we built it for ourselves).

arrows/arrow-top arrows/arrow-top-right shapes/rectangle arrows/arrow-bottom-right arrows/arrow-left arrows/arrow-top-left shapes/oval arrows/arrow-right arrows/arrow-bottom-left arrows/arrow-top

Quick Setup

Quick start with Unpkg CDN

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

Install with NPX (and enjoy the template to view all your icons in a simple, organized, and searchable manner).

npx @rnbws/svg-icon.js

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

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

You're ready to go!

Basic Usage

logo
<svg-icon>logo</svg-icon>

Or, you can do folder/icon-name if you’ve categorized your library into folders.

arrows/arrow-right
<svg-icon>arrows/arrow-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="icon.svg"></svg-icon>

Colors

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.

arrows/arrow-top
<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>

Size

Apply size directly (or simply your own CSS).

shapes/triangle
<svg-icon size="80">arrow</svg-icon>
logos/rnbw logos/github GitHub ↗