Реагировать, импортировать и использовать SVG-спрайт в компоненте React

Question

Я новичок в SVG, я нашел крутой сайт под названием icomoon.io , я выбрал и загрузил несколько иконок SVG, скопировал файл sprite.svg вместе с папкой SVG в /srcпапка в моем приложении. Теперь я немного запутался в том, что мне следует импортировать, чтобы использовать нужные значки. Это sprite.svg, тогда я указываю значок примерно так import i_chat from '../sprite.svg#chat' или вместо этого импортирую каждый значок отдельно из папки SVG, иЕсть ли внешний пакет, который мне нужно установить, чтобы использовать элементы <svg> и <use> в моем приложении?будет полезен вариант использования.спасибо

Answer 1

Если вам не нужны взаимодействия с элементами SVG (анимация, переходы и т. Д.), Вы можете работать с svg, как и с любым другим изображением.Существует несколько загрузчиков svg для веб-пакетов:

https://github.com/jhamlet/svg-react-loader
https://github.com/boopathi/react-svg-loader

Версия React 15 или выше также поддерживает svg.
Например:

render() {
  return (
    <svg>
      <circle cx="1" cy="2" />
    <svg>
  );
}

Надеюсь, это поможет