Languages
[Edit]
PL

React - konwersja grafiki SVG na komponent React

0 points
Created by:
Aisha
418

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

    Alternative titles

    1. React - konwersja grafiki SVG do komponentu React
    Donate to Dirask
    Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
    Join to our subscribers to be up to date with content, news and offers.

    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