Home

SVG jako komponenty w create-react-app

create-react-app jest często domyślnym wyborem do tworzenia nowych aplikacji w React. Obsługa SVG nigdy nie była tak prosta.

Nie tak dawno temu obsługa ikon w moich projektach była problematyczna. Wyglądało to mniej więcej tak:

  1. Dostać ikonę SVG od designera.
  2. Wyczyścić ją z atrybutów fill itd.
  3. Zminifikować (np używając svgo).
  4. „przepisać” na komponent Reactowy lub użyć jako SVG Sprite.
  5. Dostać nową ikonę i wszystko powtarzać.

Jakiś czas temu sprawę ułatwiło powstanie SVGR – świetnego kompilatora plików SVG do komponentów Reactowych, wraz z szeregiem opcji.

W react-scripts od paru miesięcy SVGR jest dołączony do budowania create-react-app. Teraz wygląda to świetnie, bo wystarczy bezpośrednio importować SVG do Reacta, a plugin Babela i Webpack zadbają o to by zostały wyrenderowane inline svg zamiast tagów <img>.

Syntax jest bardzo lekki:

import icon from './some-icon.svg; // icon to URL do ikony (dla tagu <img>)

import { ReactComponent as Icon } from './some-icon.svg'; // Icon to komponent Reactowy (<Icon>)

Rozwiązania z URL to pliku użyjemy raczej dla plików rastrowych oraz np loga i inne statyczne ilustracje.

ReactComponent z kolei daje nam dostęp do całego szeregu zalet SVG jako normalnego kodu HTML.

Propsy jakie możemy wprowadzić do komponentu SVG to HTMLAttributes<ReactSVGElement>, a więc możemy przypisać mu np. klasę, która będzie wprowadzać fill dla elementu.

Oprócz samego użycia, zaletą jest brak dodatkowych requestów do plików oraz reużywalność elementów. To po prostu kolejny komponent.

Przykładowa kompozycja z użyciem Recompose

import { withProps } from 'recompose';
import { ReactComponent as UserIcon } from './user-icon.svg';

const ActiveUserIcon = withProps({
    style: {
        fill: 'red'
    }
})(UserIcon);

const DisabledUserIcon = withProps({
    style: {
        fill: 'gray',
        cursor: 'not-allowed'
    }
})(UserIcon);

const UserArea = ({ logged }: { logged: boolean }) => (
  <button>{ logged ? <ActiveUserIcon /> : <DisabledUserIcon/> }</button>
);

Linki

  • SVGO – minifikacja i czyszczenie plików SVG
  • SVGOMG – SVGO z GUI w przeglądarce
  • SVGR – Kompilator SVG do komponentów Reactowych
  • SVGR Playground – możliwość zastosowania SVGR w przeglądarce
  • create-react-app – CLI tool do generowania aplikacji Reactowych
  • Recompose – biblioteka do komponowania komponentów