VUEはiconfontアイコンを導入する

VUEはsvgを使用する
アイコンを選択

は、Iconfont-アリババベクトルアイコンライブラリで必要なアイコンをプロジェクトに追加し、ローカルにダウンロードします.

がダウンロードするiconfont.jsファイルは自分のプロジェクトにインポートされます.

Iconコンポーネントの定義

// src/common/Icon-svg.vue



export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}

グローバル導入

// main.js    iconfont.js     IconSvg  
import "./assets/icon/iconfont.js";
import IconSvg from './common/Icon-svg.vue';
Vue.component('icon-svg', IconSvg);

使用icon-classを直接使用してiconfontの接尾辞名を記入します.図のラベル名がicon-downloadの場合、downloadを記入します.