svg-reacted v0.0.5

Install

npm i -g svg-reacted

Usage

Create an svgconfig.json file in the root of your project.

// svgconfig.json

{
    "useDefaultSize": true,
    "templateFile": "template/template.txt",
    "inputDir": "svg",
    "outputDir": "react",
    "svgComponent": {
        "nameExtension": "Icon",
        "type": "tsx",
        "fill": "black"
    }
}

Create a template file matching the defined path in your config file

Run the follwing command in the same location

npx svg-reacted your.svg

Template File

Supported Variables

Example React DOM

import React from 'react';

const #{name}: React.FC = ({size = 30}) => {
    return (
        <svg width={size} height={size} viewBox='0 0 #{width} #{height}' fill='#{fill}'>
            <path
            d='#{path}'
            fill='#{fill}'
            stroke='#{fill}'
            />
        </svg>
    );
};

export default #{name};

Example React Native

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

const #{name}: React.FC = ({size = 30}) => {
    return (
        <Svg width={size} height={size} viewBox='0 0 #{width} #{height}' fill='#{fill}'>
            <Path
            d='#{path}'
            fill='#{fill}'
            stroke='#{fill}'
            />
        </Svg>
    );
};

export default #{name};

Configuration

General

svgComponent