0.9.7 • Published 5 months ago
svg-to-json v0.9.7
svg-to-json
This is a simple converter for SVG icons to JSON, TS, or JS files. Currently, it only converts paths from SVG. In future versions, support for the SVG element will be added. As such, it is currently only suitable for simple icons.
install
npm install --save-dev svg-to-json
setting required
In the root folder of your project
.svg-to-json.json
{
"props": {
"inputDir": "icons",
"outputDir": "output-dir",
"fileName": "iconsPath",
"outputType": [
"json",
"ts",
"js"
]
}
}
run
svgToJson
example use in React
import { useState, useEffect } from 'react';
import { iconsPaths } from './iconsPaths';
import styles from './svg.module.css';
export type IconNameType = keyof typeof iconsPaths;
interface Props {
color?: string;
name: IconNameType;
size?: number | string;
className?: string;
type: string;
}
interface IcontProps {
viewBox: string;
fill: string;
paths: IconPath[];
}
interface IconPath {
d: string;
fillRule: string;
clipRule?: string;
fill?: string;
stroke?: string;
strokeWidth?: number;
strokeLinecap?: string;
strokeLinejoin?: string;
}
const getIconPath = (iconName: IconNameType): IcontProps => {
if (!iconsPaths[iconName]) throw Error(`Icon ${iconName} does not exist.`);
return iconsPaths[iconName];
};
const Icon = ({ color = '', name, size = '1em', className = '' }: Props) => {
const [icon, setIcon] = useState<IcontProps>(getIconPath(name));
const [fill, setFill] = useState<string | undefined>(undefined);
useEffect(() => {
setIcon(getIconPath(name));
if (color && icon.fill !== undefined && icon.fill !== 'none') {
setFill(color);
} else if (icon.fill !== undefined) {
setFill(icon.fill.toString());
}
}, [name]);
return (
<svg
fill={fill}
role="img"
viewBox={icon.viewBox}
height={size}
width={size}
xmlns="http://www.w3.org/2000/svg"
className={`${styles.fill} ${className}`}
color={color}
>
{icon.paths.length > 0 &&
icon.paths.map((path: {}, index) => <path key={index} {...path} />)}
</svg>
);
};
export default Icon;