SVG icons to JSX components generator CLI tool

Usage

1npm i iconjsx -g

1npx 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

1const AcademicCap = (props) => {
2  return (
3    <span
4      class={["icon icon-academic-cap", props.classes].join(" ")}
5      onDrop={props.onDrop}
6      onClick={props.onClick}
7      onHover={props.onHover}
8      draggable={props.draggable || false}
9    >
10      <svg> ..svg elements here.. </svg>
11    </span>
12  );
13};
14
15export 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!