第一种：直接使用SVG文件地址
1.创建组件 /components/Svg.vue
<template>
<img :src="iconSrc" class="svg-icon" />
</template>
<style>
.svg-icon {
width: 1.5em;
height: 1.5em;
}
</style>
<script>
export default {
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconSrc(){
return require('@/icons/svg/'+this.iconClass+'.svg')
}
}
}
</script>
2.全局注册组建 /main.js
...
import Svg from "@/components/Svg.vue"
Vue.component('v-icon', Svg)
3.应用 /view/Test.vue
<template>
<div>
<v-icon iconClass="setting"/>
</div>
</template>
4.运行结果
<div id="app">
<img src="/img/setting.82b9c7a5.svg" class="svg-icon" />
</div>
- 优点：简单，按需请求
- 缺点：请求增加，无法改变图标颜色
第二种：使用svg-sprite-loader，按需加载
1.在vue项目中安装 svg-sprite-loader
D:Vue\project>npm install svg-sprite-loader --save-dev
2.修改根目录配置文件 vue.config.js ,没有就手动创建，修改配置记得要重新 npm run serve 一下
const path = require('path')
function resolve (dir) {
return path.join(__dirname, './', dir)
}
module.exports = {
chainWebpack(config) {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
3.创建组件 components/Svg.vue，22行的前缀要与配置一致
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<style>
.svg-icon {
width: 1.5em;
height: 1.5em;
}
</style>
<script>
export default {
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
4.新建 /src/icons 和 /src/icons/svg 目录，把.svg文件都放到 /src/icons/svg 目录里
5.新建 /src/icons/index.js 文件并编辑
import Vue from 'vue'
import Svg from '@/components/Svg'
Vue.component('v-icon', Svg)
6.全局引入Icons，main.js
...
import Icon from './icons'
new Vue({
...
Icon,
...
})
7.应用 /view/Test.vue
<template>
<v-icon iconClass="setting"/>
</template>
<script>
import '@/icons/svg/setting.svg'
</script>
8.运行结果：在<body>下面会增加一个<svg>节点，里面会预加载你import的SVG，一个symbol为一组，并用id="xxx"进行标识，这个icon-前缀是之前 vue.config.js 所配置的，可以自己修改。配合下面的 <use xlink:href="#xxx"></use> 进行显示
...
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" aria-hidden="true" id="__SVG_SPRITE_NODE__">
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="icon-setting">
<svg>...</svg>
</symbol>
</svg>
...
<div id="app">
<svg aria-hidden="true" class="svg-icon"><use xlink:href="#icon-setting"></use></svg>
</div>
...
- 优点：无请求，页面顶部会预加载已经import的.svg的DOM，可以进行CSS样式修改。
- 缺点：每次使用都要import对应的.svg文件
第三种：使用svg-sprite-loader，指定目录下svg文件全部自动加载
1.上面我们创建 icons/svg 目录就是为了这个目的，只需要在之前的 /icons/index.js 文件加上3句代码，就可以实现 icons/svg 目录下全部.svg自动加载
...
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
2.应用中无需import，直接可以用 /view/Test.vue
<template>
<v-icon iconClass="setting"/>
</template>
<script>
</script>
3.运行结果：页面中会把 icons/svg 目录下的所有svg都预加载出来，一个symbol为一组
...
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" aria-hidden="true" id="__SVG_SPRITE_NODE__">
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="icon-setting">...</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="icon-home">...</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="icon-test">...</symbol>
...
</svg>
...
<div id="app">
<svg aria-hidden="true" class="svg-icon"><use xlink:href="#icon-setting"></use></svg>
</div>
...
- 优点：无请求，会将指定目录中所有.svg文件dom加载到页面顶部
- 缺点：非按需加载，如果上百个SVG都加载会不会开销很大？
