Gatsby - 在我实现 SVG 后，Boxicon 图标没有显示

【问题标题】：Gatsby - Boxicon icons are not showing after I implemented SVGGatsby - 在我实现 SVG 后，Boxicon 图标没有显示
【发布时间】：2021-07-20 14:24:26
【问题描述】：

我设法实现了 gatsby-plugin-react-svg 并使其工作，但之后我看到所有库图标都再见了。

如果我在我的 svg 文件夹中添加更多 SVG 没关系，但是 Boxicon 库 中的所有图标都不见了。

我想使用图标库和我的自定义 svg。

这就是我的 gatsby-config.js 文件的样子

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

在 JSX 中我使用这样的图标：

 <i className="bx bxs-user-circle"/>

但是现在给我看一个小方块

【问题讨论】：

标签： svg gatsby

【解决方案1】：

正在发生的事情是该插件正在为 /svg 文件夹中的所有内容创建 React 组件，因此它们可以按原样使用：

import SomeSvg from '../svg/someSvg.svg'

当然，如果不将 Boxicon 用作组件，它可以破坏之前的 SVG。

最简单的解决方案是为您将用作 React 组件的自定义 SVG 组件创建一个单独的文件夹，并为使用 SVG 源的图像创建另一个文件夹。

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

/svgComponents 将仅包含自定义 SVG 组件。然后，您可以为 Boxicon SVG 保留 /svg 文件夹。

【讨论】：

像魅力一样工作。谢谢！