1.從阿里圖庫(kù)添加需要使用的圖標(biāo)，
2.下載圖里圖庫(kù)源碼
3.把下載的圖里圖庫(kù)源碼引入至項(xiàng)目中
iconfont.js或者iconfont.css
import '@/assets/public/iconfont.js'
4.編寫圖標(biāo)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": "銷售費(fèi)用",
? ? ? "font_class": "xiaoshoufeiyong"
? ? },
? ? {
? ? ? "icon_id": "4",
? ? ? "name": "請(qǐng)假",
? ? ? "font_class": "qingjia"
? ? }
]
}
5.引入圖庫(kù)json文件（引入地址自行修改）
import iconData from '@/assets/public/iconfont.json'
6.動(dòng)態(tài)生成圖標(biāo)（postForm表單數(shù)據(jù)集合字段自行修改）
<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;
? ? }
? }
