Настройка Svg-Sprite-Loader в проекте Vue Cli

Пытаюсь настроить Svg спрайт в проекте Vue. На данный момент установил пакеты Svg-sprite-loader, Svgo-loader и Vue-cli-plugin-svg-sprite. Пока тестирую реализацию с Svg-sprite-loader.

Выдается ошибка:

Failed to compile.

./src/assets/img-icons/pencil.svg

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):

InvalidSvg: svg-sprite-loader exception.

export default { id: "pencil-usage", viewBox: "0 0 528.899 528.899", url: webpack_public_path + "D:\Dev\admin-panel-mysite\src\assets\img-icons\pencil.svg", toString: function () { return this.url; } }

at Object.loader (D:\Dev\admin-panel-mysite\node_modules\svg-sprite-loader\lib\loader.js:29:11)

Использовал материалы:

https://github.com/JetBrains/svg-sprite-loader

https://cli.vuejs.org/ru/guide/webpack.html — Работа с Webpack (vue.config.js)

Уроки в сети:

https://stackoverflow.com/questions/56168704/how-to-configure-webpack-to-use-a-prebuilt-svg-sprite — здесь в комментариях краткий план Как настроить

https://community.wia.io/d/6-generating-an-svg-sprite-sheet-with-webpack

https://edgardorl.com/blog/creating-svg-sprites-with-webpack-using-svg-sprite-loader/

Вопрос:

Что не так с моей настройкой? Я новичок. Помогите, пожалуйста!

Мои коды:

vue.config.js

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

module.exports = {
  configureWebpack: {
    // Добавить загрузчик для обработки ваших иконок .svg:
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                extract: true,
                spriteFilename: './public/img/icons/icons.svg'  // this is the destination of your sprite sheet
              }
            }
          ]
        }
      ]
    },

    plugins: [
      // Your plugins here... Инициализация плагина
      new SpriteLoaderPlugin({ plainSprite: true })
    ]
  },

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader');
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './assets/img-icons/pencil.svg'  // Импортирую иконку

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#admin')

views / Home.vue

<template lang="pug">
  .home
    img(alt="Vue logo" src="../assets/logo.png")
    hr
    svg.icon
      use(xlink:href="#pencil")
     //- Html:  <svg class="icon"><use xlink:href="#pencil"></use></svg>
    hr
</template>

<script>
export default {
  name: 'Home'
}
</script>