Languages
[Edit]
PL

React - konwersja grafiki SVG na komponent React

0 points
Created by:
Aisha
328

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

    ReactJS (PL)

    React - konwersja grafiki SVG na komponent React
    Native Advertising
    ­čÜÇ
    Get your tech brand or product in front of software developers.
    For more information Contact us
    Dirask - we help you to
    solve coding problems.
    Ask question.

    ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

    Join