vdanchenkov / react-from-svg

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

React from SVG

Transform SVG files into React components, Native and/or Web, JavaScript and ReasonML. 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, -native                Output code for react-native-svg
    --with-web, -web                      Output code for DOM. If --with-native is also used, will be output as .web.js files
    --with-native-for-reason, -bsnative   Output code for @reason-react-native/svg
    --with-web-for-reason, -bsnweb        Output code for reason-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 install have:

• React

--with-web-for-reason

Need you to install have:

• React
• reason-react

--with-native

Need you to install have:

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

--with-native-for-reason

In addition to --with-native requirements, you need to install & add as bs-dependencies in your bsconfig.json:

• reason-react
• reason-react-native
• @reason-react-native/svg