Vue+ElementUI项目中如何使用iconfont图标库
1 简介
图标字体官方网站
iconfont中有多种样式的图标可供我们使用。
SVG 格式是什么？
SVG 是一种图形文件格式。 它的中文全称是Scalable Vector Graphics时间图标elementui，意思是可缩放矢量图形。 它基于XML（可扩展标记语言），由万维网联盟（W3C）联盟开发。 严格来说，它应该是一种开放标准矢量图形语言，允许您设计令人兴奋的高分辨率网页图形页面。 用户可以直接使用代码勾画出图像轮廓，用任何文字处理工具打开SVG图像，通过改变一些代码使图像具有交互性，并且可以随时插入HTML中通过浏览器查看。
2.下载iconfont中的图标 2.1 首先打开iconfont官网
点击图标图标库，选择你需要下载的图标就可以了
2.2 下载SVG格式的图标并保存到购物车中
下载时一定要记得将图标加载到购物车中
肯定有人会奇怪，为什么要把他装进购物车呢？
留个伏笔，稍后给你解释
2.3 点击最左侧的购物车
这是你之前要放入购物车的图标
2.4 下载代码并解压得到
3.打开Vue项目，将下载的图标保存到Vue项目中
用我自己的话说时间图标elementui，我将所有图标放在 /src/asserts/icon/svg/ 中
你可以决定把它放在哪里
3.1 保存下载的iconfont.js
这是上面存储的真正的svg图标
3.2 获取他的图标名称
/**
* 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/）
*
* 使用:
* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)
* 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)
* 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件
* 3. 组件模版中使用 []
*
* 注意:
* 1. 通过2-2 添加icons, getNameList方法无法返回对应数据
*/
import Vue from 'vue'
import IconSvg from '@/components/icon-svg'
import './iconfont'
Vue.component('IconSvg', IconSvg)
const svgFiles = require.context('../assets/icons/svg', true, /.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))
const re = //img/(.*).w+.svg/
export default {
// 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
getNameList() {
return iconList.map(item => {
return item.match(re)[1]
})
}
}
3.3 在main.js中添加
将下载的iconfont.js文件导出到main
import '@/icons/iconfont'
4.前端代码
<el-form-item label="菜单图标" :label-width="formLabelWidth">
<el-popover
v-model="iconListVisible"
ref="iconListPopover"
placement="bottom-start"
trigger="click"
popper-class="mod-menu__icon-popover"
>
<div class="mod-menu__icon-inner">
<div class="mod-menu__icon-list">
<el-button
v-for="(item, index) in iconList"
:key="index"
@click="iconListCurrentChangeHandle(item)"
:class="{ 'is-active': dialogForm.icon === item }"
>
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
</el-button>
</div>
</div>
</el-popover>
<el-input
v-model="dialogForm.icon"
v-popover:iconListPopover
:readonly="true"
placeholder="菜单图标名称"
class="icon-list__input"
></el-input>
</el-form-item>
主要代码是：
<el-button
v-for="(item, index) in iconList"
:key="index"
@click="iconListCurrentChangeHandle(item)"
:class="{ 'is-active': dialogForm.icon === item }"
>
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
</el-button>
<script>
export default {
data() {
return{
iconList: [],
}
},
methods:{
init() {
this.iconList = Icons.getNameList();
},
},
mounted() {
this.init();
},
}
</script>
款式代码：
.icon-svg {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
5. 显示
