iconfont-tools 原理

國際慣例，先上圖：

iconfont-tools.png

概要

一般我們在開發(fā)的時候，都是采用 iconfont 來管理項目里的圖標，方便快捷。但是當我需要將項目遷移的小程序的時候，就遇到了很多問。iconfont 字體怎么引入？不支持 dom 操作，字體怎么操作？彩色字體怎么使用？
各種問題困擾著我們，我們可能會有各種折中的方案，比如線上字體 CDN 引入，字體 base64，雪碧圖等等。

全新的方式 iconfont-tools 快速生成彩色圖標庫

https://github.com/HuaRongSAO/iconfont-tools
歡迎點贊

cli.gif

npm  i  -g  iconfont-tools

cd  project/asset/font_hiytajitqeu  // 進入圖標文件所在文件夾

iconfont-tools  // 生成小程序?qū)Ｓ梦募?

生成目標文件：

.
└── font_hiytajitqeu
    ├── demo.css
    ├── demo_index.html
    ├── iconfont.css
    ├── iconfont.eot
    ├── iconfont.js
    ├── iconfont.svg
    ├── iconfont.ttf
    ├── iconfont.woff
    └── iconfont.woff2
    ├── iconfont-weapp        # 目標文件夾
    │   ├── icon              # 生成原生的icon組件庫
    │   │   ├── icon.js
    │   │   ├── icon.json
    │   │   ├── icon.wxml
    │   │   └── icon.wxss
    │   ├── iconfont-weapp-icon.css  # 包含彩色圖標的css
    │   └── iconfont-weapp-icon.wxss # 包含彩色圖標的wxss

最后：

• 方式一：引入小程序項目： @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文件，實現(xiàn)。

原理

實現(xiàn)原理主要是通過 SVG 作為背景圖進行實現(xiàn)的。
一般我們實現(xiàn)一張圖標的實現(xiàn)方式是通過 base64 作為背景圖實現(xiàn)實現(xiàn)的如下圖

.icon {
  width: 20px;
  height: 20px;
  background: url(data:image/svg+xml;base64, PHN2ZyB2ZXJza..) no-repeat center;
  background-size: 100%;
}

但是通過 base64 位生成背景圖，有個小問題，主要是因為 base64 算法的問題，會增加代碼的數(shù)量從而增加文件大小。
簡單原理：大概就是字符串的 3 個字符轉(zhuǎn)化成 4 位字符
通過 base64 加密后會使文件大小增加 2,30%

base64.png

于是就有了新的引入方式：

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ù)進行 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 一般長這樣

font.png

其中 svg 的代碼，在 iconfont.js 和 iconfont.svg 兩個文件

通過詳細對比和仔細閱讀源碼，發(fā)現(xiàn)答案就在 iconfont.js 里面

svg.png

圖中畫紅框的位置，就是 svg 的全部源碼了。

那么實現(xiàn)方式就很明朗了

找到對應(yīng)的svg標簽 ==> 提取標簽 ===> encodeURIComponent 編碼標簽 ==> 生成css文件

好的大功告成！

那么問題來，這么牛逼工具怎么下載?

https://github.com/HuaRongSAO/iconfont-tools

蟹蟹

相關(guān)閱讀：
張鑫旭:CSS 中內(nèi)聯(lián) SVG 圖片
base64