关于vue-cli4 使用 svg-sprite-loader

vue-cli4 使用 svg-sprite-loader

不得不说一句，网上的文章大多有点坑，很多都是相互复制，我被别人坑了。废话少说，文章具有时效性，这里只是针对我遇到的情况，我使用的vue-cli使用的版本是4.5.11。（提示我这边使用的是Vue2的用法，关于Vue3的话，在最下方提供参考。。。）

vue.config.js

module.exports = {
    lintOnSave: false,
    chainWebpack(config) {
        const svgRule = config.module.rule('svg');

        svgRule.uses.clear();

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

这里贴出官方的做法 添加链接描述
因为vue-cli4 对svg有默认的loader,所以我们这边应该对已有loader替换。还好我看官方文档，刚好举svg的做法，否则。。。。惨啊，这帮互相抄文章的，也不知道验证一下，坑爹。无fuck说。

其他的做法依旧，组件用法

<template>
  <svg
    :class="getClassName"
    :width="width"
    :height="height"
    aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon-svg',
    props: {
      name: {
        type: String,
        required: true
      },
      className: {
        type: String
      },
      width: {
        type: String
      },
      height: {
        type: String
      }
    },
    computed: {
      getName () {
        return `#icon-${this.name}`
      },
      getClassName () {
        return [
          'icon-svg',
          `icon-svg__${this.name}`,
          this.className && /\S/.test(this.className) ? `${this.className}` : ''
        ]
      }
    }
  }
</script>

<style>
  .icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

icons文件夹下index.js

import Vue from 'vue'
import IconSvg from '@/components/icon-svg'
import './iconfont.js'

Vue.component('IconSvg', IconSvg)

const svgFiles = require.context('./svg', true, /\.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))

然后在 main.js下引入这个文件：

import '@/icons'    

使用的话：

<icon-svg name="zhedie"></icon-svg>

新增 Vue3 的用法。仅供参考。这个是凭借我的理解，效果的话也是实现的了。Vue3还没有系统的学。。版本也是一样的。按照我的理解，就是注册组件的方式换了Vue.component 换成 app.component。等我学了 Vue3 再回来看这个问题吧。 上面的 index.js 不用了，换成了在这 main.js 的注册。
npm 安装都是一样
vue.config.js 配置如下：

module.exports = {
  lintOnSave: false,
  chainWebpack (config) {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule.use('svg-sprite-loader')
      .loader('svg-sprite-loader')
  },
  productionSourceMap: false
}

在 main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import '@/icons'
import IconSvg from '@/components/icon-svg'

export const app = createApp(App)
app.component(
  'IconSvg',
  IconSvg
)
app.use(store).use(router).mount('#app')