vuecli3的svgicon_vue-cli3中使用svg

安装插件

npm install svg-sprite-loader --save-dev

在componemts里新建common文件夹，新建svgIcon.vue

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'

}

},

}

}

.svg-icon {

width: 1em;

height: 1em;

fill: currentColor;

overflow: hidden;

}

新建svg文件夹，用在src下新建icons文件夹，来放svg文件，新建index.js

image.png

import Vue from 'vue'

import SvgIcon from '@/components/svgIcon' // svg组件

// 注册到全局

Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

在vue.config.js添加

const path = require('path')

function resolve(dir) {

return path.join(__dirname, '.', dir)

}

module.exports = {

chainWebpack: config => {

config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,

config.module

.rule('svg-sprite-loader')

.test(/\.svg$/)

.include

.add(resolve('src/icons')) //处理svg目录

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

})

},

}

使用

在main里引入

import './icons'

页面使用

// icon-class：是你的svg的名字

image.png