Iconic-SVG

Turn your custom SVG files into React components. 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 processes 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 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: icon-light-dark-mode.svg => 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.

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 = (props) => {
    const { className, style } = props

    const classes = [ 'icon', className].join(' ').trim();

    return (
        <span className={classes}>
            {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.