Vue 使用svg

1 src下建文件夹

 

 index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const res = requireAll(req)
console.log('svg',res)

2 components下建文件

 

 

 index.vue

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<template>   <svg :class="svgClass" aria-hidden="true">     <use :xlink:href="iconName" />   </svg> </template>   <script> export default {   name: "SvgIcon",   props: {     iconClass: {       type: String,       required: true,     },     className: {       type: String,       default: "",     },   },   computed: {     iconName() {       return `#icon-${this.iconClass}`;     },     svgClass() {       if (this.className) {         return "svg-icon " + this.className;       } else {         return "svg-icon";       }     }   } }; </script>   <style scoped> .svg-icon {   width: 1em;   height: 1em;   vertical-align: -0.15em;   fill: currentColor;   overflow: hidden; } </style>

　　3 main.js引用

import '@/icons' // icon

　　4 重启项目（！！！），没重启就没给生效，很坑。

　　注意事项：

　　1步骤打印的数据 应该是对象 而不是['img/xx','img/xx']