Question

在我的gatsby-browser.js文件中，我有两个类似于以下内容的导入文件：

@import npm-package/lib/icons.svg
@import npm-package/lib/icons-rich.svg

我当前的gatsby-node.js文件如下

const path = require('path')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig()

  config.resolve.alias = {
    ...config.resolve.alias,
     /// aliases working fine
  }

  config.module.rules = [
    ...config.module.rules,
    {
      test: /(icons|icons-rich).svg$/,
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
        publicPath: './'
      },
    },
  ],

    config.plugins = [
      ...config.plugins,
      new SpriteLoaderPlugin()
    ]

  actions.replaceWebpackConfig(config)
}

运行gatsby develop时，出现以下错误：

Module Warning (from ./node_modules/svg-sprite-loader/lib/loader.js):
svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode

并且永远不会输出文件。

当我运行gatsby build时，我得到一个sprite.svg文件输出到public目录中，但是看起来svg sprite并没有添加到html文档主体中。

1）如何获取gatsby develop命令来处理svg并将其输出到正确的目录

2）我怀疑gatsby build的问题与我尝试包含在html文档中的svg文件有关，该文件位于我的Layout.jsx文件中，看起来像

<Icon icon="all" iconPath="./public/sprite.svg" />

我可能会因为某种原因而缺少./public/sprite.svg，但我无法弄清楚正确的文件路径是什么（显然尝试了所有正确的东西除外）。

如何使用GatsbyJS生成SVG精灵

0 个答案: