React from SVG

Transform SVG files into React components, Native and/or Web, JavaScript and/or TypeScript. Without minimal dependencies.

Install

1npm install react-from-svg

Usage

1react-from-svg --help
2
3Usage
4  $ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]
5
6Options
7  --with-native, -rn                    Output code for react-native-svg
8  --with-native-for-typescript, -rnts   Output code for react-native-svg with TypeScript
9  --with-web, -rnw                      Output code for DOM. If --with-native is also used, will be output as .web.js files
10  --with-web-for-typescript, -rnwts     Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files
11  --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons
12  --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons
13  --allow-override-fill, -aof           --allow-override-fill, -aof           Replace all 'fill' properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}.
14
15Example
16  $ react-from-svg src/svgs src/svgs/components --with-web-for-typescript --allow-override-fill

Generated components will allow you to inject all the props you could use on an <svg>/<Svg>, such as:

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

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

Requirements

--with-web(-*)

Need you to have:

• React

Note: if you use React Native for Web, see requirements below.

--with-native(-*)

Need you to have:

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

Options

--remove-fill

Remove all fill properties from SVGs, convenient for icons.

--remove-stroke

Remove all stroke properties from SVGs, convenient for icons.

--allow-override-fill

Replace all fill properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}.
If fills[N] is undefined, fallback to the original value (except if --remove-fill is used). Useful to dynamically control icon color(s).

Examples

Usage with --allow-override-fill and children

When using --allow-override-fill, you can pass children to the component to override the fill(s). You can for example update a black SVG path to one using a gradient.

Assuming you have a SVG in src/svgs/logo.svg, let's generate an SVG component :

1react-from-svg src/svgs src/svgs/components --with-web-for-typescript

You should have an SVG component in src/svgs/components/SVGLogo.tsx.

Now let's boost this SVG component to use a gradient.

1import SVGLogo from "@/src/svgs/components/SVGLogo";
2import { colors } from "@/src/tokens.stylex"; // your colors could be just a simple object
3
4const logoGradientId = "logo-gradient-id";
5export default function LogoWithGradient() {
6  return (
7    <SVGLogo width={149} height={32} fills={[`url(#${logoGradientId})`]}>
8      <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id={logoGradientId}>
9        <stop stopColor={colors.textSecondary} offset="0%"></stop>
10        <stop stopColor={colors.textTertiary} offset="100%"></stop>
11      </linearGradient>
12    </SVGLogo>
13  );
14}

That's it. You started from a simple single color SVG path and ended up with a gradient SVG path.