iconic-svg
v1.0.0
Published
Easily convert SVG files to React components from the terminal.
Downloads
14
Maintainers
Readme
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.
License
MIT