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):
xxxxxxxxxx1
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.
Simple instruction how to install SVGR globally:
xxxxxxxxxx1
sudo npm i -g @svgr/cliNote: you can install it locally in project as development tool with
npm install @svgr/cli --save-dev.
Example installation output:
xxxxxxxxxx1
/usr/local/bin/svgr -> /usr/local/lib/node_modules/@svgr/cli/bin/svgr2
+ @svgr/cli@5.5.03
added 144 packages from 116 contributors in 10.843sSVG image conversion to React componet can be made with following command:
xxxxxxxxxx1
npx @svgr/cli --icon icon.svg > icon.jsExample input (icon.svg file):
xxxxxxxxxx1
<svg2
viewBox="0 0 283.5 226.8"3
xmlns="http://www.w3.org/2000/svg"4
xmlns:xlink="http://www.w3.org/1999/xlink"5
>6
<!-- some svg elements here... -->7
</svg>Example output (icon.js file):
xxxxxxxxxx1
import * as React from "react";2
3
function SvgIcon(props) {4
return (5
<svg6
xmlns="http://www.w3.org/2000/svg"7
xmlnsXlink="http://www.w3.org/1999/xlink"8
viewBox="0 0 283.5 226.8"9
width="1em"10
height="1em"11
{props}12
>13
{/* some elements here... */}14
</svg>15
);16
}17
18
export default SvgIcon;