盖茨比 - Boxicon 图标在我实施 SVG 后不显示

Question

我设法实现了 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"/>

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

Answer 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 文件夹。

Gatsby - Boxicon icons are not showing after I implemented SVG