将 SVG 作为 Gatsby 中的组件导入

我见过以下解决方案：

import { ReactComponent as Img } from 'path/to/file.svg'

但在盖茨比看来，这行不通。我知道存在这方面的插件，但也许可以更容易地完成。

正如您所说，有一些插件可以实现此目的，这意味着更干净的代码（而不是组件中内联的完整 SVG 标签）具有相同的最终结果。使用gatsby-plugin-react-svg https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/插件你只需要像这样导入你的SVG：

import Icon from "./path/assets/icon.svg";

安装时只需要使用添加依赖即可npm or yarn并在你的gatsby-config.js使用这个片段：

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /assets/
    }
  }
}

注意/assets/是基于正则表达式的包含规则，因此该值必须是您的 SVG 文件夹（即：/svg/) and 必须仅包含.svg files。换句话说，如果你的路径是/images/svg/您的包含规则只能包含/svg/（您也可以添加完整路径，但需要转义斜杠）。

之后，如果 SVG 的内联样式不适用，您将需要设置 SVG 的样式。

如果您想采用非插件方法，您可以简单地使用基于 React 的方法，只需创建一个返回 SVG 的组件即可：

export const YourSvgComponent = () => (
  <svg
    version="1.1"
    baseProfile="full"
    width="300"
    height="200"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">
      SVG
    </text>
  </svg>
);

现在您只需导入并使用它即可。