Реагировать, импортировать и использовать спрайт SVG в компоненте React
Я новичок в SVG, я нашел классный веб-сайт под названием icomoon.io, я выбрал и загрузил несколько значков SVG, скопировал файл sprite.svg вместе с папкой SVG в папку /src в моем приложении. Теперь я немного запутался в том, что следует ли импортировать, чтобы использовать желаемые значки, это sprite.svg, тогда я указываю значок, например, import i_chat from '../sprite.svg#chat', или вместо этого импортирую каждый значок отдельно из папки SVG, и есть ли внешний пакет, который мне нужно установить для использования <svg> и <use> элементы в моем приложении? вариант использования будет оценен. Благодарность
Ответы 1
Если вам не нужно никакого взаимодействия с элементами SVG (анимация, переходы и т. д.), Вы можете работать с svg, как с любым другим изображением. Есть несколько загрузчиков svg для webpack:
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>
);
}
Надеюсь, это поможет
если вы используете svg непосредственно в принимаемой разметке реакции. однако, если вы пытаетесь импортировать его, как значок импорта из './icon.svg', вам необходимо добавить собственный обработчик файла svg в конфигурацию вашего веб-пакета.