A command line utility that takes a svg image file and outputs a fully formatted stateless functional React component with height
and width
for props. With flags to toggle formatting and remove style attributes.
npm install -g svg-to-react-cli
svgtoreact <svgImage> <ComponentName>
NOTE: image file must be in current working directory. Do not add the extention. If file is image.svg
, then just enter image
as the first argument. ComponentName will be the name of the sfc and filename with .js
appended.
svgtoreact dir
or for all files in directory (will name all components in CamelCase based on image name. If image is image.svg
then new component will be Image
and file will be Image.js
):
Or use flags: svgtoreact <svgImage> <ComponentName> --output ./components/svgComponents/ --no-format --rm-style
Optional Flags:
-o, --output <path>
- the output path. Do not include the filename.
--no-format
- will skip line breaks and indentation to svg. If your svg is already formatted, use this flag.
--rm-style
- removes all style attributes from svg tags.
--help
- Prints out this readme.
--example
- Prints an example of the i/o of this util.
Takes this:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><defs><filter id="glow"><feGaussianBlur stdDeviation="7" result="coloredBlur"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><circle cx="256" cy="256" r="256" fill="#f5a623" opacity="1" stroke="#fff" stroke-width="0"></circle><path fill="#000000" opacity="1" d="M363.783 ..." transform="translate(25.6, 25.6) scale(0.9, 0.9) rotate(0, 256, 256)" clip-path="false" filter="url(#glow)"></path><g font-family="Arial, Helvetica, sans-serif" font-size="120" font-style="normal" font-weight="bold" text-anchor="middle" class="" transform="translate(256,300)" style="touch-action: none;"><text stroke="#000" stroke-width="30" opacity="1"></text><text fill="#fff" opacity="1"></text></g></svg>
And creates a new file with this:
import React from 'react';
export default function NewThing(props) {
return (
<svg xmlns="https://www.w3.org/2000/svg" style={{height: 512, width: 512}} viewBox="0 0 24 24" width={24} height={24} {...props}>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="7" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<circle cx="256" cy="256" r="256" fill="#f8e71c" opacity="1" stroke="#fff" strokeWidth="0"></circle>
<path fill="#50e3c2" opacity="1" d="M149.25 18.313L168.156 ..." clipPath="false" filter="url(#glow)"></path>
<g fontFamily="Arial, Helvetica, sans-serif" fontSize="120" fontStyle="normal" fontWeight="bold" textAnchor="middle" class="" transform="translate(256,300)" style={touchAction: "none"}>
<text stroke="#000" strokeWidth="30" opacity="1"></text>
<text fill="#fff" opacity="1"></text>
</g>
</svg>
);
}
The order of precedence of how width/height is set on a generated component is as follows:
- 1 - Passed in width and height props are always priority one. This gives run time control to the container.
- 2 - If a svg has its width/height set, this will be the first fallback if width/height props are not provided.
- 3 - If the svg has not provided width/height attributes, the svg's viewbox's width/height segments are used as the fallback if width/height props are not provided.
- 4 - Finally, if the svg has no width/height attributes, and the svg also doesn't have a viewbox - a fallback of 50px is applied to the width and height