https://github.com/moox/react-from-svg

Transform SVG files into React components (native | web, JavaScript | TypeScript).
https://github.com/moox/react-from-svg

react react-native react-native-svg reactjs svg typescript

Last synced: about 1 year ago
JSON representation

Transform SVG files into React components (native | web, JavaScript | TypeScript).

• Host: GitHub
• URL: https://github.com/moox/react-from-svg
• Owner: MoOx
• License: mit
• Created: 2019-04-08T06:23:25.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2025-04-03T17:24:54.000Z (about 1 year ago)
• Last Synced: 2025-04-03T18:28:05.152Z (about 1 year ago)
• Topics: react, react-native, react-native-svg, reactjs, svg, typescript
• Language: TypeScript
• Homepage:
• Size: 597 KB
• Stars: 60
• Watchers: 3
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React from SVG



  



[![GitHub package.json version](https://img.shields.io/github/package-json/v/MoOx/react-from-svg) ![npm downloads](https://img.shields.io/npm/dm/react-from-svg)](https://www.npmjs.com/package/react-from-svg)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/MoOx/react-from-svg/build.yml?branch=main)](https://github.com/MoOx/react-from-svg/actions)

[![License](https://img.shields.io/github/license/MoOx/react-from-svg)](https://github.com/MoOx/react-from-svg)  

[![GitHub followers](https://img.shields.io/github/followers/MoOx?style=social&label=Follow%20me)](https://github.com/MoOx)

[![LinkedIn Follow](https://img.shields.io/badge/Follow%20Me-on%20LinkedIn-gray?style=social&logo=invision&logoColor=%230077B5)](https://www.linkedin.com/in/maxthirouin/)

[![BlueSky Follow](https://img.shields.io/badge/Follow%20Me-on%20BlueSky-gray?style=social&logo=bluesky)](https://bsky.app/profile/moox.io)

[![X Follow](https://img.shields.io/twitter/follow/MoOx?style=social&label=Follow%20me)](https://x.com/MoOx)

> Transform SVG files into React components, Native and/or Web, JavaScript and/or TypeScript.

> Without minimal dependencies.

## Install

```console

npm install react-from-svg

```

## Usage

```console

react-from-svg --help

Usage

  $ react-from-svg   [--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-web-for-typescript, -rnwts     Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files

  --remove-fill, -rf                    Remove all 'fill' properties from SVGs, convenient for icons

  --remove-stroke, -rs                  Remove all 'stroke' properties from SVGs, convenient for icons

Example

  $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill

```

Generated components will allow you to inject all the props you could use on an ``/``, 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](./tests/) 👀

## Requirements

### `--with-web(-*)`

Need you to have:

- [React](https://reactjs.org)

Note: if you use [React Native for Web](https://github.com/necolas/react-native-web), see requirements below.

### `--with-native(-*)`

Need you to have:

- [React](https://reactjs.org)

- [React Native](https://reactnative.dev) (or an alternative platform like

  [React Native Web](https://github.com/necolas/react-native-web))

- [`react-native-svg`](https://github.com/react-native-community/react-native-svg)