vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg

注意：

如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)

还有就是可能是创建的icons不在src根目录（2.x最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，3.0正常，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样）

一、安装svg加载插件： npm i svg-sprite-loader -D

二、定义svg组件

<template>
    <svg aria-hidden="true">
      <use :xlink:href="iconName"/>
    </svg>
</template>

<script>
export default {
  name: 'icon',
  props: {
    name: {
      type: String,
      default: 'home'
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.name}`
    }
  }
}
</script>

<style scoped>
  svg {
      fill: currentColor;
      overflow: hidden;
  }
</style>

默认属性设置可以根据自己需要设定。

三、在src根目录创建装svg的文件夹并创建index.js文件

文件结构

index.js内容

import Vue from 'vue'
import Icon from '@/components/icon'

Vue.component('icon', Icon)
//定义的一个遍历函数后面会调用
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)/* require.context是node的文件加载函数第一个参数是指定的文件路径，
‘./’这个是当前文件路径第二个参数一般默认false就可以了大多数都用不到，
第三个参数是正则匹配你要加载的文件类型 */
requireAll(req)

这个文件没有什么需要处理的基本都是这样写，如果对requireContext不是很理解可以google一下这个requireContext()就知道了。

四、main.js中全局引用组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './common/common.scss'
import '@/icons'//引入svg文件
import icon from './components/Icon.vue'//引入写好的组件

Vue.config.productionTip = false

Vue.component('icon', icon)//全局调用

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

五、webkit.base.conf.js规则修改：

添加这部分规则：

      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      }

修改规则：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

完成，现在可以全局调用：

<icon name="liked"></icon>

Vue3.0+ts配置（不用ts的话就和2.x相同只是规则写法有点不同，可以直接参考规则写法）

vue3.0+ts无法使用Vue.component()，所以index.ts文件内容有点不同这里直接上代码

3.0 版本是可以将svg图片放到assets里面到

然后是main.ts中全局注册

还有基本配置，3.0是链式配置，并且需要先清楚掉默认到svg规则，不清除是不生效的，（还有是写在vue.config.js的，自己建的文件）

chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .test(/\.svg$/)
            .include.add(resolve('./src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .tap(options => {
                options = {
                    symbolId: 'icon-[name]'
                }
                return options
            })
    }

其它基本是和2.x相同的
（还有resolve这个别忘记定义）

function resolve(dir) {
    return path.join(__dirname, dir)
}