react-from-svg

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

Usage no npm install needed!

<script type="module">
  import reactFromSvg from 'https://cdn.skypack.dev/react-from-svg';
</script>

README

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-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.