Why

This project is inspired by react-feather and typescript-react-svg-icon-generator. It's tedious to migrate SVG files to tsx/jsx files manually. This is a tool help developer to generate SVG icon component with tsx/jsx extenion easily.

Usage

const convert = require('react-gensvg');
// convert(src,dist,tsx,prettierConfig)
// src: string
// dist: string
// tsx: boolean, default true
// prettierConfig: prettier.Options

// generate tsx files by default
convert('./static/icons', './src/svg');
/* ./static/icons/A.svg -> ./src/svg/A.tsx */

// generate jsx files
convert('./static/icons', './src/svg', true);
/* ./static/icons/A.svg -> ./src/svg/A.jsx*/

// generate tsx files explicitly
convert('./static/icons', './src/svg', false);
/* ./static/icons/A.svg -> ./src/svg/A.tsx */

CLI

Usage: svgcli [options]

Options:
  --version   Show version number                            [boolean]
  --src, -s   source directory for svg files       [string] [required]
  --dist, -d  destination directory for generated files
                                                   [string] [required]
  --jsx       flag for jsx file extension. default: false    [boolean]
  -h, --help  Show help                                      [boolean]

npx svgcli -s ./static/icons -d ./src/svg --jsx
# ./static/icons/A.svg -> ./src/svg/A.jsx
# note: create dir ./src/svg if not exist

Template

Currently it uses a simple template string to generate code files.

import React, { forwardRef } from 'react';

const /* FileName */ = forwardRef(
  ({ ...rest }, ref) => {
    return (
      /* React SVG tag*/
    );
  }
);

export default /* FileName */;

LISENCE

MIT