Vue & Webpack - выборочный импорт svg-Icons?

Question

Он милые люди! Я пытаюсь упростить использование svg-icons в моем проекте. Я скачал хороший пакет значков в свою папку ресурсов и создал небольшой компонент для их рендеринга:

// SvgIcon.vue
<template>
  <div class="icon fill-current full-stroke" v-html="html(name)"></div>
</template>

<script>
export default {
  props: ['name', 'solid'],
  methods: {
    html(name) {
      let html;
      if (this.solid) {
        // eslint-disable-next-line
        html = require(`../assets/icons/solid-sm/sm-${name}.svg`);
      } else {
        // eslint-disable-next-line
        html = require(`../assets/icons/outline-md/md-${name}.svg`);
      }
      return html;
    },
  },
};
</script>
// credits go to: https://gist.github.com/mtobeiyf/f13798f98093b94b937e1bc92535ff05

Я также добавил загрузчик в конфигурацию веб-пакета:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    config.module
      .rule('svg')
      .test(/\.svg$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
  }
}

Хотя это хорошо работает, в сборочный комплект входят ВСЕ svg-файлы, а не только используемые. Есть ли способ включить только реально используемые значки?