Skip to content

nairinarinyan/iconito

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

Iconito

SVG icon management for React

Intro

Iconito lets you store your SVG icons in a single definition file as symbols so you can use them with references.

Getting started

Installation

npm i iconito

Configuration

Icon definitions are stored as symbols in a single SVG file. You have two options to pass the desired path of the definitions to the configuration.
Add either .iconitorc file in the root of your project

{
  "definitions": "src/assets/icons/icon-definitions.svg"
}

Or add a field in your package.json

"iconito": {
  "definitions": "src/assets/icons/icon-definitions.svg"
}

Usage

Adding icons

Add icons to the definitions with

npx iconito add ~/path/to/icon.svg icon-name

Or directly calling the script

./node_modules/.bin/iconito add ~/path/to/icon.svg icon-name

It will optimize the svg file with SVGO, strip the colors by default and add an id to the symbol so it can be referenced later with
<use href={`#${icon}`} />

The definitions file will end up with something like this

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 24 24" id="icon-name"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/></symbol>
</svg>

By default Iconito will replace the colors of the icon with currentColor, so you can apply a color with CSS. It will take the nearest color (text color). If you want to preserve original colors, pass --keepColors while adding the icon.

Initialization

For the icon symbols to be available in DOM, you should pass the contents of the file to the initIcons function. Getting the contents of the definition file depends on your build system/bundler.
If you are using Parcel, you can import the file with bundle-text.

import iconDefinitions from 'bundle-text:./assets/icons/icon-definitions.svg';

And for webpack

import iconDefinitions from 'raw-loader!./assets/icons/icon-definitions.svg';

And then

import { initIcons } from 'iconito';

initIcons(iconDefinitions);

Using icons in React

You can use the provdided Icon component

import { Icon } from 'iconito';

<Icon 
  icon="icon-name"
  size={20}
  className="mr-1" />

Or if you prefer:

<svg>
  <use href={`#${iconName}`} />
</svg>

About

SVG icon management for React

Topics

Resources

License

Stars

Watchers

Forks