<template>
  <div>    
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); margin-bottom: 16px;"
      title="点击即可复制图标"
      sub-title="在项目中需要使用的地方粘贴即可"
    />

    <a-list :grid="{ gutter: 8, column: 12 }" :data-source="Icons">
      <a-list-item class="iconHover" slot="renderItem" slot-scope="item, index">
        <a-card class="iconList" @click.native="handleCopyIcon(index, $event)">
          <i :class="item"></i>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import clip from "@/utils/clipboard";

export default {
  data() {
    return {
      Icons: [
        "antd-icon-all1",
        "antd-icon-phone-fill",
        "antd-icon-arrow-up",
        "antd-icon-online-tracking-fill",
        "antd-icon-ascending",
        "antd-icon-play-fill1",
        "antd-icon-ashbin",
        "antd-icon-pdf-fill",
        "antd-icon-atm",
        "antd-icon-phone1",
        "antd-icon-bad",
        "antd-icon-pin-fill",
        "antd-icon-attachent",
        "antd-icon-product-fill",
        "antd-icon-browse",
        "antd-icon-rankinglist-fill",
        "antd-icon-beauty",
        "antd-icon-reduce-fill",
        "antd-icon-atm-away",
        "antd-icon-reeor-fill",
        "antd-icon-assessed-badge",
        "antd-icon-pic-fill1",
        "antd-icon-auto1",
        "antd-icon-rankinglist",
        "antd-icon-bags",
        "antd-icon-product1",
        "antd-icon-calendar",
        "antd-icon-prompt-fill1",
        "antd-icon-cart-full",
        "antd-icon-resonserate-fill",
        "antd-icon-calculator",
        "antd-icon-remind-fill",
        "antd-icon-cameraswitching",
        "antd-icon-Rightbutton-fill",
        "antd-icon-cecurity-protection",
        "antd-icon-RFQ-logo-fill",
        "antd-icon-category",
        "antd-icon-RFQ-word-fill",
        "antd-icon-close",
        "antd-icon-searchcart-fill",
        "antd-icon-certified-supplier",
        "antd-icon-salescenter-fill",
        "antd-icon-cart-Empty",
        "antd-icon-save-fill",
        "antd-icon-code1",
        "antd-icon-security-fill",
        "antd-icon-color",
        "antd-icon-Similarproducts-fill",
        "antd-icon-conditions",
        "antd-icon-signboard-fill",
        "antd-icon-confirm",
        "antd-icon-service-fill",
        "antd-icon-company",
        "antd-icon-shuffling-banner-fill",
        "antd-icon-ali-clould",
        "antd-icon-supplier-features-fill",
        "antd-icon-copy1",
        "antd-icon-store-fill",
        "antd-icon-credit-level",
        "antd-icon-smile-fill",
        "antd-icon-coupons",
        "antd-icon-success-fill",
        "antd-icon-connections",
        "antd-icon-sound-filling-fill",
        "antd-icon-cry",
        "antd-icon-sound-Mute1",
        "antd-icon-costoms-alearance",
        "antd-icon-suspended-fill",
        "antd-icon-clock",
        "antd-icon-tool-fill",
        "antd-icon-CurrencyConverter",
        "antd-icon-task-management-fill",
        "antd-icon-cut",
        "antd-icon-unlock-fill",
        "antd-icon-data1",
        "antd-icon-trust-fill",
        "antd-icon-Customermanagement",
        "antd-icon-vip-fill",
        "antd-icon-descending",
        "antd-icon-set1",
        "antd-icon-double-arro-right",
        "antd-icon-Top-fill",
        "antd-icon-customization",
        "antd-icon-viewlarger1",
        "antd-icon-double-arrow-left",
        "antd-icon-voice-fill",
        "antd-icon-discount",
        "antd-icon-warning-fill",
        "antd-icon-download",
        "antd-icon-warehouse-fill",
        "antd-icon-dollar1",
        "antd-icon-zip-fill",
        "antd-icon-default-template",
        "antd-icon-trade-assurance-fill",
        "antd-icon-editor1",
        "antd-icon-vs-fill",
        "antd-icon-eletrical",
        "antd-icon-video1",
        "antd-icon-electronics",
        "antd-icon-template-fill",
        "antd-icon-etrical-equipm",
        "antd-icon-wallet1",
        "antd-icon-ellipsis",
        "antd-icon-training1",
        "antd-icon-email",
        "antd-icon-packing-labeling-fill",
        "antd-icon-falling",
        "antd-icon-Exportservices-fill",
        "antd-icon-earth",
        "antd-icon-brand-fill",
        "antd-icon-filter",
        "antd-icon-collection",
        "antd-icon-furniture",
        "antd-icon-consumption-fill",
        "antd-icon-folder",
        "antd-icon-collection-fill",
        "antd-icon-feeds",
        "antd-icon-brand",
        "antd-icon-history1",
        "antd-icon-rejected-order-fill",
        "antd-icon-hardware",
        "antd-icon-homepage-ads-fill",
        "antd-icon-help",
        "antd-icon-homepage-ads",
        "antd-icon-good",
        "antd-icon-scenes-fill",
        "antd-icon-Householdappliances",
        "antd-icon-scenes",
        "antd-icon-gift1",
        "antd-icon-similar-product-fill",
        "antd-icon-form",
        "antd-icon-topraning-fill",
        "antd-icon-image-text",
        "antd-icon-consumption",
        "antd-icon-hot",
        "antd-icon-topraning",
        "antd-icon-inspection",
        "antd-icon-gold-supplier",
        "antd-icon-leftbutton",
        "antd-icon-messagecenter-fill",
        "antd-icon-jewelry",
        "antd-icon-quick",
        "antd-icon-ipad",
        "antd-icon-writing",
        "antd-icon-leftarrow",
        "antd-icon-docjpge-fill",
        "antd-icon-integral1",
        "antd-icon-jpge-fill",
        "antd-icon-kitchen",
        "antd-icon-gifjpge-fill",
        "antd-icon-inquiry-template",
        "antd-icon-bmpjpge-fill",
        "antd-icon-link",
        "antd-icon-tifjpge-fill",
        "antd-icon-libra",
        "antd-icon-pngjpge-fill",
        "antd-icon-loading",
        "antd-icon-Hometextile",
        "antd-icon-listing-content",
        "antd-icon-home",
        "antd-icon-lights",
        "antd-icon-sendinquiry-fill",
        "antd-icon-logistics-icon",
        "antd-icon-comments-fill",
        "antd-icon-messagecenter",
        "antd-icon-account-fill",
        "antd-icon-mobile-phone",
        "antd-icon-feed-logo-fill",
        "antd-icon-manage-order",
        "antd-icon-feed-logo",
        "antd-icon-move",
        "antd-icon-home-fill",
        "antd-icon-Moneymanagement",
        "antd-icon-add-select",
        "antd-icon-namecard",
        "antd-icon-sami-select",
        "antd-icon-map",
        "antd-icon-camera",
        "antd-icon-Newuserzone",
        "antd-icon-arrow-down",
        "antd-icon-multi-language",
        "antd-icon-account",
        "antd-icon-office",
        "antd-icon-comments",
        "antd-icon-notice",
        "antd-icon-cart-Empty1",
        "antd-icon-ontimeshipment",
        "antd-icon-favorites",
        "antd-icon-office-supplies",
        "antd-icon-order",
        "antd-icon-password",
        "antd-icon-search",
        "antd-icon-Notvisible1",
        "antd-icon-trade-assurance",
        "antd-icon-operation",
        "antd-icon-usercenter1",
        "antd-icon-packaging",
        "antd-icon-tradingdata",
        "antd-icon-online-tracking",
        "antd-icon-microphone",
        "antd-icon-packing-labeling",
        "antd-icon-txt",
        "antd-icon-phone",
        "antd-icon-xlsx",
        "antd-icon-pic1",
        "antd-icon-banzhengfuwu",
        "antd-icon-pin",
        "antd-icon-cangku",
        "antd-icon-play1",
        "antd-icon-daibancaishui",
        "antd-icon-logistic-logo",
        "antd-icon-jizhuangxiang",
        "antd-icon-print",
        "antd-icon-jiaobiao",
        "antd-icon-product",
        "antd-icon-kehupandian",
        "antd-icon-machinery",
        "antd-icon-dongtai",
        "antd-icon-process",
        "antd-icon-daikuan",
        "antd-icon-prompt",
        "antd-icon-shengyijing",
        "antd-icon-QRcode1",
        "antd-icon-jiehui",
        "antd-icon-reeor",
        "antd-icon-fencengpeizhi",
        "antd-icon-reduce",
        "antd-icon-shenqingjilu",
        "antd-icon-Non-staplefood",
        "antd-icon-shangchuanbeiandanzheng",
        "antd-icon-rejected-order",
        "antd-icon-shangchuan",
        "antd-icon-resonserate",
        "antd-icon-kehuquanyi",
        "antd-icon-remind",
        "antd-icon-suoxiao",
        "antd-icon-responsetime",
        "antd-icon-quanyipeizhi",
        "antd-icon-return",
        "antd-icon-shuangshen",
        "antd-icon-paylater",
        "antd-icon-tongguan",
        "antd-icon-rising1",
        "antd-icon-tuishui",
        "antd-icon-Rightarrow",
        "antd-icon-tongguanshuju",
        "antd-icon-rmb1",
        "antd-icon-kuaidiwuliu",
        "antd-icon-RFQ-logo",
        "antd-icon-wuliuchanpin",
        "antd-icon-save",
        "antd-icon-waihuishuju",
        "antd-icon-scanning",
        "antd-icon-xinxibar_shouji",
        "antd-icon-security",
        "antd-icon-xinwaizongyewu",
        "antd-icon-salescenter",
        "antd-icon-wuliudingdan",
        "antd-icon-seleted",
        "antd-icon-zhongjianren",
        "antd-icon-searchcart",
        "antd-icon-xinxibar_zhanghu",
        "antd-icon-raw",
        "antd-icon-yidatong",
        "antd-icon-service",
        "antd-icon-zhuanyequanwei",
        "antd-icon-share",
        "antd-icon-zhanghucaozuo",
        "antd-icon-signboard",
        "antd-icon-xuanzhuandu",
        "antd-icon-shuffling-banner",
        "antd-icon-tuishuirongzi",
        "antd-icon-Rightbutton",
        "antd-icon-AddProducts",
        "antd-icon-sorting",
        "antd-icon-ziyingyewu",
        "antd-icon-sound-Mute",
        "antd-icon-addcell",
        "antd-icon-Similarproducts",
        "antd-icon-background-color",
        "antd-icon-sound-filling",
        "antd-icon-cascades",
        "antd-icon-suggest",
        "antd-icon-beijing",
        "antd-icon-stop",
        "antd-icon-bold",
        "antd-icon-success",
        "antd-icon-zijin",
        "antd-icon-supplier-features",
        "antd-icon-eraser",
        "antd-icon-switch",
        "antd-icon-centeralignment",
        "antd-icon-survey",
        "antd-icon-click",
        "antd-icon-template",
        "antd-icon-aspjiesuan",
        "antd-icon-text",
        "antd-icon-flag",
        "antd-icon-suspended",
        "antd-icon-falg-fill",
        "antd-icon-task-management",
        "antd-icon-Fee",
        "antd-icon-tool",
        "antd-icon-filling",
        "antd-icon-Top",
        "antd-icon-Foreigncurrency",
        "antd-icon-smile",
        "antd-icon-guanliyuan",
        "antd-icon-textile-products",
        "antd-icon-language",
        "antd-icon-tradealert",
        "antd-icon-leftalignment",
        "antd-icon-topsales",
        "antd-icon-extra-inquiries",
        "antd-icon-tradingvolume",
        "antd-icon-Italic",
        "antd-icon-training",
        "antd-icon-pcm",
        "antd-icon-upload",
        "antd-icon-reducecell",
        "antd-icon-RFQ-word",
        "antd-icon-rightalignment",
        "antd-icon-viewlarger",
        "antd-icon-pointerleft",
        "antd-icon-viewgallery",
        "antd-icon-subscript",
        "antd-icon-vehivles",
        "antd-icon-square",
        "antd-icon-trust",
        "antd-icon-superscript",
        "antd-icon-warning",
        "antd-icon-tag-subscript",
        "antd-icon-warehouse",
        "antd-icon-danjuzhuanhuan",
        "antd-icon-shoes",
        "antd-icon-Transfermoney",
        "antd-icon-video",
        "antd-icon-under-line",
        "antd-icon-viewlist",
        "antd-icon-xiakuangxian",
        "antd-icon-set",
        "antd-icon-shouqi",
        "antd-icon-store",
        "antd-icon-zhankai",
        "antd-icon-tool-hardware",
        "antd-icon-tongxunlu",
        "antd-icon-vs",
        "antd-icon-yiguanzhugongyingshang",
        "antd-icon-toy",
        "antd-icon-goumaipianhao",
        "antd-icon-sport",
        "antd-icon-Subscribe",
        "antd-icon-creditcard",
        "antd-icon-becomeagoldsupplier",
        "antd-icon-contacts",
        "antd-icon-new",
        "antd-icon-checkstand",
        "antd-icon-free",
        "antd-icon-aviation",
        "antd-icon-cad-fill",
        "antd-icon-Daytimemode",
        "antd-icon-robot",
        "antd-icon-infantmom",
        "antd-icon-inspection1",
        "antd-icon-discounts",
        "antd-icon-invoice",
        "antd-icon-insurance",
        "antd-icon-nightmode",
        "antd-icon-usercenter",
        "antd-icon-unlock",
        "antd-icon-vip",
        "antd-icon-wallet",
        "antd-icon-landtransportation",
        "antd-icon-voice",
        "antd-icon-exchangerate",
        "antd-icon-contacts-fill",
        "antd-icon-add-account1",
        "antd-icon-years-fill",
        "antd-icon-add-cart-fill",
        "antd-icon-add-fill",
        "antd-icon-all-fill1",
        "antd-icon-ashbin-fill",
        "antd-icon-calendar-fill",
        "antd-icon-bad-fill",
        "antd-icon-bussiness-man-fill",
        "antd-icon-atm-fill",
        "antd-icon-cart-full-fill",
        "antd-icon-cart-Empty-fill",
        "antd-icon-cameraswitching-fill",
        "antd-icon-atm-away-fill",
        "antd-icon-certified-supplier-fill",
        "antd-icon-calculator-fill",
        "antd-icon-clock-fill",
        "antd-icon-ali-clould-fill",
        "antd-icon-color-fill",
        "antd-icon-coupons-fill",
        "antd-icon-cecurity-protection-fill",
        "antd-icon-credit-level-fill",
        "antd-icon-auto",
        "antd-icon-default-template-fill",
        "antd-icon-all",
        "antd-icon-CurrencyConverter-fill",
        "antd-icon-bussiness-man",
        "antd-icon-Customermanagement-fill",
        "antd-icon-component",
        "antd-icon-discounts-fill",
        "antd-icon-code",
        "antd-icon-Daytimemode-fill",
        "antd-icon-copy",
        "antd-icon-exl-fill",
        "antd-icon-dollar",
        "antd-icon-cry-fill",
        "antd-icon-history",
        "antd-icon-email-fill",
        "antd-icon-editor",
        "antd-icon-filter-fill",
        "antd-icon-data",
        "antd-icon-folder-fill",
        "antd-icon-gift",
        "antd-icon-feeds-fill",
        "antd-icon-integral",
        "antd-icon-gold-supplie-fill",
        "antd-icon-nav-list",
        "antd-icon-form-fill",
        "antd-icon-pic",
        "antd-icon-camera-fill",
        "antd-icon-Notvisible",
        "antd-icon-good-fill",
        "antd-icon-play",
        "antd-icon-image-text-fill",
        "antd-icon-rising",
        "antd-icon-inspection-fill",
        "antd-icon-QRcode",
        "antd-icon-hot-fill",
        "antd-icon-rmb",
        "antd-icon-company-fill",
        "antd-icon-similar-product",
        "antd-icon-discount-fill",
        "antd-icon-Exportservices",
        "antd-icon-insurance-fill",
        "antd-icon-sendinquiry",
        "antd-icon-inquiry-template-fill",
        "antd-icon-all-fill",
        "antd-icon-leftbutton-fill",
        "antd-icon-favorites-fill",
        "antd-icon-integral-fill1",
        "antd-icon-integral-fill",
        "antd-icon-help1",
        "antd-icon-namecard-fill",
        "antd-icon-listing-content-fill",
        "antd-icon-pic-fill",
        "antd-icon-logistic-logo-fill",
        "antd-icon-play-fill",
        "antd-icon-Moneymanagement-fill",
        "antd-icon-prompt-fill",
        "antd-icon-manage-order-fill",
        "antd-icon-stop-fill",
        "antd-icon-multi-language-fill",
        "antd-icon-column",
        "antd-icon-logistics-icon-fill",
        "antd-icon-add-account",
        "antd-icon-Newuserzone-fill",
        "antd-icon-column1",
        "antd-icon-nightmode-fill",
        "antd-icon-add",
        "antd-icon-office-supplies-fill",
        "antd-icon-agriculture",
        "antd-icon-notice-fill",
        "antd-icon-years",
        "antd-icon-mute",
        "antd-icon-add-cart",
        "antd-icon-order-fill",
        "antd-icon-arrow-right",
        "antd-icon-password1",
        "antd-icon-arrow-lift",
        "antd-icon-map1",
        "antd-icon-apparel",
        "antd-icon-paylater-fill"
      ],
      copyText: "",
    }
  },
  mounted(){},
  methods: {
    handleCopyIcon(index, event) {
      const copyText = `<i class='${this.Icons[index]}'></i>`;
      this.copyText = copyText;
      clip(copyText, event);
    },
  }
};
</script>

<style lang="less" scoped>
  .iconHover{
    :hover{
      cursor: pointer;
      background: #f0f0f0;
    }
  }
  .iconList{
    display: flex;
    justify-content: center;
    align-items: center;
    i{
      font-size: 24px;
    }
  }
</style>