Блог

В моем 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" />
  

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