Iconic-svg NPM

Iconic-SVG

Easily convert SVG files to React components from the terminal.

Just put your svg files into a folder called 'icons', put it in the root of your project, and call iconic-svg in the terminal. Iconic-svg converts each svg file in your folder into a simple React component and bundles them all into a single .jsx file.

Install

npm install --save-dev iconic-svg

Usage: Generating React components from SVG files

Use kabab-case (as in my-icon-file.svg) to name your SVG files. iconic-svg uses the name of the SVG file to name the React component that is generated. The React component will be output with upper camel-case so that icon-light-dark-mode.svg becomes IconLightDarkMode. You can now import this component as you would any other React component: <IconLightDarkMode />

Source directory and Output file

By default, iconic-svg looks in the root directory of your project for a folder named 'icons'. Any svg files in the ./icons directory will be processed and added to an output file named icons.jsx, by default.

iconic-svg

To specify a custom input directory and/or output file:

iconic-svg --src ./my-custom-path/svg-files --out ./ui/icons.jsx

TSX output (default: JSX)

To generate a tsx file, simply change the extension to .tsx.

Using the generated components in your project

Import the SVG React icons from the generated output file.

import React from 'react'
import { IconCut, IconCopy, IconPaste, IconTrash } from './icons'

Start using them in your components:

<IconCopy /> Simple usage. Style using the .icon class that is embedded in the template or provide your own through a custom template.
<IconPaste className="menu-icon--disabled" /> Add additional CSS classes to control styling for specific cases.
<IconCut style="fill:red" /> Apply inline styles.

Pass your icon into another component (MenuItem):

<MenuItem name='Delete' icon={<IconTrash />} className="menu-item--danger" />

Styling

The icon CSS class is included in each React component's className attribute by default. Use the following CSS to control the color of your icons and how they are positioned.

.icon {
    fill: rgba(26, 25, 27, 0.85); /* use fill to control the color of the icon */
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon > svg {
    position: relative;
    top: 0; /* use top and left to center the svg within the icon */
    left: 0; 
}

React component template

This is the default template code that iconic-svg uses to generate each React component. The JSX expression {svgMarkup} is replaced with valid JSX markup generated from each SVG file. The className prop allows you to pass CSS classes as props into your SVG components. The style prop is included so you can pass in inline styles.

import React from 'react'

export const IconName = ({ className }) => {
    return (
        <span className={[ 'icon', className].join(' ')}>
            /*svgMarkup*/
        </span>
    )
}

Customize the React template

You can pass in your own custom template with the --template flag. This allows you to control how your components are set up.

iconic-svg --template ./my-custom-react-template.jsx

NOTE:

The {svgMarkup} JSX expression must be included so that your SVG markup can be injected into the template that you provide.
A template must include an import statement at the top (line 1) of the file.