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 i --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

.icon 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; 
}