Vue使用SVG图标

title

【转载】,纯转载,单纯做个收藏记录,原文地址

添加依赖

1
npm i svg-sprite-loader -D

配置vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path')

chainWebpack: config => {
// 原svg规则覆盖了所有的svg图标,需要先将自己的svg排除,以应用新的sprite规则
// src/assets/icons是我们将要存放svg的目录
config.module
.rule('svg')
.exclude.add(path.join(__dirname, 'src/assets/icons')) // 排除自定义svg目录
.end()
config.module
.rule('icons') // 新规则
.test(/\.svg$/)
.include.add(path.join(__dirname, 'src/assets/icons')) // 新规则应用于我们存放svg的目录
.end()
.use('svg-sprite-loader') // 用sprite-loader接卸
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}

创建组件

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
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
</template>

<script>
export default {
name: 'SvgIcon',
props: {
name: { // svg文件名称
type: String,
required: true
}
}
}
</script>

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

全局引入

1
2
3
4
5
6
7
8
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// 1. 全局注册SvgIcon组件
Vue.component('svg-icon', SvgIcon)
// 2. 载入所有svg icon
const requireContext = require.context('./assets/icons', false, /\.svg$/)
requireContext.keys().forEach(requireContext)

添加SVG文件

使用

1
<svg-icon name="book" /> <!-- name就是svg图标文件的名称 -->