svg2react-icon

A library to generate reusable React Icon components from raw SVG icons

Features

• Create a React Icon component file for each raw SVG icon file
• Rename illegal SVG attributes
• Optimize the SVG (remove comments, unnecessary parts, etc)
• Remove colors so that the parent's font-color will be cascaded to the icon
• Optional - output TypeScript components

Install

npm install --save-dev svg2react-icon

Sample usage

In your package.json:

{
  "scripts": {
    "build": "svg2react-icon [options] <inputDir> <outputDir>",
    ...
  }
}

Or in the command-line:

svg2react-icon [options] <inputDir> <outputDir>

By default, the files that will be generated are:

outputDir
|
+ -- index.ts
|
+ -- components
    |
    Icon1.tsx
    ...

By using the --no-sub-dir the index file and all the icons will be generated in the outputDir without the extra components folder.

Options:

  --typescript    generate TypeScript components instead of JS
  --monochrome    strip all fill and stroke attributes
  --named-export  use named export instead of export default
  --keep-colors   keep svg fill and stroke colors
  --no-sub-dir    Output index file and components all inside the output directory

License

MIT