AntD Button 图标集成 iconfont

1、概述

近期，前端项目在做优化，优化点：Button组件图标加载。
问题描述：图片资源来自服务端返回的结果，虽然目前实现异步加载，但避免不了多次请求服务端就会造成性能问题，所以，就考虑到前端本地化资源存储，一种是存储成xml文件，一种是svg格式文件。
要求：现请研究图片集成方式，避免多次请求（注：美工的切图都是彩色图，颜色大于2种）
解决方案：按钮集成iconfont库

2、步骤

1.首页登录 https://www.iconfont.cn/home/index 注册（GitHub账号第三方登录）
2.建项目流程
a.新建项目
b.下面两项可自行设置

c,在商城选择需要的素材加到购物车（类似淘宝剁手操作），点击添加到新建项目

d、下载至本地

e.下载文件目录结构

3、代码

1、拷贝文件至项目结构下，assets下新建文件夹npicons存放文件

2.目录介绍 npicon.js 将iconfont.css 的所有图标做了一层封装，供弹窗调用（我采用的是多色模式）

纯色模式：

3.弹窗代码及效果
多色模式：

<template>
  <s-modal subtitle="图标资源" :operationType='operationType' :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
       <!-- 纯色模式 -->
        <!-- <ul>
          <li :style="{ fontSize: '36px'}" v-for="(item) in npicons" :key="item" :class="item" @click="(e)=>handleSelectedIcon(e,item)">
          </li>
        </ul> -->
        <div class="icons">
         <!-- 多色模式 -->
          <svg class="icon" aria-hidden="true" v-for="(item) in npicons" :key="item" :class="item" @click="(e)=>handleSelectedIcon(e,item)">
            <use :xlink:href="item"></use>
          </svg>
        </div>
      </a-form>
    </a-spin>
  </s-modal>

</template>

<script>
import pick from 'lodash.pick'
import { SModal, AreaTitle, GButton } from '@/components'
import IconSelector from '@/components/IconSelector/IconSelector'
import npicons from '../../assets/npicons/npicon.js'
import '../../assets/npicons/iconfont.css'

export default {
  name: 'npIcon',
  components: {
    SModal,
    AreaTitle,
    GButton,
    IconSelector,
    npicons,
  },
  data() {
    return {
      selectedIcon: '',
      visible: false,
      confirmLoading: false,
      operationType: undefined,
      form: this.$form.createForm(this),
      iconType: '',
      data: '',
      npicons: '',
    }
  },
  computed: {},
  created() {
    console.log('npicons', npicons)
    this.npicons = npicons
  },
  methods: {
    view(record) {
      this.operationType = this.operation.view
      this.visible = true
    },
    add(record) {
      this.data = record
      this.operationType = this.operation.add
      this.visible = true
    },
    handleSelectedIcon(e, icon) {
      console.log('e1: ', e.target.className)
      e.target.style.background = 'red'
      console.log('icon: ', icon)
      console.log('  this.npicons: ', Object.entries(this.npicons))
      Object.entries(this.npicons).forEach((element) => {
        let dom = document.getElementsByClassName(element[1])[0]
        console.log('dom: ', dom)
        if (element[1] !== icon) {
          dom.style.background = ''
        }
      })
      this.selectedIcon = icon
    },
    handleSubmit() {
      if (this.selectedIcon === '') {
        this.$message.info('请选择图标！')
        return
      }
      this.confirmLoading = true
      let len = '#anticon'.length
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
        this.data.buttonIcons = this.selectedIcon
        console.log(' this.selectedIcon: ', this.selectedIcon.substring(len))
        this.$emit('ok', this.data)
      }, 500)
    },
    handleCancel() {
      this.visible = false
    },
    handleChange(icon) {
      this.selectedIcon = icon
    },
  },
}
</script>

<style lang="less" scoped>
.icons {
  list-style: none;
  padding: 0;
  overflow-y: scroll;
  height: 250px;
}
.icon {
  width: 3em;
  height: 3em;
  display: inline-block;
  padding: 5px;
  margin: 5px;
  &:hover {
    cursor: pointer;
  }
  &.active {
    box-shadow: 0px 0px 5px 2px #888888;
  }
}
</style>

纯色模式：

4.Button按钮集成iconfont

<template>
  <div>
    <a-button type="primary" @click="startEditTable" size="small">设置按钮属性</a-button>
    <geno-modal :maskClosable="false" title="设置按钮属性" v-model="windowVisible" :width="900" @ok="modalSure" @cancel="modalCancel" cancelText="取消"
      okText="确定" :cancelButtonProps="{ props: {icon: 'close'}}" :okButtonProps="{ props: {icon: 'check'}}">
      <a-table size="small" :columns="columns" :dataSource="data" :pagination="false" style="height:450px;" :scroll="{y:420}">
        <template slot="buttonIconType" slot-scope="text,record">
          <div key="buttonIconType">
            <a-radio-group style="width:50%;float:left" :value="record.buttonIconType"
              @change="e=> handleChange(e.target.value,record.key,'buttonIconType')">
              <a-row>
                <a-col>
                  <a-radio :value="1"> 直接设置 </a-radio>
                </a-col>
                <a-col>
                  <a-radio :value="2"> 上传图片</a-radio>
                </a-col>
                <a-col>
                  <a-radio :value="3"> 选择图片库</a-radio>
                </a-col>
              </a-row>
            </a-radio-group>

            <a-tree-select v-if="record.buttonIconType==1" :value="record.buttonIcons" style="width:50%;" size="small"
              :dropdownStyle="{maxHeight:'400px',overflow:'auto'}" placeholder='请选择图标' :allowClear='false' treeDefaultExpandAll
              @change="e=>handleChange(e,record.key,'buttonIcons')">
              <a-tree-select-node v-for="icon in record.allButtonIcons" :value='icon.value' :title="icon.name" :key="icon.value" />
            </a-tree-select>

            <div v-if="record.buttonIconType==2">
              <NpUploadFile :upLoadSize='2' :fileList.sync="record.buttonIconImages" maxFileLength=1 fileType="vectorgraph"></NpUploadFile>
            </div>
            <div v-if="record.buttonIconType==3">
              <a-button type="primary" @click="handleIcon(record)"> 选择图片库</a-button>
            </div>
          </div>
        </template>
        <template slot="buttonTextColor" slot-scope="text,record">
          <div key="buttonTextColor">
            <NpColorPicker :color.sync="record.buttonTextColor"></NpColorPicker>
          </div>
        </template>
        <template slot="buttonBGColor" slot-scope="text,record">
          <div key="buttonBGColor">
            <NpColorPicker :color.sync="record.buttonBGColor"></NpColorPicker>
          </div>
        </template>
        <template slot="buttonFrameColor" slot-scope="text,record">
          <div key="buttonFrameColor">
            <NpColorPicker :color.sync="record.buttonFrameColor"></NpColorPicker>
          </div>
        </template>
      </a-table>
      <template slot="footer">
        <a-button @click="modalCancel" size="small">取消</a-button>
        <a-button type="primary" @click="modalSure" size="small">确定</a-button>
      </template>

      <np-icon ref="chooseIcons" @ok="handleOk" />
    </geno-modal>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import common from '../../02common/commonMethod'
import buttonAttributeInfo from '../../02common/commonClasses/buttonAttributeInfo'
import npColorPicker from '../../07commonComponents/npColorPicker.vue'
import npUploadFile from '../../07commonComponents/npUploadFile.vue'
import propertyCellBase from '../propertyCellBase'
import { propertyCellTypeAttr, PropertyTypeEnum } from '../commonTypes'
import npIcon from '../../../../views/npicon/npIcon.vue'

@propertyCellTypeAttr(PropertyTypeEnum.buttonAttribute)
@Component({ components: { NpColorPicker: npColorPicker, NpUploadFile: npUploadFile, npIcon } })
export default class buttonAttribute extends propertyCellBase {
  public windowVisible: boolean = false

  private columns: any[] = [
    {
      title: '按钮状态',
      dataIndex: 'buttonStatus',
      key: 'buttonStatus',
      width: '20%',
    },
    {
      title: '按钮图标',
      dataIndex: 'buttonIconType',
      scopedSlots: { customRender: 'buttonIconType' },
      width: '40%',
    },
    {
      title: '前景色',
      dataIndex: 'buttonTextColor',
      scopedSlots: { customRender: 'buttonTextColor' },
      width: '15%',
    },
    {
      title: '背景色',
      dataIndex: 'buttonBGColor',
      scopedSlots: { customRender: 'buttonBGColor' },
      width: '15%',
    },
    {
      title: '边框颜色',
      dataIndex: 'buttonFrameColor',
      scopedSlots: { customRender: 'buttonFrameColor' },
      width: '10%',
    },
  ]

  private data: buttonAttributeInfo[] = []
  private newbutton(val: string): buttonAttributeInfo {
    var newRow1 = new buttonAttributeInfo()
    newRow1.key = common.getUuid()
    newRow1.buttonStatus = val
    newRow1.buttonIconType = 1
    newRow1.buttonIcons = undefined
    newRow1.buttonTextColor = ''
    newRow1.buttonBGColor = ''
    newRow1.buttonFrameColor = ''
    newRow1.buttonIconImages = []
    return newRow1
  }
  mounted() {
    this.data.push(this.newbutton('正常状态'))
    this.data.push(this.newbutton('鼠标悬浮'))
    this.data.push(this.newbutton('选中状态'))
    this.data.push(this.newbutton('不可点击'))
  }

  private startEditTable() {
    this.windowVisible = true

    if (!this.currentValue) {
      this.data = [this.newbutton('正常状态'), this.newbutton('鼠标悬浮'), this.newbutton('选中状态'), this.newbutton('不可点击')]
      return
    }
    this.data = []
    ;(this.currentValue as buttonAttributeInfo[]).filter((o) => {
      var newbuttoninfo = new buttonAttributeInfo()
      newbuttoninfo.key = o.key
      newbuttoninfo.buttonStatus = o.buttonStatus
      newbuttoninfo.buttonIconType = o.buttonIconType
      newbuttoninfo.buttonIcons = o.buttonIcons
      newbuttoninfo.buttonTextColor = o.buttonTextColor
      newbuttoninfo.buttonBGColor = o.buttonBGColor
      console.info('o.buttonFrameColor', o.buttonFrameColor)
      if (o.buttonFrameColor == undefined) {
        newbuttoninfo.buttonFrameColor = o.buttonBGColor
      } else {
        newbuttoninfo.buttonFrameColor = o.buttonFrameColor
      }
      newbuttoninfo.buttonIconImages = o.buttonIconImages
      this.data.push(newbuttoninfo)
    })
  }

  private modalSure() {
    this.currentValue = common.clone(this.data)
    console.log('this.currentValue: ', this.currentValue)
    this.windowVisible = false
  }
  private modalCancel() {
    this.windowVisible = false
  }

  private handleChange(value: any, key: string, column: string) {
    window.console.log(value + '==' + key + '==' + column)
    //获取data值
    const newData = [...this.data]
    //找到目标行
    const target = newData.filter((item) => key === item.key)[0]
    if (target) {
      ;(target as any)[column] = value //将新的值更新给对应列
      //更新data
      this.data = newData
    }
  }

  private handleOk(record) {
    console.log('recordReturn: ', record)
    const newData = [...this.data]
    //找到目标行
    let target = newData.filter((item) => record.key === item.key)[0]
    console.log('target: ', target);
    if (target) {
      target = record
      //更新data
      this.data = newData
    }
  }
  private handleIcon(record) {
    console.log('record: ', record)
    ;(this.$refs.chooseIcons as any).add(record)
  }
}
</script>

/**
 *按钮组件
 */
<template>
  <a-tooltip placement="top" :title="TooltipTitle" style="position:relative">
    <div style="position:relative">
      <!-- <span v-if="isSo===true"> -->

      <a-popconfirm v-if="isSo===true" :title="confirmTitle" okText="确认" style="width:100%;height:100%" cancelText="取消" :visible="btnOptions.visible"
        @confirm="confirm" @visibleChange="handleVisibleChange">
        <a-button :type="buttonType" :disabled="buttonDisabled"
          :style="{background:btnOptions.backgroundColor,color:btnOptions.fontColor,borderColor:btnOptions.buttonFrameColor,fontSize: fontSize+'px', width:'100%',height:'100%','box-shadow':'none','text-shadow': '0px'}"
          @mouseover="onMouseOver" @mouseout="onMouseOut" @click="onClick" @mousedown="onmousedown" @mouseup="onmouseup">
          <a-icon v-if="btnOptions.iconFlag===1" :type="btnOptions.varIcon" ghost></a-icon>
          <a-icon v-else-if="btnOptions.iconFlag===3">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="btnOptions.varIcon"></use>
            </svg>
          </a-icon>
          <img referrer="no-referrer|origin|unsafe-url" v-else v-lazy="btnOptions.imageUrl" alt="image" :width="svgSize+'px'" :height="svgSize+'px'"
            style="margin-right:8px;margin-top:-3px;" />{{buttonText}}
        </a-button>
      </a-popconfirm>
      <!-- </span>
    <span v-else> -->

      <a-button v-else :type="buttonType"
        :style="{background:btnOptions.backgroundColor,color:btnOptions.fontColor,borderColor:btnOptions.buttonFrameColor,fontSize: fontSize+'px',width:'100%',height:'100%','box-shadow':'none','text-shadow': '0px'}"
        @mouseover="onMouseOver" @mouseout="onMouseOut" @mousedown="onmousedown" @mouseup="onmouseup" :disabled="buttonDisabled" @click="onClick">
        <a-icon v-if="btnOptions.iconFlag===1" :type="btnOptions.varIcon" ghost></a-icon>
        <a-icon v-else-if="btnOptions.iconFlag===3">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="btnOptions.varIcon"></use>
          </svg>
        </a-icon>
        <!-- <Icon v-else-if="btnOptions.iconFlag===3" type="jiazai" /> -->
        <img referrer="no-referrer|origin|unsafe-url" v-else v-lazy="btnOptions.imageUrl" alt="image" :width="svgSize+'px'" :height="svgSize+'px'"
          style="margin-right:8px;margin-top:-3px;" />{{buttonText}}
      </a-button>

      <!-- </span> -->
    </div>
  </a-tooltip>
</template>

<script lang="ts">
import Icon from 'ant-design-vue/es/icon'
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import {
  Property,
  Number_Property,
  Text_Property,
  Boolean_Property,
  Behavior_Property,
  Enum_Property,
  PropertyGroupName,
  UploadFile_Property,
  Color_Property,
  Button_Property,
  PageInParams_Property,
  FileTemplateModal_Property,
} from '../../02common/commonClasses/LayoutProperty'
import ComponentBase from '../ComponentBase'
import BaseEvents from '../../03designerLayoutBase/BaseEvents'
import common from '../../02common/commonMethod'
import LayoutBase from '../../03designerLayoutBase/LayoutBase'
import { InputSearch } from 'ant-design-vue/types/input/input-search'
import { layoutEvent } from '../../02common/commonClasses/layoutEvent'
import buttonAttributeInfos from '../../02common/commonClasses/buttonAttributeInfo'
import { CurrentContext } from '../../01designerContext'
import { param, paramType } from '../../02common/commonClasses/layoutEvent'

class btnOptionsClass {
  infoNormal: buttonAttributeInfos = new buttonAttributeInfos()
  infoHover: buttonAttributeInfos = new buttonAttributeInfos()
  infoSelected: buttonAttributeInfos = new buttonAttributeInfos()
  infoDisable: buttonAttributeInfos = new buttonAttributeInfos()
  varIcon: string = ''
  backgroundColor: string = ''
  fontColor: string = ''
  buttonFrameColor: string = ''
  iconFlag: number = 0
  imageUrl: string = '../../assets/edit.png'
  visible: boolean = false
  buttonTimeOut: boolean = true
  confirmClick: boolean = true
  inparam: param[]
  outparam: param
}

@Component
export default class ButtonComponent extends ComponentBase {
  // infoNormal: buttonAttributeInfos = new buttonAttributeInfos()
  // infoHover: buttonAttributeInfos = new buttonAttributeInfos()
  // infoSelected: buttonAttributeInfos = new buttonAttributeInfos()
  // infoDisable: buttonAttributeInfos = new buttonAttributeInfos()
  // varIcon: string = ''
  // backgroundColor: string = ''
  // fontColor: string = ''
  // buttonFrameColor: string = ''
  // iconFlag: boolean = true
  // imageUrl: string = '../../assets/edit.png'
  // visible: boolean = false
  // buttonTimeOut: boolean = true
  // confirmClick: boolean = true
  // inparam: param[]
  // outparam: param

  private btnOptions: btnOptionsClass = new btnOptionsClass()

  private setButtonAttribute(buttonAttributeInfo: buttonAttributeInfos) {
    if (buttonAttributeInfo.buttonIconType) {
      if (buttonAttributeInfo.buttonIconType == 1) {
        this.btnOptions.iconFlag = 1
        this.btnOptions.varIcon = buttonAttributeInfo.buttonIcons + ''
      } else if (buttonAttributeInfo.buttonIconType == 3) {
        this.btnOptions.iconFlag = 3
        this.btnOptions.varIcon = buttonAttributeInfo.buttonIcons + ''
        console.log('this.btnOptions.varIcon: ', this.btnOptions.varIcon)
      } else {
        this.btnOptions.iconFlag = 2
        this.btnOptions.varIcon = ''
        //window.console.info('buttonAttributeInfo.buttonIconImages', buttonAttributeInfo.buttonIconImages)
        if (buttonAttributeInfo.buttonIconImages && buttonAttributeInfo.buttonIconImages.length > 0) {
          this.btnOptions.imageUrl = common.BuildingFileUrlForShow(
            CurrentContext.FileServerAddress,
            buttonAttributeInfo.buttonIconImages[0].url.split('?')[0]
          )
        }
      }
    }
    this.btnOptions.fontColor = buttonAttributeInfo.buttonTextColor
    this.btnOptions.backgroundColor = buttonAttributeInfo.buttonBGColor
    //console.info('buttonAttributeInfo.buttonFrameColor', buttonAttributeInfo.buttonFrameColor)
    if (!buttonAttributeInfo.buttonFrameColor) {
      this.btnOptions.buttonFrameColor = buttonAttributeInfo.buttonBGColor
    } else {
      this.btnOptions.buttonFrameColor = buttonAttributeInfo.buttonFrameColor
    }
  }

  @Watch('isSelected')
  watchIsSelected() {
    if (this.isSelected && !this.buttonDisabled) {
      this.setButtonAttribute(this.btnOptions.infoSelected)
    } else if (!this.isSelected && !this.buttonDisabled) {
      this.setButtonAttribute(this.btnOptions.infoNormal)
    }
  }

  rendered(dom: Element) {}

  @Watch('infoNormal')
  watchInfoNormal() {
    if (!this.buttonDisabled) {
      this.setButtonAttribute(this.btnOptions.infoNormal)
    }
  }

  @Watch('infoSelected')
  watchInfoSelected() {
    if (this.isSelected && !this.buttonDisabled) {
      this.setButtonAttribute(this.btnOptions.infoSelected)
    }
  }

  @Watch('infoDisable')
  watchInfoDisable() {
    if (this.buttonDisabled) {
      //window.console.info('this.infoDisable', this.infoDisable)
      this.setButtonAttribute(this.btnOptions.infoDisable)
    }
  }

  private onMouseOver() {
    if (!this.buttonDisabled) {
      this.setButtonAttribute(this.btnOptions.infoHover)
    }
  }

  private handleVisibleChange(visible) {
    if (!visible) {
      this.btnOptions.visible = false
      return
    }
    if (this.buttonDisabled) {
      this.btnOptions.visible = false
      this.confirm() // next step
    } else {
      this.btnOptions.visible = true
    }
  }

  private onMouseOut() {
    if (!this.buttonDisabled) {
      if (this.isSelected) {
        this.setButtonAttribute(this.btnOptions.infoSelected)
      } else {
        this.setButtonAttribute(this.btnOptions.infoNormal)
      }
    }
  }

  private onClick() {
    let timeoutProperty = this.FindPropertyByName(PropertyGroupName.special, '点击时间间隔')
    if (this.btnOptions && this.btnOptions.buttonTimeOut) {
      this.btnOptions.buttonTimeOut = false
      let timeout = timeoutProperty && timeoutProperty.value ? (timeoutProperty.value as number) : 1000
      if (timeout < 1000) {
        timeout = 1000
      }
      setTimeout(() => {
        if (this.btnOptions) {
          this.btnOptions.buttonTimeOut = true
        }
      }, timeout)
      //window.console.log('触发点击事件1212121212')
      this.TriggeEvent('按钮点击事件', null)
    }
    //触发事件
  }
  private onmousedown() {
    this.setButtonAttribute(this.btnOptions.infoSelected)
  }
  private onmouseup() {
    this.setButtonAttribute(this.btnOptions.infoNormal)
  }
  private confirm() {
    if (this.btnOptions.confirmClick) {
      this.btnOptions.confirmClick = false
      setTimeout(() => {
        this.btnOptions.confirmClick = true
      }, 1000)
      //window.console.log('确认按钮回调事件')
      this.TriggeEvent('确认按钮回调事件', null)
    }
  }

  created() {}

  mounted() {
    if (this.IsDesigning) {
      this.width = 80
      this.height = 34
      //注册特有属性
      this.RegisterProperty('提示文字', PropertyGroupName.special, new Text_Property(), '')
      this.RegisterProperty('气泡提示信息', PropertyGroupName.special, new Text_Property(), '确认要删除吗？')
      this.RegisterProperty('是否展示气泡', PropertyGroupName.special, new Boolean_Property(), false)
      this.RegisterProperty('按钮文本', PropertyGroupName.special, new Text_Property(), '新增')
      this.RegisterProperty('图标大小', PropertyGroupName.special, new Number_Property(), 16)

      //this.RegisterProperty('是否禁用', PropertyGroupName.special, new Boolean_Property(), false)
      this.RegisterProperty(
        '按钮类型',
        PropertyGroupName.special,
        new Enum_Property(true, ['主按钮', '次按钮', '虚线按钮', '危险按钮', '链接按钮']),
        '主按钮'
      )
      this.RegisterProperty('按钮设置', PropertyGroupName.special, new Button_Property())
      //新增点击时间间隔属性
      this.RegisterProperty('点击时间间隔', PropertyGroupName.special, new Number_Property(), 1000)
      // this.RegisterProperty('选择文件模板', PropertyGroupName.special, new FileTemplateModal_Property())
      this.FindPropertyByName(PropertyGroupName.normal, '前景色').canSetting = false
      this.FindPropertyByName(PropertyGroupName.normal, '背景图片').canSetting = false
      this.FindPropertyByName(PropertyGroupName.normal, '背景色').canSetting = false
    }
    this.RegisterEvents('按钮点击事件', '', this.btnOptions.inparam, this.btnOptions.outparam)
    this.RegisterEvents('确认按钮回调事件', '', this.btnOptions.inparam, this.btnOptions.outparam)
    this.$watch('buttonInfo', this.watchButtonAttributeInfo, { deep: true })
  }

  get buttonDisabled(): Boolean {
    var property = this.FindPropertyByName(PropertyGroupName.normal, '是否禁用')
    // window.console.log('*****************get buttonDisabled', this.name, property.value)
    if (property && property.value) {
      if (property.value == false) {
        this.setButtonAttribute(this.btnOptions.infoNormal)
      } else {
        this.setButtonAttribute(this.btnOptions.infoDisable)
      }

      return property.value as boolean
    } else {
      this.setButtonAttribute(this.btnOptions.infoNormal)
      return false
    }
  }

  set buttonDisabled(val: Boolean) {
    //window.console.log('*****************set buttonDisabled', val)
    var property = this.FindPropertyByName(PropertyGroupName.normal, '是否禁用')
    this.SetPropertyVal(property.id, val)
    if (val) {
      this.setButtonAttribute(this.btnOptions.infoDisable)
    } else {
      this.setButtonAttribute(this.btnOptions.infoNormal)
    }
  }

  private onCurrentPropertyChanged(propertyId: string, property_newval: any, comp: ComponentBase): void {
    if (property_newval.propertyName == '是否禁用') {
      this.buttonDisabled = property_newval.value
    }
  }

  watchButtonAttributeInfo() {
    let findprop = this.FindPropertyByName(PropertyGroupName.special, '按钮设置')

    if (findprop && typeof findprop.value != 'undefined') {
      this.btnOptions.infoNormal = findprop.value[0]
      this.btnOptions.infoHover = findprop.value[1]
      this.btnOptions.infoSelected = findprop.value[2]
      this.btnOptions.infoDisable = findprop.value[3]
    }
  }

  protected get buttonInfo(): buttonAttributeInfos[] {
    var property = this.FindPropertyByName(PropertyGroupName.special, '按钮设置')
    if (!property) {
      return []
    }

    var val = property.value
    if (!val) {
      return []
    }
    return val as buttonAttributeInfos[]
  }

  get confirmTitle(): string {
    let findprop = this.FindPropertyByName('特有属性', '气泡提示信息')
    if (findprop) {
      return findprop.value as string
    } else {
      return ''
    }
  }
  get isSo(): boolean {
    let findprop = this.FindPropertyByName(PropertyGroupName.special, '是否展示气泡')
    if (findprop) {
      return findprop.value as boolean
    }
    return false
  }

  //按钮文本
  get buttonText(): string {
    let findprop = this.FindPropertyByName('特有属性', '按钮文本')
    if (findprop) {
      return findprop.value as string
    } else {
      return ''
    }
  }
  get svgSize(): number {
    let findprop = this.FindPropertyByName('特有属性', '图标大小')
    if (findprop) {
      return findprop.value as number
    }
    return 20
  }
  //公有属性
  get fontSize(): string {
    let findprop = this.FindPropertyByName(PropertyGroupName.normal, '字体')
    if (findprop) {
      //console.info('按钮字体')
      let size = findprop.value
      if (size == 0) {
        size = '14'
      }
      return size as string
    }
    return '14'
  }

  //按钮类型
  get buttonType(): string {
    let findprop = this.FindPropertyByName(PropertyGroupName.special, '按钮类型')
    if (findprop) {
      if (findprop.value === '主按钮') {
        return 'primary'
      } else if (findprop.value === '次按钮') {
        return 'default'
      } else if (findprop.value === '虚线按钮') {
        return 'dashed'
      } else if (findprop.value === '危险按钮') {
        return 'danger'
      } else {
        return 'link'
      }
    }
    return 'default'
  }

  get TooltipTitle(): string {
    var tmp = this.FindPropertyByName(PropertyGroupName.special, '提示文字')
    if (tmp && (tmp.value as string) != '') {
      return tmp.value as string
    } else {
      // if (this.FindPropertyByName(PropertyGroupName.special, '文本')) {
      //   return this.FindPropertyByName(PropertyGroupName.special, '文本').value as string
      // } else {
      //   return ''
      // }
      return ''
    }
  }
}
</script>
<style scoped>
.ant-btn {
  padding: 0 0px;
  text-shadow: 0 0px 0 rgba(0, 0, 0, 0) !important;
}
.icon {
  width: 2em;
  height: 2em;
}
</style>

4、资源导入

a.在项目根目录src下新建common.less文件
代码内容：

/* 引入 icon class 文件 */
@import './assets/npicons/iconfont.css';
/* 关于这个引用路径，有一个坑，ant.design 我用的dva，默认资源路径为 /public 所以这个引用的实际目录是  /public/fonts/iconfont/iconfont.css */

/* 设置使用字体的优先级 anticon-user 高 */
:global(.anticon) {
  /* :global() 是为了覆盖全局class .anticon 的样式 */
  &:before {
    font-family: 'anticon', 'anticon-user' !important;
    /* 默认样式是这样
        font-family: "anticon" !important;
    */
  }
}

b.将common.less在全局文件中引入，这里是在src/App.vue中引入

// Fontclass模式
import './common.less'
// 使用 symbol模式 支持多色
import './assets/npicons/iconfont.js'

5、总结

1、antD button 按钮会自动修改样式，导致iconfont样式失效。试了好久，最终用 包裹

主要代码：

<a-button v-else :type="buttonType":style="{background:btnOptions.backgroundColor,color:btnOptions.fontColor,borderColor:btnOptions.buttonFrameColor,fontSize: fontSize+'px',width:'100%',height:'100%','box-shadow':'none','text-shadow': '0px'}" @mouseover="onMouseOver" @mouseout="onMouseOut" @mousedown="onmousedown" @mouseup="onmouseup" :disabled="buttonDisabled" @click="onClick">
        <a-icon v-else-if="btnOptions.iconFlag===3">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="btnOptions.varIcon"></use>
          </svg>
        </a-icon>
        <!-- <Icon v-else-if="btnOptions.iconFlag===3" type="jiazai" /> -->
</a-button>

样式丢失效果：被antd button重写

手动修改效果：

2、两种模式加载iconfont
font-class模式 ： anticon-user 与icon项目的Font Family 对应，jiazai为icon项目的前缀和图片名称

<i class="anticon-user jiazai" style="font-size: 65px;"/>

symbol 方式：多色展示

 <svg class="icon" aria-hidden="true">
  <use xlink:href="#jiazai"></use>
</svg>
//可修改图标样式  加入通用 CSS 代码（引入一次就行）
.icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3、antD Button按钮图标加载两种方式。
a.a-icon

<a-icon v-if="btnOptions.iconFlag===1" :type="btnOptions.varIcon" ghost></a-icon>
          <a-icon v-else-if="btnOptions.iconFlag===3">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="btnOptions.varIcon"></use>
            </svg>
</a-icon>

b.img

<img referrer="no-referrer|origin|unsafe-url" v-else v-lazy="btnOptions.imageUrl" alt="image" :width="svgSize+'px'" :height="svgSize+'px'"  style="margin-right:8px;margin-top:-3px;" />{{buttonText}}