时间戳

首页 > 解决方案 > 在 React 组件中反应、导入和使用 SVG 精灵

reactjs - 在 React 组件中反应、导入和使用 SVG 精灵

问题描述

我是 SVG 新手，我找到了一个很酷的网站icomoon.io，我选择并下载了一些 SVG 图标，将 sprite.svg 文件与 SVG 文件夹一起复制到/src我的应用程序的文件夹中，现在我有点困惑我应该导入什么来使用所需的图标，是 sprite.svg 然后我像这样指定图标import i_chat from '../sprite.svg#chat'还是从 SVG 文件夹中单独导入每个图标，是否需要安装一个外部包才能使用<svg>和<use>元素我的应用程序？一个用例将不胜感激。谢谢

标签： reactjssvg

解决方案

如果您不需要与 SVG 元素（动画、过渡等）进行任何交互，则可以像处理任何其他图像一样处理 svg。webpack 的 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>
  );
}

希望，这有帮助

推荐阅读