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。对于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>
  );
}

希望如此，

在React组件中进行React，导入和使用SVG Sprite

1 个答案: