PL
React - konwersja grafiki SVG na komponent React
0 points
W tym artykule pokazano, jak konwertować grafikę SVG do komponentu React w systemie Linux. W artykule pokazano, jak w wierszu poleceń korzystać z narzędzia svgr.
Szybkie rozwiązanie (uruchom następujące polecenie):
xxxxxxxxxx1
npx @svgr/cli --icon input-image.svg > output-image.jsPrzeczytaj następne sekcje, aby dowiedzieć się:
- jak zainstalować SVGR z npm ,
- co z plikami robi narzędzie
@svgr/cli.
Prosta instrukcja instalacji SVGR (globalnie):
xxxxxxxxxx1
sudo npm i -g @svgr/cliUwaga:
Możesz zainstalować go lokalnie w projekcie jako narzędzie programistyczne z
npm install @svgr/cli --save-dev.
Przykładowe dane wyjściowe instalacji:
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.843sKonwersję obrazu SVG do komponentu React można wykonać za pomocą następującego polecenia:
xxxxxxxxxx1
npx @svgr/cli --icon icon.svg > icon.jsPrzykładowe wejście ( plik icon.svg):
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
<!-- jakieś elementy svg... -->7
</svg>Przykładowe wyjście ( plik icon.js):
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
{/* jakieś elementy... */}14
</svg>15
);16
}17
18
export default SvgIcon;