Настройка SVG в React

Я попробовал несколько способов отображения SVG-изображений в React и хочу поделиться своим выбором.

Варианты встраивания SVG-иконок

  • тег img: <img src=»someSvg» alt=»some text» />
  • Копирование/вставка тега svg в JSX: <svg>…</svg>
  • Импорт SVG как компонента React

Преимущества использования SVG в качестве компонента React

Почему я решил использовать SVG в качестве компонента React?

  • Нет необходимости устанавливать коллекции иконок;
  • Я могу выполнять настройку через аттрибуты: ширина, высота, заливка, обводка и т.д.;
  • Я могу определить другие стили с помощью CSS через аттрибут className;
  • Нет необходимости копировать/вставлять SVG-файл;

Использование с Create React App

Если вы используете CRA, вы можете импортировать SVG-файлы и сразу же использовать их в качестве компонентов React.

App.js

- import logo from "./logo.svg";
+ import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";

function App() {
  return (
    
- logo +

Edit src/App.js and save to reload.

Learn React
); } export default App;
Alt Text

Использование без Create React App

1 — Установите загрузчик Webpack под названием @svgr/webpack

yarn add --dev @svgr/webpack

2 — Обновите ваш конфиг webpack.config.js

...
  module: {
    rules: [
      ...
      // SVG loader
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              titleProp: true,
            },
          },
          'file-loader',
        ],
      },
    ],
  },
  ...

ПРИМЕЧАНИЕ: Я использую его в сочетании с file-loader, на случай, если мне нужно нормально импортировать SVG-файлы.

3 — Импорт SVG-файлов в качестве компонента React

import { ReactComponent as SomeImage } from 'path/to/image.svg'

...


Преобразование SVG в компоненты React — SVGR
Загрузчик файлов — file-loader
Фотография обложки — Harpal Singh на Unsplash

Заключение
Подводя итог, можно сказать, что использование SVG в качестве компонента React позволяет легко и быстро настраивать SVG-иконки.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии