vue引入iconfont圖標庫的優(yōu)雅實戰(zhàn)記錄
前言
本文撰寫的初衷是為了向組內成員推行使用svg sprites的方式管理項目的圖標,由于實際工作中很多項目仍然采用font class的方式,這樣不自覺帶來一個痛點.
當項目一期開發(fā)完畢后,過段時間進入到項目二期。新增的開發(fā)需求不可避免的會增加新的圖標,而font class需要全量打包圖標的字體文件.
哪怕新需求只添加了一個圖標,而前端同學卻要將舊圖標和新圖標融合后重新打包生成一次字體文件,這樣的結果讓人無法接受.
svg sprites能完美的解決這一問題.整體思路是先將項目中每一個圖標都生成一個svg文件與之對應,那么有多少個svg文件就相當于對應了多少個圖標.
以后如果想新增一個圖標,那么只需要添加一個新svg文件即可.那些已經存在的圖標和svg文件則不需要再參與進來.
本文接下來將以vue3為基礎框架,iconfont為圖標庫,一步步實踐圖標引入,使用以及管理的整個流程.另外在文章的后半部分,還會介紹一下多主題變色模式下svg圖標的相應處理.
生成SVG
svg sprites簡介
svg sprites這項技術很早就出來了,具體詳情可以點擊查看張鑫旭在2014年寫的文章未來必熱：SVG Sprites技術介紹.
我們這里做一下簡單介紹就進入實踐階段.svg sprites主要基于兩個標簽元素:<symbol>和<use>.
<symbol>對元素進行分組,它不會顯示在界面上,相當于定義一個模板.<use>元素用于引用并渲染圖標.
例如存在以下某個svg圖標(代碼如下),它是一個愛心的形狀.
<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>
現在使用symbol標簽將上面的path內容包裹一層,代碼如下:
<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包裹后的代碼放入頁面中(代碼如下),再添加一個display: none隱藏起來.這就相當于在頁面上注冊了一個id名為heart的圖標.
此時頁面的其他部分就可以引用這個圖標,引用方式是在svg標簽里面放入一個use標簽,use標簽的xlink:href填上要引用的圖標id,界面就會渲染出愛心的形狀.
<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" /> <!-- 使用圖標 -->
</svg>
</body>
獲取項目圖標
前端同學拿到設計圖之后,通常會整體瀏覽一遍整個項目需要用到的所有圖標.
iconfont是阿里巴巴體驗團隊傾力打造的矢量圖標庫,里邊包含海量的圖標可供前端工程師選擇和使用.
瀏覽器點擊打開 iconfont官網 ,選擇好自己的項目中要用到的圖標,鼠標移動到圖標上點擊添加入庫.
圖標收集完后點擊頭部右側導航欄的購物車,出現彈出框,點擊添加至項目.所有圖標確定添加到項目后,頁面會自動跳轉到導航欄資源管理--我的項目下的頁面(如下圖).
我們的目標是為了生成圖標對應的svg文件,這里要做一下設置.打開上圖中的項目設置選項,彈框打開后如下圖.
彈框字體格式的那一欄,只保留SVG勾選項,其他都取消,設置好后點擊保存按鈕.
頁面此時會刷新一遍,然后點擊頁面上的下載至本地的按鈕,將所有圖標的svg文件下載下來并解壓,解壓后的文件結構如下圖.
觀察上圖中的文件結構,我們發(fā)現所有svg圖標的代碼全部都寫在iconfont.svg這一個文件,這并不符合預期.我們希望的結果是一個圖標對應一個svg文件,而不是像現在一樣全部揉進了一個文件內.
雖然iconfont目前沒有提供文件分離的機制,但是我們可以借助其他平臺幫我們將融合的svg文件分離成單個文件.
iconmoon 網站便具備這個功能,它也是一家和iconfont類似的圖標庫網站.
瀏覽器點擊打開iconmoon官網 ,選擇頂部導航欄右側的IcoMoon App進入圖標選擇頁面,點擊頁面頭部導航欄左側的Imports Icons,將從iconfont下載的iconfont.svg文件導入,結果如下圖.
在iconfont那一欄可以看到我們導進去的圖標展現到了頁面上,接下來使用鼠標單擊導進去的圖標將其標記為選中,再點擊頁面左下角的Generate SVG & More按鈕(如下圖).
按鈕點擊后頁面跳轉,此時依舊點擊左下角的Download按鈕(如下圖)下載圖標.
下載完成后解壓目錄,解壓后的目錄下出現了SVG文件夾,打開該文件夾會發(fā)現所有圖標都被分離成了單個文件(如下圖).
項目設置
svg文件順利獲取到了,現在在vue3項目目錄結構src -> assets文件夾下新建文件夾fonts和子文件夾fonts/svg,將上面生成的所有svg單文件扔到fonts/svg下面.
文件的設置完成,現在開始項目的配置,讓vue3能順利的管理和使用圖標.
- 第一步在項目根目錄下打開命令行運行npm i svg-sprite-loader -D.我們之所以要安裝依賴svg-sprite-loader,因為它能將svg文件的代碼自動塞到一個個symbol標簽中.
- 第二步項目根目錄下新建文件vue.config.js,熟悉vue的同學應該知道vue.config.js用來配置構建環(huán)境.
vue.config.js詳細配置參數可點擊查詢 vue-cli官網 ,我們這里只需要知道如何配置svg-sprite-loader就可以.
眾所周知,vue-cli的構建環(huán)境基于webpack,我們通過在vue.config.js文件中添加各類配置參數,vue-cli最終會將這些參數合并到webpack的配置里.
如此一來我們通過vue.config.js就能達到配置開發(fā)環(huán)境的目的,而不用直接去操作webpack的配置文件.
當前已經安裝了依賴svg-sprite-loader,現在要把這個loader載入到webpack的配置中,通過在vue.config.js填寫下面代碼便可實現.
const resolve = require("path").resolve;
module.exports = {
chainWebpack(config){
//引入圖標
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)學習過webpack配置的同學很容易能看出來上面代碼的含義,上方代碼首先將rule中設置的svg規(guī)則排除"./src/assets/fonts/svg"目錄.
然后新增加一條規(guī)則icon將"./src/assets/fonts/svg"目錄包含了進去,這個目錄就是我們存放所有svg文件的文件夾.
代碼接下來使用.use和.loader將svg-sprite-loader配置到項目環(huán)境里,并設置symbolId為icon-[name].
這里的symbolId關乎到<symbol>標簽生成的id名稱.如果設置symbolId為icon-[name],那么最后頁面上<use>標簽引用圖標時就會使用icon-加上文件名.
- 第三步在assets/fonts下面新建文件index.js(文件結構如下圖),并填寫下面兩行代碼.
這兩行代碼主要使用了webpack中的 require.context函數,它可以幫助我們自動引入文件模塊.
require.context第一個參數代表目標文件目錄,第二個參數是否應用于子文件夾,第三個參數匹配文件格式.
const load = require.context("./svg",false,/\.svg$/);
load.keys().map(load);
require.context執(zhí)行完畢后返回結果load,返回值load本身就是一個引入模塊的函數,另外它還包含一個keys屬性,執(zhí)行l(wèi)oad.keys()返回結果如下.
["./arrow.svg", "./arrowon.svg", "./downarrow.svg", "./jiantou.svg", "./trash.svg", "./yiwenicon.svg"]
我們從這里可以看出load.keys()會返回fonts/svg文件夾下所有圖標的相對路徑,再使用loda函數去加載這些路徑的文件,這樣便實現了動態(tài)引入fonts/svg文件夾下的所有以.svg結尾的文件.
那么以后如果出現新增一個圖標的需求,先在iconfont網站上下載單個svg文件,下載完成后直接丟到fonts/svg文件夾下就可以完成自動引入了.
最后一步在項目的入口文件main.js調用第三步新建的index.js,執(zhí)行所有svg文件的自動引入(代碼如下).
import { createApp } from 'vue';
import App from './App.vue'; // 根組件
import "@/assets/fonts/index"; // 執(zhí)行自動引入
import router from '@/router/index'; // 路由
createApp(App).use(router).mount('#app');
通過以上四步基本完成了項目的配置,整個運行過程可以做一下簡單的梳理.
入口文件main.js啟動后,執(zhí)行assets/fonts/index.js啟動所有svg文件的自動引入.
svg-sprite-loader一旦監(jiān)聽到項目中引入了以.svg結尾的文件,它就會把這些svg的代碼內容全部都封裝到一個個<symbol>標簽里面(如下圖),再一起插入到頁面文檔中.
這將相當于svg-sprite-loader幫助我們將所有的svg圖標在頁面上注冊了,而我們剩下的事情就是在頁面上去引用圖標就行了.
圖標引用
我們在Home主頁下填寫如下代碼(效果圖如下).將#icon-前綴加上fonts/svg下對應的文件名拼接而成的字符串賦予xlink:href屬性,那么就會渲染出該文件對應的圖標.
<template>
<div class="home">
<p class="title">Hello world</p>
<svg>
<use xlink:href="#icon-trash" rel="external nofollow" /> <!-- 使用圖標 -->
</svg>
</div>
</template>
組件引用
頁面上使用svg、use標簽引用圖標的方式不太優(yōu)雅,我們可以將它改造成組件.
在全局組件文件夾components下新建文件Icon/index.vue.該組件接受兩個參數name和color(代碼如下).
參數name對應要渲染的圖標名稱,color為需要渲染的顏色.這里需要格外注意,svg的顏色修改只能通過fill屬性,color屬性賦值時不奏效.
<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, //圖標名稱
color:{ // 圖標顏色
type:String,
deafult:null
}
}
}
</script>
現在在Home頁面引用Icon組件(代碼如下).
渲染的圖標名稱為trash,顏色為藍色(效果圖如下).
<template>
<div class="home">
<p class="title">Hello world</p>
<Icon name="trash" color="blue"/><!-- 使用圖標 -->
</div>
</template>
<script>
import Icon from "@/components/Icon/index";
export default {
components:{
Icon
}
}
</script>
多主題支持
通過上文講解可知,當我們給<svg>標簽賦予樣式屬性fill,最終圖標的顏色也會發(fā)生改變,這就為我們完成多主題的開發(fā)需求提供了可能.
我們接下來搭建一個點擊按鈕在線切換主題的場景,讓svg圖標也能隨著主題的變換而改變.
配置多主題樣式
首選在項目文件夾src/assets下新建文件scss/variable.scss,代碼內容如下.
代碼定義了三個主題,分別為默認主題、主題1和主題2.每個主題都定義了自己主題下的圖標顏色和背景顏色.
代碼下半部分定義了3個mixin,分別用來設置fill、color和background-color屬性.在每一個mixin里面,不同主題設置的顏色采用自己主題下的顏色設置.
// 默認主題
$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; //默認顏色用默認主題
[data-theme = "theme1"] & { //切換到主題1時的顏色
fill:$icon-color1;
}
[data-theme = "theme2"] & { //切換到主題2時的顏色
fill:$icon-color2;
}
}
//設置color屬性
@mixin color {
color:$icon-color; //默認顏色用默認主題
[data-theme = "theme1"] & { //切換到主題1時的顏色
color:$icon-color1;
}
[data-theme = "theme2"] & { //切換到主題2時的顏色
color:$icon-color2;
}
}
//設置背景顏色
@mixin backgroudColor {
background-color:$background-color; //默認顏色用默認主題
[data-theme = "theme1"] & { //切換到主題1時的顏色
background-color:$background-color1;
}
[data-theme = "theme2"] & { //切換到主題2時的顏色
background-color:$background-color2;
}
}
variable.scss是一份全局多主題配置文件,該文件內不光可以配置各個主題下應該渲染的顏色,還可以配置字體大小,常用寬高等.
配置文件編寫完成后,現在要將這份文件引用到項目當中.編輯器打開根目錄下vue.config.js項目配置文件,新增代碼如下.
const resolve = require("path").resolve;
module.exports = {
chainWebpack(config){
//引入圖標
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,隨后將我們在上面編寫多主題配置文件的路徑填入到prependData對應的值.
這里為了避免因為sass版本的不同導致文件引入失敗,統(tǒng)一一下sass和sass-loader的版本.
"sass": "1.26.5", "sass-loader": "8.0.2",
vue.config.js配置完成后重啟應用,variable.scss已經全局注入了應用.接下來我們在頁面組件內不需要使用@import導入主題配置文件,variable.scss里面定義的變量和mixin可以直接拿來使用.
Icon改造
為了讓圖標響應主題的變換,全局的Icon組件做如下代碼修改.color屬性如果有傳值,那么圖標就按照傳入的顏色渲染.如果沒有傳color,那么決定圖標顏色的因素變成了類名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 里面調用 fill對應的mixin,文件variable.scss對fill的定義如下面代碼.
它最后返回一個屬性 fill:color.默認情況下fill的顏色值為$icon-color.
當頁面文檔html標簽上的屬性data-theme值變成theme1時,fill渲染的顏色變成了主題1定義的顏色.同理切換到theme2,fill渲染的顏色變成了主題2定義的顏色.
// 用于給svg填充顏色
@mixin fill {
fill:$icon-color; //默認顏色用默認主題
[data-theme = "theme1"] & { //切換到主題1時的顏色
fill:$icon-color1;
}
[data-theme = "theme2"] & { //切換到主題2時的顏色
fill:$icon-color2;
}
}
我們觀察一下頁面最終生成的dom結構就可以理解上面配置的目的,@mixin最終會將每個主題下的樣式都生成了一份(如下圖),這樣一來只要<html>標簽的data-theme等于哪個主題,對應主題的樣式表就會生效.
頁面校驗
Home頁面組件填寫如下代碼.在原來頁面基礎上新增了三個按鈕默認主題、主題1和主題2.
點擊按鈕觸發(fā)updateTheme函數,函數會修改<html>標簽上data-theme的屬性值,從而實現了主題切換的功能(效果圖如下).
<template>
<div class="home">
<p class="title">Hello world</p>
<Icon name="trash"/><!-- 使用圖標 -->
<button @click="updateTheme()">默認主題</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){ // 采用默認主題
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>
最終效果圖:
尾言
上文介紹的多主題實現方案操作起來非常簡單,但不適合用于大型復雜的項目.
試想一下,如果一個大型項目包含十幾種主題,而每一類主題下的css代碼十分龐大,一次性將所有主題下的樣式代碼全部注入到應用里是不合適的.
最佳實踐應該是用戶點擊切換某一類主題時,就按需加載那一類主題的樣式,再注入到應用中渲染,這樣可以極大的提升整體性能.最佳實踐方式可以參考社區(qū)內關于多主題切換的文章.
到此這篇關于vue引入iconfont圖標庫的文章就介紹到這了,更多相關vue引入iconfont內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關于vue實現多個tab標簽頁的切換與關閉的相關資料,使用vue.js實現tab切換很簡單,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10
vue2.0采用了虛擬DOM來代替對真實DOM的操作，最后通過某種機制來完成對真實DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue通過style或者class改變樣式的實例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例
這篇文章主要為大家介紹了Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vue中的keep-alive的相關資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue3?echarts組件化及使用hook進行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue 彈框產生的滾動穿透問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了require.js+vue+vue-router+vue-resource開發(fā)微信上傳圖片組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue組件傳值的實現方式,結合實例形式總結分析了vue.js組建傳值的三種實現方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下2020-02-02