Transform SVG files into React components, Native and/or Web, JavaScript and rescriptML. Without shitload of dependencies.
npm install react-from-svg
# or
yarn add react-from-svgreact-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-fillGenerated components will have the following props that you can inject to the SVG components:
widthheight-
fill(if you use--remove-fill) -
stroke(if you use--remove-stroke)
⚠️ To see what you can expect from the transformations, check our snapshots 👀
Need you to have:
Need you to have:
Need you to have:
- React
- React Native (or an alternative platform like React Native Web)
react-native-svg
In addition to --with-native requirements, you need to have:
Ensure as that this dependencies are in the bs-dependencies of your bsconfig.json.