Skip to content
Convert svg files to React class for use this files in you ReactNative project
JavaScript
Branch: master
Clone or download
Arkadiy Khoroshikh
Arkadiy Khoroshikh 1.8.0
Latest commit 1736d9a Jul 15, 2019

README.md

svg2rn

Convert svg files to React class for use this files in your ReactNative project

Installation

npm install -g svg2rn

If you find bag, please create ISSUE.

Usage

❗️ IMPORTANT ❗️ In project your need install react-native-svg package for support svg component ❗️

To run the script go to the folder with you svg files and run command in console

svg2rn

After, will be created folder Component, where exist JS file.

For select output folder, configured by setting -o, --output and name you path.

svg2rn -o /home/user/icon

For select custom input directory, configured by setting -i or --input. For example:

svg2rn -i assets/uncompiled -o assets/icons

Folder Component will not be created auto.

If you want to use a "Icon" suffix, add to the command params --suffix.

svg2rn --suffix

Expo support

For support expo, please use flag --expo.

svg2rn --expo 

Example

Svg file before convert

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="23" viewBox="0 0 25 23">
    <defs>
        <path id="5ilna" d="M129.7 160.66l4.2 6 7.03 2.16-4.42 5.83.13 7.33-6.94-2.37-6.92 2.37.13-7.33-4.41-5.83 7-2.17z"/>
    </defs>
    <g>
        <g transform="translate(-117 -160)">
            <use fill="#fff" fill-opacity="0" stroke="#a2b2bc" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="50" xlink:href="#5ilna"/>
        </g>
    </g>
</svg>

Svg component after convert

import React from "react";
import Svg, { Use } from "react-native-svg";

const StarIcon = props => (
  <Svg width={25} height={23} viewBox="0 0 25 23" {...props}>
    <Use
      fill="#fff"
      fillOpacity={0}
      stroke="#a2b2bc"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeMiterlimit={50}
      xlinkHref="#a"
      transform="translate(-117 -160)"
    />
  </Svg>
);

export default StarIcon;

Usage

import StarIcon from 'StarIcon'

// We resize image to width=50 and height=46
// Attrs fill,width,height and other don't required

<StarIcon fill='#fff' width={50} height={46}>

//

Licence MIT.

You can’t perform that action at this time.