vue引入iconfont圖標(biāo)庫的優(yōu)雅實(shí)戰(zhàn)記錄

更新時(shí)間：2021年06月08日 10:51:29 作者：Kay_

使用組件庫時(shí),圖標(biāo)往往不能滿足需求,所以我們常常需要用到第三方圖標(biāo)庫,這篇文章主要給大家介紹了關(guān)于vue引入iconfont的相關(guān)資料,需要的朋友可以參考下

前言

本文撰寫的初衷是為了向組內(nèi)成員推行使用svg sprites的方式管理項(xiàng)目的圖標(biāo),由于實(shí)際工作中很多項(xiàng)目仍然采用font class的方式,這樣不自覺帶來一個(gè)痛點(diǎn).

當(dāng)項(xiàng)目一期開發(fā)完畢后,過段時(shí)間進(jìn)入到項(xiàng)目二期。新增的開發(fā)需求不可避免的會(huì)增加新的圖標(biāo),而font class需要全量打包圖標(biāo)的字體文件.

哪怕新需求只添加了一個(gè)圖標(biāo),而前端同學(xué)卻要將舊圖標(biāo)和新圖標(biāo)融合后重新打包生成一次字體文件,這樣的結(jié)果讓人無法接受.
svg sprites能完美的解決這一問題.整體思路是先將項(xiàng)目中每一個(gè)圖標(biāo)都生成一個(gè)svg文件與之對(duì)應(yīng),那么有多少個(gè)svg文件就相當(dāng)于對(duì)應(yīng)了多少個(gè)圖標(biāo).

以后如果想新增一個(gè)圖標(biāo),那么只需要添加一個(gè)新svg文件即可.那些已經(jīng)存在的圖標(biāo)和svg文件則不需要再參與進(jìn)來.
本文接下來將以vue3為基礎(chǔ)框架,iconfont為圖標(biāo)庫,一步步實(shí)踐圖標(biāo)引入,使用以及管理的整個(gè)流程.另外在文章的后半部分,還會(huì)介紹一下多主題變色模式下svg圖標(biāo)的相應(yīng)處理.

生成SVG

svg sprites簡(jiǎn)介

svg sprites這項(xiàng)技術(shù)很早就出來了,具體詳情可以點(diǎn)擊查看張?chǎng)涡裨?014年寫的文章未來必?zé)幔篠VG Sprites技術(shù)介紹.

我們這里做一下簡(jiǎn)單介紹就進(jìn)入實(shí)踐階段.svg sprites主要基于兩個(gè)標(biāo)簽元素:<symbol>和<use>.

<symbol>對(duì)元素進(jìn)行分組,它不會(huì)顯示在界面上,相當(dāng)于定義一個(gè)模板.<use>元素用于引用并渲染圖標(biāo).

例如存在以下某個(gè)svg圖標(biāo)(代碼如下),它是一個(gè)愛心的形狀.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</svg>

現(xiàn)在使用symbol標(biāo)簽將上面的path內(nèi)容包裹一層,代碼如下:

<svg>
    <symbol viewBox="0 0 24 24" id="heart">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
    </symbol>
</svg>

接下來把symbol包裹后的代碼放入頁面中(代碼如下),再添加一個(gè)display: none隱藏起來.這就相當(dāng)于在頁面上注冊(cè)了一個(gè)id名為heart的圖標(biāo).

此時(shí)頁面的其他部分就可以引用這個(gè)圖標(biāo),引用方式是在svg標(biāo)簽里面放入一個(gè)use標(biāo)簽,use標(biāo)簽的xlink:href填上要引用的圖標(biāo)id,界面就會(huì)渲染出愛心的形狀.

<body>
    <svg style="display: none;">
        <symbol viewBox="0 0 24 24" id="heart">
            <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
        </symbol>
    </svg>

    <svg>
        <use xlink:href="#heart" rel="external nofollow"   /> <!-- 使用圖標(biāo) -->
    </svg>
</body>

獲取項(xiàng)目圖標(biāo)

前端同學(xué)拿到設(shè)計(jì)圖之后,通常會(huì)整體瀏覽一遍整個(gè)項(xiàng)目需要用到的所有圖標(biāo).

iconfont是阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造的矢量圖標(biāo)庫,里邊包含海量的圖標(biāo)可供前端工程師選擇和使用.

瀏覽器點(diǎn)擊打開 iconfont官網(wǎng) ,選擇好自己的項(xiàng)目中要用到的圖標(biāo),鼠標(biāo)移動(dòng)到圖標(biāo)上點(diǎn)擊添加入庫.

圖標(biāo)收集完后點(diǎn)擊頭部右側(cè)導(dǎo)航欄的購物車,出現(xiàn)彈出框,點(diǎn)擊添加至項(xiàng)目.所有圖標(biāo)確定添加到項(xiàng)目后,頁面會(huì)自動(dòng)跳轉(zhuǎn)到導(dǎo)航欄資源管理--我的項(xiàng)目下的頁面(如下圖).

我們的目標(biāo)是為了生成圖標(biāo)對(duì)應(yīng)的svg文件,這里要做一下設(shè)置.打開上圖中的項(xiàng)目設(shè)置選項(xiàng),彈框打開后如下圖.

彈框字體格式的那一欄,只保留SVG勾選項(xiàng),其他都取消,設(shè)置好后點(diǎn)擊保存按鈕.

頁面此時(shí)會(huì)刷新一遍,然后點(diǎn)擊頁面上的下載至本地的按鈕,將所有圖標(biāo)的svg文件下載下來并解壓,解壓后的文件結(jié)構(gòu)如下圖.

觀察上圖中的文件結(jié)構(gòu),我們發(fā)現(xiàn)所有svg圖標(biāo)的代碼全部都寫在iconfont.svg這一個(gè)文件,這并不符合預(yù)期.我們希望的結(jié)果是一個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)svg文件,而不是像現(xiàn)在一樣全部揉進(jìn)了一個(gè)文件內(nèi).

雖然iconfont目前沒有提供文件分離的機(jī)制,但是我們可以借助其他平臺(tái)幫我們將融合的svg文件分離成單個(gè)文件.

iconmoon 網(wǎng)站便具備這個(gè)功能,它也是一家和iconfont類似的圖標(biāo)庫網(wǎng)站.

瀏覽器點(diǎn)擊打開iconmoon官網(wǎng) ,選擇頂部導(dǎo)航欄右側(cè)的IcoMoon App進(jìn)入圖標(biāo)選擇頁面,點(diǎn)擊頁面頭部導(dǎo)航欄左側(cè)的Imports Icons,將從iconfont下載的iconfont.svg文件導(dǎo)入,結(jié)果如下圖.

在iconfont那一欄可以看到我們導(dǎo)進(jìn)去的圖標(biāo)展現(xiàn)到了頁面上,接下來使用鼠標(biāo)單擊導(dǎo)進(jìn)去的圖標(biāo)將其標(biāo)記為選中,再點(diǎn)擊頁面左下角的Generate SVG & More按鈕(如下圖).

按鈕點(diǎn)擊后頁面跳轉(zhuǎn),此時(shí)依舊點(diǎn)擊左下角的Download按鈕(如下圖)下載圖標(biāo).

下載完成后解壓目錄,解壓后的目錄下出現(xiàn)了SVG文件夾,打開該文件夾會(huì)發(fā)現(xiàn)所有圖標(biāo)都被分離成了單個(gè)文件(如下圖).

項(xiàng)目設(shè)置

svg文件順利獲取到了,現(xiàn)在在vue3項(xiàng)目目錄結(jié)構(gòu)src -> assets文件夾下新建文件夾fonts和子文件夾fonts/svg,將上面生成的所有svg單文件扔到fonts/svg下面.
文件的設(shè)置完成,現(xiàn)在開始項(xiàng)目的配置,讓vue3能順利的管理和使用圖標(biāo).

第一步在項(xiàng)目根目錄下打開命令行運(yùn)行npm i svg-sprite-loader -D.我們之所以要安裝依賴svg-sprite-loader,因?yàn)樗軐vg文件的代碼自動(dòng)塞到一個(gè)個(gè)symbol標(biāo)簽中.
第二步項(xiàng)目根目錄下新建文件vue.config.js,熟悉vue的同學(xué)應(yīng)該知道vue.config.js用來配置構(gòu)建環(huán)境.

vue.config.js詳細(xì)配置參數(shù)可點(diǎn)擊查詢 vue-cli官網(wǎng) ,我們這里只需要知道如何配置svg-sprite-loader就可以.

眾所周知,vue-cli的構(gòu)建環(huán)境基于webpack,我們通過在vue.config.js文件中添加各類配置參數(shù),vue-cli最終會(huì)將這些參數(shù)合并到webpack的配置里.

如此一來我們通過vue.config.js就能達(dá)到配置開發(fā)環(huán)境的目的,而不用直接去操作webpack的配置文件.

當(dāng)前已經(jīng)安裝了依賴svg-sprite-loader,現(xiàn)在要把這個(gè)loader載入到webpack的配置中,通過在vue.config.js填寫下面代碼便可實(shí)現(xiàn).

const resolve = require("path").resolve;

module.exports = {
   chainWebpack(config){
        //引入圖標(biāo)
        config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("icon").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId:'icon-[name]'
        });
   }
}

系統(tǒng)學(xué)習(xí)過webpack配置的同學(xué)很容易能看出來上面代碼的含義,上方代碼首先將rule中設(shè)置的svg規(guī)則排除"./src/assets/fonts/svg"目錄.

然后新增加一條規(guī)則icon將"./src/assets/fonts/svg"目錄包含了進(jìn)去,這個(gè)目錄就是我們存放所有svg文件的文件夾.

代碼接下來使用.use和.loader將svg-sprite-loader配置到項(xiàng)目環(huán)境里,并設(shè)置symbolId為icon-[name].

這里的symbolId關(guān)乎到<symbol>標(biāo)簽生成的id名稱.如果設(shè)置symbolId為icon-[name],那么最后頁面上<use>標(biāo)簽引用圖標(biāo)時(shí)就會(huì)使用icon-加上文件名.

第三步在assets/fonts下面新建文件index.js(文件結(jié)構(gòu)如下圖),并填寫下面兩行代碼.

這兩行代碼主要使用了webpack中的 require.context函數(shù),它可以幫助我們自動(dòng)引入文件模塊.

require.context第一個(gè)參數(shù)代表目標(biāo)文件目錄,第二個(gè)參數(shù)是否應(yīng)用于子文件夾,第三個(gè)參數(shù)匹配文件格式.

const load = require.context("./svg",false,/\.svg$/);
load.keys().map(load);

require.context執(zhí)行完畢后返回結(jié)果load,返回值load本身就是一個(gè)引入模塊的函數(shù),另外它還包含一個(gè)keys屬性,執(zhí)行l(wèi)oad.keys()返回結(jié)果如下.

 ["./arrow.svg", "./arrowon.svg", "./downarrow.svg", "./jiantou.svg", "./trash.svg", "./yiwenicon.svg"]

我們從這里可以看出load.keys()會(huì)返回fonts/svg文件夾下所有圖標(biāo)的相對(duì)路徑,再使用loda函數(shù)去加載這些路徑的文件,這樣便實(shí)現(xiàn)了動(dòng)態(tài)引入fonts/svg文件夾下的所有以.svg結(jié)尾的文件.

那么以后如果出現(xiàn)新增一個(gè)圖標(biāo)的需求,先在iconfont網(wǎng)站上下載單個(gè)svg文件,下載完成后直接丟到fonts/svg文件夾下就可以完成自動(dòng)引入了.

最后一步在項(xiàng)目的入口文件main.js調(diào)用第三步新建的index.js,執(zhí)行所有svg文件的自動(dòng)引入(代碼如下).

import { createApp } from 'vue';
import App from './App.vue'; // 根組件
import "@/assets/fonts/index"; // 執(zhí)行自動(dòng)引入
import router from '@/router/index'; // 路由

createApp(App).use(router).mount('#app');

通過以上四步基本完成了項(xiàng)目的配置,整個(gè)運(yùn)行過程可以做一下簡(jiǎn)單的梳理.

入口文件main.js啟動(dòng)后,執(zhí)行assets/fonts/index.js啟動(dòng)所有svg文件的自動(dòng)引入.

svg-sprite-loader一旦監(jiān)聽到項(xiàng)目中引入了以.svg結(jié)尾的文件,它就會(huì)把這些svg的代碼內(nèi)容全部都封裝到一個(gè)個(gè)<symbol>標(biāo)簽里面(如下圖),再一起插入到頁面文檔中.

這將相當(dāng)于svg-sprite-loader幫助我們將所有的svg圖標(biāo)在頁面上注冊(cè)了,而我們剩下的事情就是在頁面上去引用圖標(biāo)就行了.

圖標(biāo)引用

我們?cè)贖ome主頁下填寫如下代碼(效果圖如下).將#icon-前綴加上fonts/svg下對(duì)應(yīng)的文件名拼接而成的字符串賦予xlink:href屬性,那么就會(huì)渲染出該文件對(duì)應(yīng)的圖標(biāo).

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <svg>
        <use xlink:href="#icon-trash" rel="external nofollow" /> <!-- 使用圖標(biāo) -->
    </svg>
  </div>
</template>

組件引用

頁面上使用svg、use標(biāo)簽引用圖標(biāo)的方式不太優(yōu)雅,我們可以將它改造成組件.

在全局組件文件夾components下新建文件Icon/index.vue.該組件接受兩個(gè)參數(shù)name和color(代碼如下).

參數(shù)name對(duì)應(yīng)要渲染的圖標(biāo)名稱,color為需要渲染的顏色.這里需要格外注意,svg的顏色修改只能通過fill屬性,color屬性賦值時(shí)不奏效.

<template>
    <svg :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow"  rel="external nofollow" />
    </svg>
</template>

<script>
export default {
 props:{
     name:String, //圖標(biāo)名稱
     color:{ // 圖標(biāo)顏色
         type:String,
         deafult:null
     }
 }
}
</script>

現(xiàn)在在Home頁面引用Icon組件(代碼如下).

渲染的圖標(biāo)名稱為trash,顏色為藍(lán)色(效果圖如下).

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <Icon name="trash" color="blue"/><!-- 使用圖標(biāo) -->
  </div>
</template>
<script>
import Icon from "@/components/Icon/index";
export default {
    components:{
        Icon
    }
}
</script>

多主題支持

通過上文講解可知,當(dāng)我們給<svg>標(biāo)簽賦予樣式屬性fill,最終圖標(biāo)的顏色也會(huì)發(fā)生改變,這就為我們完成多主題的開發(fā)需求提供了可能.

我們接下來搭建一個(gè)點(diǎn)擊按鈕在線切換主題的場(chǎng)景,讓svg圖標(biāo)也能隨著主題的變換而改變.

配置多主題樣式

首選在項(xiàng)目文件夾src/assets下新建文件scss/variable.scss,代碼內(nèi)容如下.

代碼定義了三個(gè)主題,分別為默認(rèn)主題、主題1和主題2.每個(gè)主題都定義了自己主題下的圖標(biāo)顏色和背景顏色.

代碼下半部分定義了3個(gè)mixin,分別用來設(shè)置fill、color和background-color屬性.在每一個(gè)mixin里面,不同主題設(shè)置的顏色采用自己主題下的顏色設(shè)置.

// 默認(rèn)主題
$icon-color:red;
$background-color:#fff;

// 主題1
$icon-color1:gray;
$background-color1:#eee;

// 主題2
$icon-color2:blue;
$background-color2:#999;

// 用于給svg填充顏色
@mixin fill {
    fill:$icon-color; //默認(rèn)顏色用默認(rèn)主題
    [data-theme = "theme1"] & { //切換到主題1時(shí)的顏色
        fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //切換到主題2時(shí)的顏色
        fill:$icon-color2;
    }
}
//設(shè)置color屬性
@mixin color {
    color:$icon-color; //默認(rèn)顏色用默認(rèn)主題
    [data-theme = "theme1"] & { //切換到主題1時(shí)的顏色
        color:$icon-color1;
    }
    [data-theme = "theme2"] & { //切換到主題2時(shí)的顏色
        color:$icon-color2;
    }
}

//設(shè)置背景顏色
@mixin backgroudColor {
    background-color:$background-color; //默認(rèn)顏色用默認(rèn)主題
    [data-theme = "theme1"] & { //切換到主題1時(shí)的顏色
        background-color:$background-color1;
    }
    [data-theme = "theme2"] & { //切換到主題2時(shí)的顏色
        background-color:$background-color2;
    }
}

variable.scss是一份全局多主題配置文件,該文件內(nèi)不光可以配置各個(gè)主題下應(yīng)該渲染的顏色,還可以配置字體大小,常用寬高等.

配置文件編寫完成后,現(xiàn)在要將這份文件引用到項(xiàng)目當(dāng)中.編輯器打開根目錄下vue.config.js項(xiàng)目配置文件,新增代碼如下.

const resolve = require("path").resolve;

module.exports = {
   chainWebpack(config){
        //引入圖標(biāo)
        config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("icon").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId:'icon-[name]'
        });
   },
   css: {
    loaderOptions: {
        scss: {
            prependData: `@import "@/assets/scss/variable.scss";`
        },
    }
   } 
}

在module.exports新增配置屬性css,隨后將我們?cè)谏厦婢帉懚嘀黝}配置文件的路徑填入到prependData對(duì)應(yīng)的值.

這里為了避免因?yàn)閟ass版本的不同導(dǎo)致文件引入失敗,統(tǒng)一一下sass和sass-loader的版本.

"sass": "1.26.5",
"sass-loader": "8.0.2",

vue.config.js配置完成后重啟應(yīng)用,variable.scss已經(jīng)全局注入了應(yīng)用.接下來我們?cè)陧撁娼M件內(nèi)不需要使用@import導(dǎo)入主題配置文件,variable.scss里面定義的變量和mixin可以直接拿來使用.

Icon改造

為了讓圖標(biāo)響應(yīng)主題的變換,全局的Icon組件做如下代碼修改.color屬性如果有傳值,那么圖標(biāo)就按照傳入的顏色渲染.如果沒有傳color,那么決定圖標(biāo)顏色的因素變成了類名icon.

<template>
    <svg class="icon" :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow"  rel="external nofollow" />
    </svg>
</template>

<script>
export default {
 props:{
     name:String,
     color:{
         type:String,
         deafult:null
     }
 }
}
</script>

<style lang="scss" scoped>
 .icon{
   @include fill;
 }
</style>

類名 icon 里面調(diào)用 fill對(duì)應(yīng)的mixin,文件variable.scss對(duì)fill的定義如下面代碼.

它最后返回一個(gè)屬性 fill:color.默認(rèn)情況下fill的顏色值為$icon-color.

當(dāng)頁面文檔html標(biāo)簽上的屬性data-theme值變成theme1時(shí),fill渲染的顏色變成了主題1定義的顏色.同理切換到theme2,fill渲染的顏色變成了主題2定義的顏色.

// 用于給svg填充顏色
@mixin fill {
    fill:$icon-color; //默認(rèn)顏色用默認(rèn)主題
    [data-theme = "theme1"] & { //切換到主題1時(shí)的顏色
        fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //切換到主題2時(shí)的顏色
        fill:$icon-color2;
    }
}

我們觀察一下頁面最終生成的dom結(jié)構(gòu)就可以理解上面配置的目的,@mixin最終會(huì)將每個(gè)主題下的樣式都生成了一份(如下圖),這樣一來只要<html>標(biāo)簽的data-theme等于哪個(gè)主題,對(duì)應(yīng)主題的樣式表就會(huì)生效.

頁面校驗(yàn)

Home頁面組件填寫如下代碼.在原來頁面基礎(chǔ)上新增了三個(gè)按鈕默認(rèn)主題、主題1和主題2.

點(diǎn)擊按鈕觸發(fā)updateTheme函數(shù),函數(shù)會(huì)修改<html>標(biāo)簽上data-theme的屬性值,從而實(shí)現(xiàn)了主題切換的功能(效果圖如下).

<template>
  <div class="home">
    <p class="title">Hello world</p>
    <Icon name="trash"/><!-- 使用圖標(biāo) -->
    <button @click="updateTheme()">默認(rèn)主題</button>
    <button @click="updateTheme('theme1')">主題1</button>
    <button @click="updateTheme('theme2')">主題2</button>
  </div>
</template>
<script>
import Icon from "@/components/Icon/index";
export default {
    components:{
        Icon
    },
    methods: {
        updateTheme(name){
            if(name == null){ // 采用默認(rèn)主題
                document.documentElement.removeAttribute("data-theme");
            }else{
                document.documentElement.setAttribute("data-theme",name);
            }
        } 
    },
}
</script>
<style scoped lang="scss">
.home{
    height: 100%;
    @include backgroudColor;
}
.title{
  @include color;
}
</style>

最終效果圖: