iconjsx
v0.0.5
Published
CLI tool which helps to generate JSX icon components from SVG files.
Downloads
4
Readme
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!