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

【问题标题】：React, importing and using SVG sprite in a React component在 React 组件中反应、导入和使用 SVG 精灵
【发布时间】：2019-04-24 22:17:25
【问题描述】：

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

【问题讨论】：

如果您在它接受的反应标记中直接使用 svg。但是，如果您尝试像 import icon from './icon.svg' 一样导入它，那么您需要在 webpack 配置中添加自定义 svg 文件处理程序

标签： reactjs svg

【解决方案1】：

如果您不需要与 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>
  );
}

希望对你有帮助

【讨论】：