Skip to content

Transform SVG files into React components (native | web, JavaScript | Reason/ReScript).

License

Notifications You must be signed in to change notification settings

MoOx/react-from-svg

Repository files navigation

React from SVG

Sponsoring button

GitHub package.json version npm downloads GitHub Workflow Status License
GitHub followers Twitter Follow Sponsor my work

Transform SVG files into React components, Native and/or Web, JavaScript and rescriptML. Without shitload of dependencies.

Install

npm install react-from-svg

# or

yarn add 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-native-for-rescript, -rrn      Output code for @rescript-react-native/svg
  --with-web-for-rescript, -rrnw        Output code for @rescript/react
  --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons
  --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons
  --commonjs, -cjs                      Export as commonjs instead of es6 import/export

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

Generated components will have the following props that you can inject to the SVG components:

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

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

Requirements

--with-web

Need you to have:

--with-web-for-rescript

Need you to have:

--with-native

Need you to have:

--with-native-for-rescript

In addition to --with-native requirements, you need to have:

Ensure as that this dependencies are in the bs-dependencies of your bsconfig.json.