嗯，项目开发到后期，甲方提了一个需求，说要一个文章末尾那样子的图标选择器（要求图标基本与它一致），哇哦，这边要求项目基于vue+element开发，甲方后来提的icon的需求却是基于ant,也只好将其集成进项目咯。值得注意的是，这里最好是将antd的组件按需引入，样式一旦全部引入，可能影响原项目中的网页样式。

一、安装 ant-design-vue ，并引入其Icon组件

1. 在项目中安装antd-design-vue

$ yarn add ant-design-vue

2. 按需加载 ，引入并注册它的Icon组件

在main.js中引入ant-design-vue的icon并手动引入其样式

import { Icon } from "ant-design-vue"; // 引入antd的icon，该icon在项目中已分类，满足需求
import "ant-design-vue/lib/icon/style/index.less";
Vue.component("AIcon", Icon);

二、封装 AntdIcons.vue

<template>
  <div class="antd-icons">
    <el-dialog
      class="comn_dialog"
      title="选择功能图标"
      :visible.sync="visible"
      width="750px"
      top="26vh"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="方向性图标" name="directionIcons">
          <ul>
            <li
              v-for="icon in icons.directionIcons"
              :key="icon"
              class="icon_item"
            >
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
        <el-tab-pane label="指示性图标" name="suggestionIcons"
          ><ul>
            <li
              v-for="icon in icons.suggestionIcons"
              :key="icon"
              class="icon_item"
            >
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
        <el-tab-pane label="编辑类图标" name="editIcons">
          <ul>
            <li v-for="icon in icons.editIcons" :key="icon" class="icon_item">
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
        <el-tab-pane label="数据类图标" name="dataIcons"
          ><ul>
            <li v-for="icon in icons.dataIcons" :key="icon" class="icon_item">
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
        <el-tab-pane label="网站通用类图标" name="webIcons"
          ><ul>
            <li v-for="icon in icons.webIcons" :key="icon" class="icon_item">
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
        <el-tab-pane label="品牌和标志" name="logoIcons"
          ><ul>
            <li v-for="icon in icons.logoIcons" :key="icon" class="icon_item">
              <a-icon
                :type="icon"
                :title="icon"
                @click="chooseIcon(icon)"
                :class="{ active: activeIndex === icon }"
              />
            </li></ul
        ></el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const directionIcons = [
  "step-backward",
  "step-forward",
  "fast-backward",
  "fast-forward",
  "shrink",
  "arrows-alt",
  "down",
  "up",
  "left",
  "right",
  "caret-up",
  "caret-down",
  "caret-left",
  "caret-right",
  "up-circle",
  "down-circle",
  "left-circle",
  "right-circle",
  "up-circle-o",
  "down-circle-o",
  "right-circle-o",
  "left-circle-o",
  "double-right",
  "double-left",
  "vertical-left",
  "vertical-right",
  "forward",
  "backward",
  "rollback",
  "enter",
  "retweet",
  "swap",
  "swap-left",
  "swap-right",
  "arrow-up",
  "arrow-down",
  "arrow-left",
  "arrow-right",
  "play-circle",
  "play-circle-o",
  "up-square",
  "down-square",
  "left-square",
  "right-square",
  "up-square-o",
  "down-square-o",
  "left-square-o",
  "right-square-o",
  "login",
  "logout",
  "menu-fold",
  "menu-unfold",
  "border-bottom",
  "border-horizontal",
  "border-inner",
  "border-left",
  "border-right",
  "border-top",
  "border-verticle",
  "pic-center",
  "pic-left",
  "pic-right",
  "radius-bottomleft",
  "radius-bottomright",
  "radius-upleft",
  "radius-upright",
  "fullscreen",
  "fullscreen-exit"
];
const suggestionIcons = [
  "question",
  "question-circle",
  "plus",
  "plus-circle",
  "pause",
  "pause-circle",
  "minus",
  "minus-circle",
  "plus-square",
  "minus-square",
  "info",
  "info-circle",
  "exclamation",
  "exclamation-circle",
  "close",
  "close-circle",
  "close-square",
  "check",
  "check-circle",
  "check-square",
  "clock-circle",
  "warning",
  "issues-close",
  "stop"
];
const editIcons = [
  "edit",
  "form",
  "copy",
  "scissor",
  "delete",
  "snippets",
  "diff",
  "highlight",
  "align-center",
  "align-left",
  "align-right",
  "bg-colors",
  "bold",
  "italic",
  "underline",
  "strikethrough",
  "redo",
  "undo",
  "zoom-in",
  "zoom-out",
  "font-colors",
  "font-size",
  "line-height",
  "column-height",
  "dash",
  "small-dash",
  "sort-ascending",
  "sort-descending",
  "drag",
  "ordered-list",
  "radius-setting"
];
const dataIcons = [
  "area-chart",
  "pie-chart",
  "bar-chart",
  "dot-chart",
  "line-chart",
  "radar-chart",
  "heat-map",
  "fall",
  "rise",
  "stock",
  "box-plot",
  "fund",
  "sliders"
];
const webIcons = [
  "lock",
  "unlock",
  "bars",
  "book",
  "calendar",
  "cloud",
  "cloud-download",
  "code",
  "copy",
  "credit-card",
  "delete",
  "desktop",
  "download",
  "ellipsis",
  "file",
  "file-text",
  "file-unknown",
  "file-pdf",
  "file-word",
  "file-excel",
  "file-jpg",
  "file-ppt",
  "file-markdown",
  "file-add",
  "folder",
  "folder-open",
  "folder-add",
  "hdd",
  "frown",
  "meh",
  "smile",
  "inbox",
  "laptop",
  "appstore",
  "link",
  "mail",
  "mobile",
  "notification",
  "paper-clip",
  "picture",
  "poweroff",
  "reload",
  "search",
  "setting",
  "share-alt",
  "shopping-cart",
  "tablet",
  "tag",
  "tags",
  "to-top",
  "upload",
  "user",
  "video-camera",
  "home",
  "loading",
  "loading-3-quarters",
  "cloud-upload",
  "star",
  "heart",
  "environment",
  "eye",
  "camera",
  "save",
  "team",
  "solution",
  "phone",
  "filter",
  "exception",
  "export",
  "customer-service",
  "qrcode",
  "scan",
  "like",
  "dislike",
  "message",
  "pay-circle",
  "calculator",
  "pushpin",
  "bulb",
  "select",
  "switcher",
  "rocket",
  "bell",
  "disconnect",
  "database",
  "compass",
  "barcode",
  "hourglass",
  "key",
  "flag",
  "layout",
  "printer",
  "sound",
  "usb",
  "skin",
  "tool",
  "sync",
  "wifi",
  "car",
  "schedule",
  "user-add",
  "user-delete",
  "usergroup-add",
  "usergroup-delete",
  "man",
  "woman",
  "shop",
  "gift",
  "idcard",
  "medicine-box",
  "red-envelope",
  "coffee",
  "copyright",
  "trademark",
  "safety",
  "wallet",
  "bank",
  "trophy",
  "contacts",
  "global",
  "shake",
  "api",
  "fork",
  "dashboard",
  "table",
  "profile",
  "alert",
  "audit",
  "branches",
  "build",
  "border",
  "crown",
  "experiment",
  "fire",
  "money-collect",
  "property-safety",
  "read",
  "reconciliation",
  "rest",
  "security-scan",
  "insurance",
  "interaction",
  "safety-certificate",
  "project",
  "thunderbolt",
  "block",
  "cluster",
  "deployment-unit",
  "dollar",
  "euro",
  "pound",
  "file-done",
  "file-exclamation",
  "file-protect",
  "file-search",
  "file-sync",
  "gateway",
  "gold",
  "robot",
  "shopping"
];
const logoIcons = [
  "android",
  "apple",
  "windows",
  "ie",
  "chrome",
  "github",
  "aliwangwang",
  "dingding",
  "weibo-square",
  "weibo-circle",
  "taobao-circle",
  "html5",
  "weibo",
  "twitter",
  "wechat",
  "youtube",
  "alipay-circle",
  "taobao",
  "skype",
  "qq",
  "medium-workmark",
  "gitlab",
  "medium",
  "linkedin",
  "google-plus",
  "dropbox",
  "facebook",
  "codepen",
  "amazon",
  "google",
  "codepen-circle",
  "alipay",
  "ant-design",
  "aliyun",
  "zhihu",
  "slack",
  "slack-square",
  "behance",
  "behance-square",
  "dribbble",
  "dribbble-square",
  "instagram",
  "yuque",
  "alibaba",
  "yahoo"
];
export default {
  name: "AntdIcons",
  props: {
    iconChooseVisible: {
      default: false
    }
  },
  data() {
    return {
      icons: {
        directionIcons,
        suggestionIcons,
        editIcons,
        dataIcons,
        webIcons,
        logoIcons
      },
      choosedIcon: "",
      activeIndex: "",
      activeName: "directionIcons" // 当前活跃的选项卡名
    };
  },
  computed: {
    visible: {
      get: function() {
        return this.iconChooseVisible;
      },
      set(val) {
        this.$emit("updateIconVisible", val);
      }
    }
  },
  methods: {
    reset() {
      this.activeIndex = "";
    },
    chooseIcon(icon) {
      this.activeIndex = icon;
      this.choosedIcon = icon;
      this.$message.success(`选中的图标名为： ${icon}`);
    },
    Save() {
      if (this.choosedIcon === "") {
        this.$message.warning("尚未选择任何图标");
        return;
      }
      this.reset();
      this.$emit("handleIconChoose", this.choosedIcon);
    },
    Cancel() {
      this.reset();
      this.$emit("handleIconCancel");
    }
  }
};
</script>
<style lang="scss">
.antd-icons {
  .icon_item {
    display: inline-block;
    font-size: 26px;
    margin-right: 6px;
    line-height: 55px;
  }
  .active {
    color: $icon_color;
    background: rgba(247, 243, 243, 0.1);
  }
}
</style>

四、使用刚刚封装的 AntdIcons.vue

test.vue

<template>
  <div class="test" style="margin: 10%;">
    <el-button type="primary" @click="iconPopupVisible = true"
      >点击显示</el-button
    >
    <a-icon
      style="color:#005d42;font-size:30px;margin-left:50px;"
      v-if="currIcon"
      :type="currIcon"
    />

    <antd-icons
      :iconChooseVisible="iconPopupVisible"
      @handleIconChoose="handleIconChoose"
      @handleIconCancel="handleIconCancel"
      @updateIconVisible="updateIconVisible"
    ></antd-icons>
  </div>
</template>
<script>
import AntdIcons from "@/components/common/AntdIcons.vue";
export default {
  components: {
    AntdIcons
  },
  data() {
    return {
      iconPopupVisible: false,
      currIcon: ""
    };
  },
  methods: {
    updateIconVisible(val) {
      this.iconPopupVisible = val;
    },
    handleIconChoose(value) {
      this.currIcon = value; //选中图标后， 设置进当前的icon值
      this.iconPopupVisible = false;
    },
    handleIconCancel() {
      this.iconPopupVisible = false;
    }
  }
};
</script>

测试结果：

参考 ：vue+ant-design-vue 项目，参考：jeecg项目