Vue中使用Iconfont并全部展示出来～

这几天在做动态路由菜单(过两天总结出博客)，想法是希望通过一个页面前端可以直接配置路由及对应的icon，故而做了一个icon的集成页面，在这个页面中可以看见项目中的所有icon，并且希望通过视觉可以快速定位到自己想要的icon从而直接使用。
效果图如下👇 直接点击某个icon将代码复印到粘贴板上。

一、iconfont的三种使用方式

Unixode
Font-class
Symbol

这里使用的是第三种 Symbol方式，区别于unicode与font-class，使用symbol需要引入的是js文件，此方法生成的图标可以不用发送woff|eot|ttf|这些很多个字体库请求了，兼具前两种方法的优点，是真正的矢量图标，所以推荐使用。基础用法这里不过多解释了，自行百度。

将从阿里图库中下载的文件中这两个文件移入项目中

二、封装icon组件

组件模版 iconFont.vue

<template>
  <svg class="svg-icon" :style="styles" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "icon-svg",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 18
    },
    color: {
      type: String,
      default: "currentColor"
    },
    otherStyle: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      styles: {
        "font-size": this.size + "px",
        fill: this.color,
        ...this.inputStyle
      }
    };
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    }
  }
};
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

全局引入

import 'assets/icon/iconfont.js'
import IconSvg from 'components/iconFont.vue'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

使用

<icon-svg icon-class="lishi" size="30" />

三、将所有的icon展示到页面中

<template>
  <ul class="icon_ul">
    <li v-for="item in icons" :key="item" @click="copeText(item)">
      <div class="icon_svg">
        <icon-svg :icon-class="item" :size="30" />
      </div>
      <p class="title">{{item.replace(/\"/g, "")}}</p>
    </li>
  </ul>
</template>

<script>
// 导入从阿里图库中下的svg文件
let url = require("assets/icon/iconfont.svg");

function getText(url) {
  let promise = new Promise(function(resolve, reject) {
    let client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "text";
    client.setRequestHeader("Accept", "text/plan");
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
  return promise;
}

// 复制到粘贴板 后面会列出写法
import { cope } from "utils/cope.js";

export default {
  name: "icon",
  data() {
    return {
      icons: []
    };
  },
  mounted() {
    getText(url).then(data => {
      let txt = data;
      if (!txt || txt === "") return;
      let iconArr = txt.match(/glyph-name="(\S*)/gm);
      iconArr.forEach(v => {
        this.icons.push(v.split("=")[1].replace("\"","").replace("\"",""));
      });
    });
  },
  methods: {
    copeText(txt) {
      cope(txt.replace("\"","").replace("\"",""));
    }
  }
};
</script>

<style scoped lang="scss">
.icon_ul {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  li {
    width: 5%;
    background-color: #f9f9f9;
    border: 1px solid #fff;
    padding: 20px 0 10px;
    text-align: center;
    flex: auto;
    cursor: pointer;
    position: relative;
    .icon_svg {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .title {
      display: block;
      text-align: center;
      word-wrap: break-word;
      margin-top: 10px;
      font-size: 12px;
    }
    &:hover {
      color: #fff;
      background-color: #427cf3;
    }
  }
}
</style>

四、封装将文本自动复制剪贴板功能

import {
    Notification
} from 'element-ui';

export const cope = txt => {
    let textArea;
    // 判断是否为ios端
    let isIos = () => {
        let u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
            // return "Android";
            return false
        } else if (u.indexOf('iPhone') > -1) { //苹果手机
            // return "iPhone";
            return true
        } else if (u.indexOf('iPad') > -1) { //iPad
            // return "iPad";
            return false
        } else if (u.indexOf('Windows Phone') > -1) { //winphone手机
            // return "Windows Phone";
            return false
        } else {
            return false
        }
    }

    // 创建文本元素
    let createTextArea = text => {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    // 选择内容
    let selectText = () => {
        var range,
            selection;

        if (isIos()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    // 复制到剪贴板
    let copyToClipboard = () => {
        try {
            if (document.execCommand("Copy")) {
                Notification({
                    title: '成功',
                    message: '复制成功！',
                    type: 'success',
                    duration: "1000"
                });
            } else {
                Notification({
                    title: '失败',
                    message: '复制失败！请手动复制！',
                    type: 'error',
                    duration: "1000"
                });
            }
        } catch (err) {
            Notification({
                title: '失败',
                message: '复制失败！请手动复制！',
                type: 'error',
                duration: "1000"
            });
        }
        document.body.removeChild(textArea);
    }

    createTextArea(txt);
    selectText();
    copyToClipboard();
}