Vueアイコンセレクターのサンプルコード

'vue' から Vue をインポートします
import SvgIcon from '@/components/SvgIcon' // svg コンポーネント
 
// グローバルに登録する
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
すべて必須(必須) 

# デフォルト設定を置き換える
 
# マルチパス: true
# 完全: 真
 
プラグイン:
 
  ＃ - 名前
  #
  ＃ または：
  # - 名前: 偽
  # - 名前: true
  #
  ＃ または：
  ＃ - 名前：
  # パラメータ1: 1
  # パラメータ2: 2
 
-属性を削除:
    属性:
      - '埋める'
      - '塗りつぶしルール' 

<テンプレート>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow" />
  </svg>
</テンプレート>
 
<スクリプト>
// ドキュメント: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
'@/utils/validate' から { isExternal } をインポートします。
 
エクスポートデフォルト{
  名前: 'SvgIcon',
  小道具: {
    アイコンクラス: {
      タイプ: 文字列、
      必須: true
    },
    クラス名: {
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  計算: {
    外部() {
      isExternal(this.iconClass) を返します
    },
    アイコン名() {
      `#icon-${this.iconClass}` を返します
    },
    svgクラス() {
      if (this.className) {
        'svg-icon ' + this.className を返します
      } それ以外 {
        'svg-icon' を返す
      }
    },
    スタイル外部アイコン() {
      戻る {
        マスク: `url(${this.iconClass}) 繰り返しなし 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) 繰り返しなし 50% 50%`
      }
    }
  }
}
</スクリプト>
 
<スタイルスコープ>
.svgアイコン{
  幅: 1em;
  高さ: 1em;
  垂直位置合わせ: -0.15em;
  塗りつぶし: 現在の色;
  オーバーフロー: 非表示;
}
 
.svg-外部アイコン {
  背景色: 現在の色;
  マスクサイズ: カバー!重要;
  表示: インラインブロック;
}
</スタイル> 

<!-- @author 鄭傑 -->
<テンプレート>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="アイコン名を入力してください" @clear="filterIcons" @input.native="filterIcons">
      <i slot="サフィックス" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="アイコンリスト">
      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <svg-icon :icon-class="item" style="高さ: 30px;幅: 16px;" />
        <span>{{ アイテム }}</span>
      </div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
'./requireIcons' からアイコンをインポートします
エクスポートデフォルト{
  名前: 'IconSelect',
  データ（） {
    戻る {
      名前： ''、
      iconList: アイコン
    }
  },
  メソッド: {
    フィルターアイコン() {
      this.iconList = アイコン
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    選択されたアイコン(名前) {
      this.$emit('選択された', 名前)
      ドキュメント本体をクリック()
    },
    リセット() {
      this.name = ''
      this.iconList = アイコン
    }
  }
}
</スクリプト>
 
<style rel="stylesheet/scss" lang="scss" スコープ>
  .アイコン本体{
    幅: 100%;
    パディング: 10px;
    .アイコンリスト{
      高さ: 200px;
      overflow-y: スクロール;
      div {
        高さ: 30px;
        行の高さ: 30px;
        下マージン: -5px;
        カーソル: ポインタ;
        幅: 33%;
        フロート: 左;
      }
      スパン {
        表示: インラインブロック;
        垂直位置合わせ: -0.15em;
        塗りつぶし: 現在の色;
        オーバーフロー: 非表示;
      }
    }
  }
</スタイル>