Nifty Procrastination Machine

    react-gensvg
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    react-gensvg

    A tsx/jsx file generator for svg files

    version Build Status Code Coverage MIT License PRs Welcome

    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

    Install

    npm i react-gensvg

    DownloadsWeekly Downloads

    4

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • tizee