Как генерировать SVG-спрайты с GatsbyJS

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 добавляется в тело документа html.

1) Как получить команду gatsby develop для обработки и вывода svg в правильный каталог

2) Я подозреваю, что проблема с gatsby build связана с файлом SVG, который я пытаюсь включить в HTML-документ, который находится в моем файле Layout.jsx и выглядит как

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

Iпредположил бы, что ./public/sprite.svg по какой-то причине отсутствует, но я не могу понять, какой путь к файлу правильный (очевидно, пробовал все, кроме правильных вещей).