iconfont-tools 原理
國際慣例，先上圖：
概要
一般我們在開發(fā)的時候抚吠，都是采用 iconfont 來管理項(xiàng)目里的圖標(biāo)冀痕，方便快捷。但是當(dāng)我需要將項(xiàng)目遷移的小程序的時候萝毛，就遇到了很多問项阴。iconfont 字體怎么引入？不支持 dom 操作笆包，字體怎么操作环揽？彩色字體怎么使用？
各種問題困擾著我們庵佣，我們可能會有各種折中的方案歉胶，比如線上字體 CDN 引入，字體 base64秧了，雪碧圖等等跨扮。
全新的方式 iconfont-tools 快速生成彩色圖標(biāo)庫
https://github.com/HuaRongSAO/iconfont-tools
歡迎點(diǎn)贊
npm i -g iconfont-tools
cd project/asset/font_hiytajitqeu // 進(jìn)入圖標(biāo)文件所在文件夾
iconfont-tools // 生成小程序?qū)Ｓ梦募?生成目標(biāo)文件：
.
└── font_hiytajitqeu
├── demo.css
├── demo_index.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js
├── iconfont.svg
├── iconfont.ttf
├── iconfont.woff
└── iconfont.woff2
├── iconfont-weapp # 目標(biāo)文件夾
│ ├── icon # 生成原生的icon組件庫
│ │ ├── icon.js
│ │ ├── icon.json
│ │ ├── icon.wxml
│ │ └── icon.wxss
│ ├── iconfont-weapp-icon.css # 包含彩色圖標(biāo)的css
│ └── iconfont-weapp-icon.wxss # 包含彩色圖標(biāo)的wxss
最后：
- 方式一：引入小程序項(xiàng)目： @import '/your/path/font_hiytajitqeu/iconfont-weapp/iconfont-weapp-icon.wxss'
- 方式二：注冊組件："icon": "/your/path/font_hiytajitqeu/iconfont-weapp/icon"
其他小程序框架，taro，wepy衡创，mpvue 等等帝嗡，可以直接通過引入iconfont-weapp-icon.css文件，實(shí)現(xiàn)璃氢。
原理
實(shí)現(xiàn)原理主要是通過 SVG 作為背景圖進(jìn)行實(shí)現(xiàn)的哟玷。
一般我們實(shí)現(xiàn)一張圖標(biāo)的實(shí)現(xiàn)方式是通過 base64 作為背景圖實(shí)現(xiàn)實(shí)現(xiàn)的如下圖
.icon {
width: 20px;
height: 20px;
background: url(data:image/svg+xml;base64, PHN2ZyB2ZXJza..) no-repeat center;
background-size: 100%;
}
但是通過 base64 位生成背景圖，有個小問題一也，主要是因?yàn)?base64 算法的問題巢寡，會增加代碼的數(shù)量從而增加文件大小。
簡單原理：大概就是字符串的 3 個字符轉(zhuǎn)化成 4 位字符
通過 base64 加密后會使文件大小增加 2,30%
于是就有了新的引入方式：
SVG 直接內(nèi)聯(lián)
.icon {
width: 20px;
height: 20px;
background: url(<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no-repeat center;
background-size: 100%;
}
這不就很完美了嘛椰苟！
可惜在存在兼容性問題抑月，在 IE 就可能無法線上了。
那問題出在哪舆蝴？
"谦絮，%，#洁仗，{层皱，}，<赠潦，>這些特殊符號叫胖。
找到了問題，那解決方式就有了她奥，encodeURIComponent對數(shù)據(jù)進(jìn)行 url 編碼瓮增。
.icon {
width: 20px;
height: 20px;
background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20versi...)
no-repeat center;
background-size: 100%;
}
這樣 svg 的顯示方案就做好了。
從 iconfont 中提取我們需要 SVG
下載解壓完畢的 iconfont 一般長這樣
其中 svg 的代碼哩俭，在 iconfont.js 和 iconfont.svg 兩個文件
通過詳細(xì)對比和仔細(xì)閱讀源碼钉赁，發(fā)現(xiàn)答案就在 iconfont.js 里面
圖中畫紅框的位置，就是 svg 的全部源碼了携茂。
那么實(shí)現(xiàn)方式就很明朗了
找到對應(yīng)的svg標(biāo)簽 ==> 提取標(biāo)簽 ===> encodeURIComponent 編碼標(biāo)簽 ==> 生成css文件
好的大功告成你踩！
那么問題來，這么牛逼工具怎么下載?
https://github.com/HuaRongSAO/iconfont-tools
蟹蟹
相關(guān)閱讀：
張鑫旭:CSS 中內(nèi)聯(lián) SVG 圖片
base64
