EN
React - convert SVG graphics to React SVG Components
9
points
This article shows how to convert SVG graphics to React SVG Components under Linux. The article shows how to use svgr tool from the command line.
Quick solution (run following command):
npx @svgr/cli --icon input-image.svg > output-image.js
Read the next sections to know:
- how to install SVGR with npm,
- what
@svgr/clitool does with file, - useful resources.
1. Installation example
Simple instruction how to install SVGR globally:
sudo npm i -g @svgr/cli
Note: you can install it locally in project as development tool with
npm install @svgr/cli --save-dev.
Example installation output:
/usr/local/bin/svgr -> /usr/local/lib/node_modules/@svgr/cli/bin/svgr
+ @svgr/cli@5.5.0
added 144 packages from 116 contributors in 10.843s
2. Usage example
SVG image conversion to React componet can be made with following command:
npx @svgr/cli --icon icon.svg > icon.js
Example input (icon.svg file):
<svg
viewBox="0 0 283.5 226.8"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<!-- some svg elements here... -->
</svg>
Example output (icon.js file):
import * as React from "react";
function SvgIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 283.5 226.8"
width="1em"
height="1em"
{...props}
>
{/* some elements here... */}
</svg>
);
}
export default SvgIcon;