/svg2react-icon

Generate React icon components from SVG raw files

Primary LanguageJavaScriptMIT LicenseMIT

svg2react-icon

📌 Deprecation Notice

- As of 1.1.2023 This repository is deprecated!
- It is no longer maintained by Components.

If you need react compatible icons please install @wix/wix-ui-icons-common

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