在我实现SVG之后，Gatsby - not图标没有显示。

Question

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

如果我在我的SVG文件夹中添加更多的svg，这是可以的，但是Box图标库中的所有图标都消失了。

我想使用图标库和我的自定义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'

当然，如果没有将以前的SVG作为组件使用，则可以将它们从Box图标中删除。

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

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

/svgComponents将只包含自定义SVG组件。然后，您可以将/svg文件夹留给您的you图标SVGs。