使用 React.JS 导入 SVG 的最佳方法是什么

Question

我和我的团队正在构建一个 React 应用程序，我们希望导入 SVG，而不是作为字符串，这样我们就能够将其用作组件。

由于我们使用 CRA 安装了该项目，因此 SVGR 已安装并处于 webpack 配置中。

我们想知道是否有其他方法可以导入 SVG 文件而不是import {ReactComponent as Logo} from '../path'使用import Logo from '../path'.

这样使用它有什么好处吗？实际上，我们可以按照我们想要的方式导入它，但我们不能在图像标签之外使用它。

谢谢。

Answer 1

您可以创建您的自定义组件，例如

const ArrowIcon = (props)=>{
  return (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
)
}

警告： 小心 SVG 的 Props。因为在 React 中，SVG 属性可能与 HTML 中的 SVG 不同！

您可以通过以下方式使用它

import ArrowIcon from "path/to/svgComponent"

const SimpleReact = ()=>{
  return (
    <div>
      Arrow Icon
      <ArrowIcon className="class" />
    </div>
  )
}

我希望它能正常工作;-)

您还可以尝试SVGR使用 React 和 SVG 来使用哪个很棒的库。您可以使用以下命令下载它：

yarn add -D @svgr/cli

通过将 file 指定为单个参数来转换单个文件。

npx @svgr/cli -- icons/clock-icon.svg

您可以在此处的官方文档链接中找到更多信息