之前说过icon-fonts解决方案可以一次性加载纯色图标，并且相对于精灵图更小更灵活；那渐变色或者组合颜色的图标怎么办呢，答案之一就是svg
- svg是矢量图像，可以无限缩放，而且图像质量不会下降
- svg图像比 jpg 或 png 图像更灵活，我们可以使用 CSS 和 JavaScript 与它们进行交互，比如在css中用fill属性控制svg颜色
- svg基本上可以放心使用，除非你要用在IE8或老版本安卓机中；推荐一个兼容性查询网站
svg兼容性.png - SVG Sprite技术，这里所说的Sprite技术就是类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。
实际上就是把所有的当前页面用到的svg使用symbol标签都放在一个svg中加载到body顶部，使用的时候再用use标签的xlink:href="#xxx"根据symbol的id调用
安装依赖
读取svg信息，去除svg中的无用标签，精简结构
npm install svgo svgo-loader --save-devSVG Sprite插件
npm install svg-sprite-loader --save-dev
配置webpack
webpack.base.conf.js(webpack的基础配置文件，也可能是别的名)找到rules那个数组，配置完重启一下服务
rules: [
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/assets/icons')], // 去除你存放svg的那个文件夹，改用svgo-loader处理
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.svg$/,
use: [
{loader: 'svg-sprite-loader', options: {}},
{loader: 'svgo-loader', options: {
plugins: [
// 还有很多配置，具体可以查看https://github.com/svg/svgo
{ removeViewBox: false },
{ removeXMLNS: true }
]
}
}
],
include: [resolve('src/assets/icons')] // 把上面去掉的文件夹include进来
}
]
写个vue组件
写完注册一下
<template>
<svg class="gf-icon" version="1.1" :width="currentSize.width" :height="currentSize.height" :viewBox="box">
<use :xlink:href="icon.id" />
</svg>
</template>
<script>
export default {
name: 'svgIcon',
props: {
name: {
type: String,
required: true
},
size: {
type: [Number, String],
default: 10
},
height: {
type: [Number, String],
default: null
},
width: {
type: [Number, String],
default: null
}
},
data () {
return {
xml: null
}
},
async created () {
if (!this.name) {
return
}
this.xml = await import(/* webpackMode: 'lazy-once', webpackChunkName: 'icon-svg' */ '@/assets/icons/' + this.name + '.svg')
},
computed: {
baseSize () {
let size = this.size
size = Number(size)
if (isNaN(size) || size <= 0) {
return 10
}
return size
},
icon () {
if (!this.xml) {
return {
width: 0,
height: 0,
id: ''
}
}
let viewBox = this.xml.default.viewBox.split(' ')
return {
width: viewBox[2] || 0,
height: viewBox[3] || 0,
id: '#' + this.xml.default.id
}
},
box () {
return `0 0 ${this.icon.width} ${this.icon.height}`
},
scale () {
if (this.icon.height) {
return this.icon.width / this.icon.height
}
return 1
},
currentSize () {
let height = this.height
let width = this.width
// 不传递 width 与 height，就当做正方形处理，size 字段生效
// 否则就按比例处理
if (height === null && width === null) {
return {
width: 1 * this.baseSize,
height: 1 * this.baseSize
}
// 指定了宽度，按宽度比例计算
} else if (width !== null) {
width = Number(width)
if (isNaN(width) || width <= 0) {
width = 1 * this.baseSize()
}
return {
width: width,
height: width / this.scale
}
// 指定了高度，按高度比例计算
} else {
height = Number(height)
if (isNaN(height) || height <= 0) {
height = 1 * this.baseSize
}
return {
width: height * this.scale,
height: height
}
}
}
},
watch: {
async name (val) {
if (!val) {
return
}
this.xml = await import(/* webpackMode: 'lazy-once', webpackChunkName: 'icon-svg' */ '@/assets/icons/' + this.name + '.svg')
}
}
}
</script>
<style>
.gf-icon {
display: inline-block;
fill: currentColor;
}
</style>
使用
先存个svg到src/assets/icons这个文件夹，比如叫star.svg，然后就可以在任意文件使用刚才写的组件辣。
<svg-icon name="star" size="20"></svg-icon>
