React - konwersja grafiki SVG na komponent React

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):

npx @svgr/cli --icon input-image.svg > output-image.js

Przeczytaj następne sekcje, aby dowiedzieć się:

1. jak zainstalować SVGR z npm ,
2. co z plikami robi narzędzie @svgr/cli.

1. Instalacja

Prosta instrukcja instalacji SVGR (globalnie):

sudo npm i -g @svgr/cli

Uwaga:

Możesz zainstalować go lokalnie w projekcie jako narzędzie programistyczne z npm install @svgr/cli --save-dev.

Przykładowe dane wyjściowe instalacji:

/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. Przykład użycia

Konwersję obrazu SVG do komponentu React można wykonać za pomocą następującego polecenia:

npx @svgr/cli --icon icon.svg > icon.js

Przykładowe wejście ( plik icon.svg):

<svg
     viewBox="0 0 283.5 226.8"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- jakieś elementy svg... -->
</svg>

Przykładowe wyjście ( plik icon.js):

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}
    >
      {/* jakieś elementy... */}
    </svg>
  );
}

export default SvgIcon;

3. Przydatne linki

1. Strona główna projektu
2. Konwerter online - Playground
3. Witryna GitHub
4. Strona NPM JS