Javascript 带有<；使用>；不使用gastby build

我创建了一些SVG精灵/符号，以便能够使用图标作为组件，并使用

gatsby develope

，它运行良好（img如下）

问题是当我试图用

Gatsby build

SVG图标构建我的Gatsby应用程序时，SVG图标没有显示出来（下面是img）

有人知道我错过了什么吗

我的图标组件：

import { IconTypes } from "./types";
import Icons from "./icons.svg";

interface Props {
  name: IconTypes;
  className?: string;
  width?: number;
  height?: number;
  fill?: string;
}

export const Icon: FC<Props> = ({ name, className, width, height, fill }) => {
  return (
    <svg className={className} width={width} height={height} fill={fill}>
      <use href={`${Icons}#${name}`} />
    </svg>
  );
};

从“/types”导入{IconTypes}；
从“/Icons.svg”导入图标；
界面道具{
名称：IconTypes；
类名？：字符串；
宽度？：数字；
高度？：数字；
填充？：字符串；
}
导出常量图标：FC=（{name，className，width，height，fill}）=>{
返回(
);
};

在盖茨比+React中使用SVG可能很棘手。我建议使用，因为它可以控制所有的回退。在您的

gatsby config.js

中：

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /svg/ 
      }
    }
  }
];

请注意，include规则是一个正则表达式。这意味着

/svg/

文件夹是您所有项目中的文件夹路径（即：如果您的svg位于

/src/assets/svg

中，则插件配置中必须仅包含

/svg/

）

其余配置与您描述的配置类似：

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

// ...

<Icon />;

从“/path/assets/Icon.svg”导入图标；
// ...
;

为此，我将所有内容移动到一个文件中：