svg symbol css,Vue项目使用symbol的方式引入svg图标

还在使用图片或雪碧图或iconClass字体图标嘛，都已经过时啦，时代变迁我们应顺势而为。=========同样这篇文章也是来自于群里的群主前端大佬,博主跟着学习,同时分享给大家.有问题就进群来找群主咨询.

先说下图标使用的历史进程(心急使用的可以跳过)

第一代，耳熟能详的就是切片切图下来的图片做图标使用，每当用做active状态或hover之类的时候需要切换图片路径，操作麻烦不说，也比较耗费性能不便于维护，比如就是网页请求次数频繁，就是简单的更换个颜色还要UI重新出图，但是当年又没得其他解决方案；

第二代，其实就是基于第一代基于css的background中偏移来使用一张雪碧图，就是将多个图标合并一个图片，这手法惯用稍微久一些，基本都是UI有多套模板，做哪个项目就直接用哪套，不过依然还是不便于维护；

第三代就是unicode，这个就已经是一个改革了，并且兼容性很好，不过操作上还是要麻烦一点需要自定义图标字体颜色背景色之类的需要自己再声明一个class去修饰，比如我用的阿里的3。

第四代也是字体图标，font-class引用，只不过基于上一代做了一些改变，但是也都需要去声明一个基class 然后再声明一个私有class，比如。

第五代来了(其实也是出了有几年了 -.-)，也是本文的重点，symbol引用 具体优劣如下

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

如何使(食)用

我使用的是阿里图标库，先去阿里图标寻找你需要的图标(一般都是UI给你上传一套，你直接下载下来使用)，具体操作如图：

选择图标加入购物车(这里是开源的，相关条令自行查看，反正就是准中知识产权那些)

然后点击这个

再然后添加你的项目里，没有就创建一个

下载你的库

到这里图标的资源就到手了，下面讲在vue工程里如何优雅的使用

vue工程使用svg图标

把下载到本地iconfont，只需要用到里面的iconfont.js这个文件 main.js

// iconfont字体图标库

import '@/assets/fonts/iconfont/iconfont.js'

复制代码

封装一个IconSvg.vue组件： IconSvg.vue (名字随便起哈)，如图：

代码如下

:class="iconStyle"

aria-hidden="true"

>

export default {

name: 'IconSvg',

props: {

iconClass: {

type: String,

required: true

},

iconStyle: {

type: String,

default: ''

}

},

computed: {

iconName() {

return `#${this.iconClass}`

}

}

}

复制代码

因为每个页面或组件或多或少的会使用一些图标所以我是做的全局组件引入注册，否则就要在每一个使用的组件内都需要引入注册好麻烦的说，所以相关步骤就是 我在components根目录创建index.js做一个导出动作

然后在main.js中做注册

import components from './components'

Object.keys(components).forEach((key) => { Vue.component(key, components[key]) })

复制代码

在使用的组件中使用，注：icon为icon样式，name为icon名字

icon-style="icon"

icon-class="name"

/>

复制代码

style样式

.icon {

width: 2em;

height: 2em;

vertical-align: -0.15em;

fill: #bfcbd9;

overflow: hidden;

}

复制代码

比如这里可以在我的项目里辅助代码，先把选项卡选择在symbol上，然后光标移动到图标上选择复制代码

然后就如图展示出来了