Gatsby配置gatsby-plugin-react-svg后Boxicon图标无法显示如何解决

你当前配置的gatsby-plugin-react-svg插件的include规则为/svg/，会匹配所有文件路径中包含svg字符的资源。Boxicon图标库的相关静态资源（字体文件、内置svg资源）的路径刚好包含svg字段，会被该插件错误拦截处理，破坏了Boxicon原有的字体图标渲染逻辑，因此最终仅显示未加载成功的占位小方块。

• 调整插件匹配规则，将include从全局模糊匹配改为精准匹配你存放自定义SVG的本地目录即可。假设你的自定义SVG都存放在项目的/src/assets/svg/目录下，修改gatsby-config.js配置如下：

const path = require('path')

module.exports = {
  plugins: [
    // 其他插件配置...
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          // 精准匹配自定义SVG所在的目录，避免误处理第三方图标库资源
          include: path.resolve(__dirname, "src/assets/svg/"),
        }
      }
    },
  ]
}

• 修改配置后重启Gatsby开发服务，清除浏览器缓存后再次验证即可。此时本地自定义SVG和Boxicon图标可以同时正常加载。

内容的提问来源于stack exchange，提问作者Eduard