vue自訂表徵圖

一.表徵圖庫 1.1表徵圖引用 表徵圖引用可適用於移動端和web端,本文主要講述web端的離線引用,其它平台可參考官方介紹. 1.1.1表徵圖下載

註冊登入

建立項目

項目設定

圖上紅圈處的引用名稱為了防止與本地項目中的其它引用衝突,可自行設定 搜尋並添加你需要的表徵圖

將表徵圖添加到你的項目中

進入剛才添加的項目,可以看到官方為我們提供了線上引用,但是為了減輕項目負載,我們這邊使用本地引用.

下載至本地並解壓

然後複製到項目中(assets檔案夾中建立了一個icon檔案夾);
其中有一些demo和範例可以不用匯入項目，但是為了給其他人一個參考最好全部拷入.

開啟icnfont.css檔案,設定表徵圖屬性及引用標籤.

.iconfont {  font-family:"iconfont" !important;  font-size:55px;  font-style:normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}//添加引用標籤,icon-test為我們一開始建立項目時的FontClass/Symbol首碼[class^="icon-test"], [class*=" icon-test"] {  font-family:"iconfont" !important;  /* 以下內容參照第三方表徵圖庫本身的規則 */  font-size: 66px;  font-style:normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}//設定指定表徵圖屬性.icon-test-icon-test10 {  width: 1em; height: 1em;  vertical-align: -0.15em;  fill: currentColor;  overflow: hidden;}

1.1.2頁面引用

①在你的xxx.vue頁面引入css檔案和js檔案

import '@/assets/icon/iconfont.css'import '@/assets/icon/iconfont.js'

Unicode與Font class方式不支援多色表徵圖;Symbol方式支援多色表徵圖所以這邊引入了js檔案.表徵圖詳情及設定可去對應的.css檔案修改.

<div>    <i class="iconfont">&#xe615;</i>    <i class="iconfont icon-test-icon-test2"></i>    <el-button type="primary" class="icon-test-icon-test17" @click="" style="padding:6px 4px;width: 70px"></el-button>    <el-button type="primary" class="icon-test-icon-test14" @click="" style="padding:6px 4px;width: 70px"></el-button>    <i class="iconfont icon-test-icon-test10"></i>    <svg class="icon-test-icon-test10" aria-hidden="true">        <use xlink:href="#icon-test-icon-test10"></use>    </svg>    <svg class="icon-test-icon-test8" aria-hidden="true">         <use xlink:href="#icon-test-icon-test8"></use>    </svg></div>

Unicode 方式:

<i class="iconfont">&#xe615;</i>

Font class方式:

<i class="iconfont icon-test-icon-test2"></i>

Symbol方式:

<svg class="icon-test-icon-test10" aria-hidden="true">    <use xlink:href="#icon-test-icon-test10"></use></svg>

效果圖:

1.1.3製作與上傳 由於本人不是專業的UI,對表徵圖製作這塊並未做過多深入研究,想瞭解的朋友可以參考官網. 注:本文所有表徵圖來源:阿里巴巴向量表徵圖庫