React from SVG

Transform SVG files into React components, Native and/or Web, JavaScript and/or TypeScript. Without minimal dependencies.

Install

npm install react-from-svg

Usage

react-from-svg --help

Usage
  $ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]

Options
  --with-native, -rn                    Output code for react-native-svg
  --with-native-for-typescript, -rnts   Output code for react-native-svg with TypeScript
  --with-web, -rnw                      Output code for DOM. If --with-native is also used, will be output as .web.js files
  --with-web-for-typescript, -rnwts     Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files
  --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons
  --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons

Example
  $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill

Generated components will allow you to inject all the props you could use on an <svg>/<Svg>, such as:

• width
• height
• fill (if you use --remove-fill)
• stroke (if you use --remove-stroke)
• style

⚠️ To see what you can expect from the transformations, check our snapshots 👀

Requirements

--with-web(-*)

Need you to have:

• React

Note: if you use React Native for Web, see requirements below.

--with-native(-*)

Need you to have:

• React
• React Native (or an alternative platform like React Native Web)
• react-native-svg