vue优雅地使用icon|vue优雅地使用icon,包括运行svg文件 vue优雅地使用icon|包括运行sv

【vue优雅地使用icon|vue优雅地使用icon,包括运行svg文件】?? 之前大部分 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 文件中的类名，）

文章图片
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: trueplugins:# - name # # or: # - name: false # - name: true # # or: # - name: #param1: 1 #param2: 2- removeAttrs: attrs: - 'fill' - 'fill-rule'