之前大部分 icon 是png图片，当有两种状态时就需要两种图片的替换，占用的体积也是比较大的，后来接触到了阿里iconfont，简直不能太好用，接下来就带你领略 vue 的美好！
1. 使用阿里iconfont
- iconfont 官网上选择自己想要的图标，如果没有想要的图标，就让ui在 adobe illustrator（简称 AI）软件上绘制想要的图标，绘制前先下载 图标制作模板.AI，绘制完成后一定要存储为 svg，不要使用导出为 svg，然后在上传到 iconfont 官网 上就可以了。 参考
AI软件
上传后的图标
- 将图标添加到购物车，点击购物车，添加至项目（方便日后项目管理），在项目目录下，点击下载至本地，就拿到字体文件了。
项目目录
- 在 src/assets 目录下创建一个 fonts 文件夹，将解压后的 iconfont.eot、 iconfont.svg、 iconfont.ttf、 iconfont.woff 这 4 个文件放进去。
下载并解压后的字体文件
fonts 文件夹
- 将解压后的 iconfont.css 文件放到 src/assets 目录下，并修改里面的字文件路径，主要在 url 的位置新增 ./fonts/ 。
修改后的 iconfont.css 文件
- 在 main.js 中引入 iconfont.css，加入以下代码：
import '@/assets/iconfont.css'
- 在要引入图标的 .vue 文件中的相应位置写以下的代码：（注意：
icon-eye是在iconfont.css文件中的类名，）
<i class="iconfont icon-eye" ></i>
HelloWorld.vue
效果图
2. vue项目运行 svg 文件，与上文无联系，要说有点联系的话最多也就是如何让 ui给你想要的svg 文件的做法和上文的相同
- 安装
svg-sprite-loader插件，运行以下命令：
npm i svg-sprite-loader -D
- 修改 webpack 的配置文件，在
webpack.base.conf.js中修改如下代码：
image.png
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
- 在 src 目录新建一个 icons 文件夹，里面放三个内容：1)、 存放 .svg 文件的 svg文件夹 ； 2)、 全局注册组件的 index.js 文件 ；3)、svgo.yml 文件。
// index.js 文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
- svgo.yml 文件：
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
# param1: 1
# param2: 2
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule'
- 注册 Svgicon 组件。 在 components 文件夹下新建 SvgIcon 文件夹，里面放置 index.vue 文件， 代码如下：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
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'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- main.js 中引入全局注册组件的 index.js 文件，main.js中要加的代码如下：
import '@/icons' // 全局注册组件
- 需要使用图标的地方（.vue 文件）使用以下代码：
<svg-icon icon-class="icon_set"/>
项目目录
