Настройка 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 (); } export default App;- + Edit
Learn Reactsrc/App.js
and save to reload.
Использование без 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-иконки.