怎么在小程序中使用彩色圖標iconfont

國際慣例，先上圖：

概要

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

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

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

npm i -g iconfont-toolscd project/asset/font_hiytajitqeu // 進入圖標文件所在文件夾iconfont-tools // 生成小程序專用文件

生成目標文件：

. └── 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文件，實現。

原理

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

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

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

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

SVG 直接內聯

.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對數據進行 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 兩個文件

通過詳細對比和仔細閱讀源碼，發現答案就在 iconfont.js 里面

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

那么實現方式就很明朗了

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

好的大功告成！

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

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

蟹蟹

相關閱讀：
張鑫旭:CSS 中內聯 SVG 圖片
base64

總結

以上是生活随笔為你收集整理的怎么在小程序中使用彩色图标iconfont的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。