微信小程序使用多色圖標詳解

前言

繼上次寫完《9012年了你還在用單色圖標？(iconfont多色圖標詳解)》以後,有一些小夥伴又問了我是否能在微信小程序中使用多色圖標呢?

em....

查閱了一些資料,發現小程序自己是不支持svg的.這樣就否認了我想直接使用svg引入多色圖標的想法.

網上大多都只有對單色iconfont字體引入的介紹,這裏貼上一篇我本身對小程序中引用多色圖標的方案.要是您又更好的解決方案請在評論處留言一塊兒學習一下😊,謝謝.

mini-program-iconfont-cli

方案的主角就是這名 mini-program-iconfont-cli 開源庫.其實你只要知道有這麼個東西而後按照裏面的README.md一步一步就能夠實現效果了.

第一步

在終端打開你的項目根目錄,而後使用npm或者yarn進行安裝.

npm install mini-program-iconfont-cli --save-dev
複製代碼

yarn add mini-program-iconfont-cli --dev
複製代碼

第二步

繼續使用命令生成配置文件:

npx iconfont init
複製代碼

(這裏是npx,不是npm)

此時會發現項目目錄生成了一個iconfont.json文件:

{
  "symbol_url": "請參考README.md，複製 http://iconfont.cn 官網提供的JS連接",
  "save_dir": "./iconfont", // 生成的組件保存的路徑
  "use_rpx": false, // 是否使用微信提供的尺寸單位rpx仍是普通的像素單位px
  "trim_icon_prefix": "icon-",
  "default_icon_size": 18 // 默認字體大小
}
複製代碼

這裏的trim_icon_prefix屬性作下解釋:

若是你的圖標有通用的前綴，而你在使用的時候又不想重複去寫，那麼能夠經過這種配置這個選項把前綴統一去掉。

好比我項目中全部的圖標的類名都是以icon-開頭,這樣我在後面使用圖標類名的時候就能夠將icon-這段給省略.

第三步

打開你iconfont上的項目,並找到Symbol的外部連接:

將這個連接替換到 iconfont.json的 symbol_url下:

{
    "symbol_url": "//at.alicdn.com/t/font_872514_tfvlfiqme6.js",
    "save_dir": "./iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "icon-",
    "default_icon_size": 18
}
複製代碼

第四步

使用命令生成小程序組件

npx iconfont
複製代碼

此時項目目錄中會多出一個iconfont的文件夾,它裏面存放的就是生成的圖標組件.

第五步

既然上面生成的是組件的話,那麼咱們就能夠將其當成小程序中其它的組件同樣來使用:

• 局部引用
• 全局引用

全局引用,在app.json中加上配置:

"usingComponents": {
   "iconfont": "./iconfont/iconfont"
}
複製代碼

第六步

頁面上使用起來也是很是簡單,這裏我就直接貼上了:

// 原色彩
<iconfont name="alipay" />

// 單色：紅色
<iconfont name="alipay" color="red" />

// 多色：紅色+橘色
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />
複製代碼

我本身也新建了一個項目測試了一下是能實現效果的:

可是發現圖標好像是 block類型的,這樣就照成了會換行的狀況,因而我在全局的 wxss中加上:

iconfont {
  display: inline-block;
}
複製代碼

好像能夠了.

如果後面,你的項目須要更新圖標的話,只須要從新配置一下iconfont.json中的symbol_url,而後執行:

npx iconfont
複製代碼

從新生成iconfont組件就能夠了.

-----------華麗的分割線--------------

說到這裏基本就能夠在項目中使用多色的iconfont,後面的內容主要是對這種實現方式的擴展,感興趣的小夥伴能夠接着往下看.

由於我在前言中也提到了,小程序中暫時是不支持svg的,因此一樣是一段代碼,你將它放在.html中是能夠正常顯示成一個圖標的,可是放在wxml中卻沒有效果:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>
複製代碼

雖然咱們不能像在web中同樣直接使用 svg，可是咱們能夠經過 css，設置背景圖片的方式來設置。所以 mini-program-iconfont-cli的做用應該是將 svg轉化爲 Base64格式。而後生成一個個能夠在小程序中使用的組件.

同時咱們打開iconfont文件夾下的iconfont.wxml文件,也能夠發現裏面就是生成了一個個view標籤而後設置上背景圖片.

這裏貼上一個將svg轉換爲Base64的網址:

codepen.io/jakob-e/pen…

後語

我這裏使用的方案可能也不是最合理的,但願能起到拋磚引玉的做用.另外看了一下,我添加了2個多色,一個單色的圖標,生成的iconfont文件夾就有16KB了,還算是比較大的.另外我把iconfont官網上的圖標下載到本地比較了一下大小:

參考文章:

mini-program-iconfont-cli

微信小程序開發之SVG的使用

知識無價，支持原創.