一、首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中
二、阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式)
进入项目以后会看到阿里云可以选择三种方式进行导入图标,选中图标后点击下载至本地。
下载到本地,解压以后的文件夹列表如下:
选中iconfont.js文件
在项目中创建如下目录及文件
iconfont.js就是上上面目录中复制的文件
两种引用方法
第一种通过.svg文件方法引入
index.js内容如下
/*** 字体图标, 统一使用SVG Sprite矢量图标(/)** 使用:* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)* 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)* 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件* 3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]** 注意:* 1. 通过2-2 添加icons, getNameList方法无法返回对应数据*/import Vue from 'vue'import IconSvg from '@/components/icon-svg'import './iconfont.js'ponent('IconSvg', IconSvg)const svgFiles = require.context('./svg', true, /\.svg$/)const iconList = svgFiles.keys().map(item => svgFiles(item))export default {// 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]getNameList () {return iconList.map(item => item.default.id.split('-')[1])}}
第二种方法是通过iconfont.js文件引入,index.js文件如下
/*** 字体图标, 统一使用SVG Sprite矢量图标(/)** 使用:* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)* 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)* 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件* 3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]** 注意:* 1. 通过2-2 添加icons, getNameList方法无法返回对应数据*/import Vue from 'vue'import IconSvg from '@/components/icon-svg'import './iconfont.js'ponent('IconSvg', IconSvg)
iconfont.js文件就是上面的iconfont.js文件,
两种也可同时使用
import IconSvg from '@/components/icon-svg’是引入的图标的封装组件
<template><svg:class="getClassName":width="width":height="height"aria-hidden="true"><use :xlink:href="getName"></use></svg></template><script>export default {name: 'icon-svg',props: {name: {type: String,required: true},className: {type: String},width: {type: String},height: {type: String}},computed: {getName () {return `#icon-${this.name}`},getClassName () {return ['icon-svg',`icon-svg__${this.name}`,this.className && /\S/.test(this.className) ? `${this.className}` : '']}}}</script><style>.icon-svg {width: 1em;height: 1em;fill: currentColor;overflow: hidden;}</style>
最后在main.js中引用就行了
import "./icons" // api: /
引用方法:
<icon-svg name="zhedie"></icon-svg><icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
好了,到这里就完了!!!