iconjsx v0.0.5

SVG icons to JSX components generator CLI tool

Usage

npm i iconjsx -g

npx iconjsx -i ./example/svg -o ./example/icons

CLI options

-i, --input     (required) Relative DirPath with svg files

-o, --output    (required) Relative DirPath where
                jsx files will be generated

-c, --classes   (default: "icon") String of css classes which
                 will be added to each component (if you want to add specify more then
                 one class, put it inside " "). To turn it off set it: "".

-n, --name     (default: true) Adds an individual component classname,
               which is generated from svg file name


-p, --prefix    (default: "icon-") Prefix which will be added for the individual
                 component classname

-e, --ext      (default: jsx) Which jsx extension output files
                will be generated (jsx or tsx)

-q, --quiet    (default: false) Turns off stdout logs for each generated file

Generated JSX component example

const AcademicCap = (props) => {
  return (
    <span
      class={["icon icon-academic-cap", props.classes].join(" ")}
      onDrop={props.onDrop}
      onClick={props.onClick}
      onHover={props.onHover}
      draggable={props.draggable || false}
    >
      <svg> ..svg elements here.. </svg>
    </span>
  );
};

export default AcademicCap;

Useful for React, Vue, SolidJS

This is just a concept that was sufficient for my task: I wanted to use Heroicons in my Solid.js (jsx) project.
I understand that there are many things that still need to be improved.
If you have any ideas or suggestions, I would appreciate your help!