本文是在vue项目中集成阿里iconfont图标库,本文添加的图标结果案例如下图所示。
具体步骤如下:
1,进入阿里 https://www.iconfont.cn 图标库,登录自己的账号密码,如果没有账号,请先注册账号后登录。
2,在iconfont首页 点击“图标管理”后选择“我的项目”,如下图所示。
3,新建项目,在图标管理中,选择如下图所示的紫色按钮图标,点击后会出现新建项目的弹框,如下面两张图所示。
新建项目图
经过测试,如果前缀是icon,则在使用的时候类似“iconyezi”这种类型,所以在本项目,新建项目时,前缀设置成了“icon-”,使用时就可以“ icon-yezi”这样写,所以在使用项目的时候 这样引用就可以,如下:
<i class="iconfont icon-leibie2 "></i>
<i class="iconfont icon-yezi "></i>
4,添加字体图标到创建的项目中,如下步骤所示。
①在图标库中选择图标
②在图标上,选择图标并点击“添加入库”按钮图标(购物车)
③添加完成后,点击右上角的购物车,如下所示。
5,将图标添加至项目:点击右上角的图标后,会出现如下图所示的界面,点击“添加至项目”后,出现项目列表,选择相应的项目,点击“确定”按钮即可将图标添加到项目中,如下图所示。
6,将项目下载至本地,如下图所示。下载后是个压缩包文件。
7,将下载后的文件添加到vue项目中,解压后的文件如下,可以将demo相关的文件删除。
在项目的src/assets/文件夹下创建icons/iconfont目录(\src\assets\icons\iconfont),
项目中添加的iconfont图标文件
8,在vue文件中使用iconfont图标,步骤如下并如下案例解释,下面是添加图标的案例,其中图中框中是带颜色的图标。
①在vue项目中main.js图标中引入icconfont.css ,如下
import './assets/icons/iconfont/iconfont.css';
②如若要使用彩色的图标,则需要引入iconfont.js文件,如下:
import '../../assets/icons/iconfont/iconfont.js'
iconfont.js的引入地址可在app.vue中引入,本案例是在引入图标的vue中添加的这句话。
③添加 .icon的css样式,代码如下:
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
注意:如果不引用彩色图标,可以不添加 iconfont.js 和.icon样式
④本案例代码如下:
<template>
<div>
引用iconfont的图标
<br>
<br>
<i class="iconfont icon-leibie1" icon-sel></i>
<br>
<i class="iconfont icon-yezi-copy icon-sel"></i>
<br>
<svg class="icon myIcon" aria-hidden="true">
<use xlink:href="#icon-yezi-copy "></use>
</svg>
<br>
<svg class="icon myIcon" aria-hidden="true">
<use xlink:href="#icon-yezi "></use>
</svg>
<br>
<i class="iconfont icon-leibie2 icon-sel"></i>
<br>
<svg class="icon myIcon" aria-hidden="true">
<use xlink:href="#icon-leibie2 "></use>
</svg>
</div>
</template>
<script >
import '../../assets/icons/iconfont/iconfont.js'
export default {
name: "iconTest"
}
</script>
<style scoped>
.icon-sel{
font-size: 30px;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.myIcon{
font-size: 30px;
}
</style>