1.从阿里图库添加需要使用的图标，
2.下载图里图库源码
3.把下载的图里图库源码引入至项目中
iconfont.js或者iconfont.css
import '@/assets/public/iconfont.js'
4.编写图标json文件
{
"id": "1892433",
"name": "xiaozhou",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"glyphs": [{
"icon_id": "1",
"name": "付款",
"font_class": "fukuan"
},
{
"icon_id": "2",
"name": "外出",
"font_class": "waichu"
},
{
"icon_id": "3",
"name": "销售费用",
"font_class": "xiaoshoufeiyong"
},
{
"icon_id": "4",
"name": "请假",
"font_class": "qingjia"
}
]
}
5.引入图库json文件（引入地址自行修改）
import iconData from '@/assets/public/iconfont.json'
6.动态生成图标（postForm表单数据集合字段自行修改）
<el-popover placement="right" width="500" ref="popoverModule" trigger="click" content="">
<el-input slot="reference"
:class="postForm.iconName ? `iconfont icon-${postForm.iconName} custom-icon-input` : ''"
v-model="postForm.iconName"></el-input>
<el-row class="selectIcon-box">
<el-col :class="{'active': postForm.iconName === item.font_class}" :span="3"
v-for="(item,index) in iconData.glyphs" :key="index">
<svg class="icon" aria-hidden="true" @click="handleChangeTempIcon(item)">
<use :xlink:href="`#${iconData.css_prefix_text}${item.font_class}`"></use>
</svg>
</el-col>
</el-row>
</el-popover>
样式
.selectIcon-box {
text-align: center;
border: 1px solid #eeeeee;
border-right: 0;
border-bottom: 0;
.el-col {
padding: 10px 0;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
&.active {
.iconfont {
color: #409EFF;
}
}
}
.icon {
width: 30px;
height: 30px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
cursor: pointer;
}
}
