moox/react-from-svg

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

React from SVG

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:

• React

--with-web-for-rescript

Need you to have:

• React
• rescript-react

--with-native

Need you to have:

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

--with-native-for-rescript

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

• @rescript/react
• rescript-react-native
• @rescript-react-native/svg

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

react-from-svg's Issues

Use width and height attributes from the source svg as default values.

Can't seem to make this work on my expo app.

Trying to convert svgs but it's not showing in my app, so weird, and there are no error either:
For instance, the black king svg gives this js file :

import React from 'react';
import Svg, { G, Path, } from 'react-native-svg';

export default ({width, height, fill, stroke, style}) => {
    return (
        <Svg width={width} height={height} fill={fill} stroke={stroke} style={style}><G fill="none" fillRule="evenodd"
                                                                                        stroke="#000" strokeWidth="1.5"
                                                                                        strokeLinecap="round"
                                                                                        strokeLinejoin="round"><Path
            d="M22.5 11.63V6" strokeLinejoin="miter"/><Path
            d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5" fill="#000"
            strokeLinecap="butt" strokeLinejoin="miter"/><Path
            d="M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10V37z"
            fill="#000"/><Path d="M20 8h5" strokeLinejoin="miter"/><Path
            d="M32 29.5s8.5-4 6.03-9.65C34.15 14 25 18 22.5 24.5l.01 2.1-.01-2.1C20 18 9.906 14 6.997 19.85c-2.497 5.65 4.853 9 4.853 9"
            stroke="#ececec"/><Path d="M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0"
                                    stroke="#ececec"/></G></Svg>);
};

But nothing appears inside my app.
Here is the file :

Error message sucks because of js bundle

(rescript) offset=".9" doesn't transform

Should be offset={0.9->Style.dp} not a string.
Regex probably missing the optional first 0.

Some attributes aren't transformed (or supported) properly

• class (should be className or dropped?)
• xml:space & friends

For ReScript

• style as strings
• enableBackground (web deprecated prop)
• text children
• fontWeight (missing _)
• in and type should be in_ and _type

Add support for javascript output

Issue with minified svg

Minified SVG (one line) have issues.

Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

will produce:

<Svg viewBox="0 0 512 512" width={width} height={height} fill={fill} stroke={stroke}><Path d="M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48"  stroke="#000" strokeLinecap="round" strokeLinejoin="round" stroke-/></Svg>

The fill attribute from the <Path> element is missing (I didn't use --remove-fill) and the last attribute isn't transformed well stroke-.

It doesn't happen on a well indented svg file.

(my workaround: use --pretty on svgo before using react-from-svg)

Issue with JS and React-Native

I found an issue that only happen on a react-native project with js output : --with-native

There is space between elements so it raise an error : Error: Text strings must be rendered within a <Text> component

 stroke={stroke}> <Path d="M8.388

8.388z"/> </Svg>

No issue on ReasonReactNative because JSX isn't the same.

svg style attributes should be removed

Currently we can have an issue with 2 style props, the one from the svg (string) and the one added & injected as prop. That's a problem that can trigger unexpected result.
Also TS can yell about this.

ReScript gradientTransform="matrix()" issue

something like gradient-transform="matrix(.38431685 -.92316433 .92320126 .38430148 -.987558 .951797)" is not transformed enough.
You then get the issue

This has type: string
Somewhere wanted: (float, float, float, float, float, float)

Giving filename produce no error but doesn't do anything

$ react-from-svg assets/pieceImages/black-king.svg components/piece_components/black-king.js --with-native
Files found 0
Files transformed 0
Files written 0
![black-king](https://user-images.githubusercontent.com/101560055/189501220-e642aa76-797a-4e0f-99e7-d3a92e5ce8e5.svg)

Add support for react-native-svg output