小程序中 icon 顏色自定義解決方案

時間 2019-11-24

標籤程序 icon 顏色自定義解決方案简体版

原文原文鏈接

背景

隨着公司業務的發展，如今的產品真的是愈來愈體(sang)貼(xin)用(bing)戶(kuang) 了，恰好前陣子準備作一個後臺可讓用用戶 DIY 本身的小程序，不當心看到了某網提供了一套圖標庫，用戶能夠自主選擇，而且能夠進行顏色配置的時候，我就感受事情不妙~css

當時腦子一熱，桌子一拍，咱們也須要提供這樣的功能，並且要作的比他們還強大...html

做爲開發的我默默的留下了這張圖~web

咱們知道小程序裏面是不支持相似 ttf woff 這類字體的，直接引入編譯都過不去~json

這個就是要告訴咱們，咱們不能像 H5 那樣直接把字體下載下來而後引入到樣式中，這條道路是行不通了，只能從新找找方案了~小程序

嗯，我也不藏着掖着了，接下來給你們安利 2 中解決方案~後端

解決方案

方案一bash

利用小程序中不支持 ttf 字體，卻支持 base64 的特色，咱們能夠經過將 ttf 字體轉碼成 base64 ，再經過 iconfont 的特色，經過設置字體大小和顏色來達到目的。app

其具體實現以下：xss

1.咱們能夠先去阿里提供的圖標庫官網下載咱們須要的圖標，通常來講都夠用了，這裏我隨便好了 3 個做爲測試用，點擊 下載代碼 將代碼下載到本地~

2.解壓咱們剛纔下載的包，會有如下這些文件，但對於咱們來講，會用到的只有 iconfont.css 和 iconfont.ttf 這兩個文件，

3.咱們要對 iconfont.ttf 這個文件進行轉碼，將它轉成 base64 格式，恰好這個網站就提供了這個功能（pass：這個網站可能會有點慢，能夠的話代理加個速），按照下圖的步驟，分別上傳 ttf 文件，選擇配置，點擊轉換。

4.轉換完成以下圖所示，廢話很少說，直接下載下來解壓，咱們須要的是裏面 stylesheet.css 這個文件

5.咱們在小程序裏的靜態資源文件夾裏新建一個叫 iconfont.wxss 樣式文件，將上面解壓出來的 stylesheet.css 裏面的內容所有拷貝到 iconfont.wxss 中，另外，還記得咱們上面說的 iconfont.css 嗎？這時候就要派上用場了，咱們打開 iconfont.css 這個樣式文件，將下面的樣式，也就是我用紅框標註的內容複製到 iconfont.wxss 文件裏，注意上面的不須要複製！！

到此爲止，準備工做算是已經完成了，這時候你的 iconfont.wxss 應該相似下面這樣svg

iconfont.wxss

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-map:before { content: "\e6a2"; }

.icon-success:before { content: "\e6b3"; }

.icon-atm:before { content: "\e6bd"; }

複製代碼

6.接着，將咱們的字體文件引入到 app.wxss 全局 , 這樣你就能夠在任何你想用到的地方進行調用了，只須要將 class 寫對就沒什麼問題了，

<!--index.wxml-->
<view class="container">
    <view class='block'>
        <text class='iconfont icon-map'></text>
        <text>地圖</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-success'></text>
        <text>成功</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-atm'></text>
        <text>atm</text>
    </view>
</view>
複製代碼

怎麼樣，成功了吧！

什麼？你要換顏色，難不倒個人，只要改變對應的 color 就能夠了~

<!--index.wxml-->
<view class="container">
    <view class='block'>
        <text class='iconfont icon-map' style='color : red'></text>
        <text>地圖</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-success' style='color : green'></text>
        <text>成功</text>
    </view>
    <view class='block'>
        <text class='iconfont icon-atm' style='color : blue'></text>
        <text>atm</text>
    </view>
</view>
複製代碼

嗯，是否是能夠插會兒腰了~

且慢，剛不是說兩種方案麼，怎麼到這裏就叉起腰來了，還沒完呢，等會嘚瑟哈！！

方案二

剛介紹了方案一，確實是一種選擇，咱們只需約定好樣式，類名，後端將顏色什麼的返回給咱們就行了~

可是這種方案存在弊端，不夠靈活，若是咱們要更新咱們的圖標庫，那麼咱們上面的流程又得走一遍，若是後面圖標庫的類型變多，那麼咱們轉碼後的文件會隨之變大，這對於小程序來講是致命的，由於作小程序都知道，咱們都在時刻想着如何用最少的代碼發揮最大的價值！

因此，這種方案有必定的侷限性，所以纔出了第二套方案~

第二套方案的思路是藉助 svg 矢量圖具備不失真和能夠自主填充顏色的特色，經過 fill 屬性，用戶能夠自定義填充顏色，可是小程序裏面不支持 svg 標籤的，咱們經過顏色選擇器將用戶選擇好的顏色填充到 svg 裏，在經過轉碼將換過顏色的 svg 轉成 base64 編碼發給小程序，小程序能夠直接用在 image 標籤中的 src 屬性上~

咱們一塊兒來試試~

1.咱們仍是先去阿里提供的圖標庫官網下載咱們須要的圖標，此次跟第一次有些不同，此次咱們要選擇下載素材，選擇 svg~

2.將下載好的 svg 源代碼直接放在咱們的圖標庫裏面，選擇某個圖標以後，經過顏色選擇器咱們能夠經過 js 設置對應的 svg 圖標的 fill 屬性，動態的給圖標填充不一樣的顏色，差很少就跟下面的效果有點類似~

3.接下來能夠將換過顏色的 svg 經過 svg 轉 base64 的插件將其轉換成 base64 編碼，這裏爲了方便，我直接偷懶，在線轉換了，對應的 base64 編碼以下：

<!--map-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzIuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJlZCIgZD0iTTUxMy41Nzc4MDcgMTAxOC40ODg0MjVhMjQuNTcyMjI0IDI0LjU3MjIyNCAwIDAgMS0yMC4xOTMwNjYtMTAuNTY4NTQ0TDE5Mi4wMDIwNDggNTczLjM1NDI4YTI0LjY4MDc1NiAyNC42ODA3NTYgMCAwIDEtMC45Mzc4NzktMS40NTgwMTIgMzczLjg4MTk2NSAzNzMuODgxOTY1IDAgMCAxLTM0LjA3Njk1Mi03NS4zNjYxNTFjLTEyLjA3Nzc1MS0zNy4zMTE0MDUtMTguMTk4NTM4LTc2LjE5NjUyMi0xOC4xOTg1MzctMTE1LjU4OTQ4NiAwLTIwNi42NjQwODYgMTY4LjEzMzIzMy0zNzQuNzk4MzQzIDM3NC43OTgzNDItMzc0Ljc5ODM0MyA0Ny45NDM0MyAwIDk2LjAzODM5NiAxMS41NzkxMTkgMTQyLjk0NzcwMiAzNC40MTU4NTcgNDIuNzAzMTg1IDIwLjc4ODk2OCA4My43NjYxMDYgNTEuMDQyNzMxIDExOC43NTEyNDQgODcuNDg4OTU0IDM0LjA4NzE5IDM1LjUxMTQxNSA2Mi40MzE0MDggNzYuODYyMDQ3IDgxLjk2NzE0IDExOS41ODI2MzggMjAuMzYyMDA3IDQ0LjUyNDY3NyAzMS4xMjIwMTggOTAuNjEyODI3IDMxLjEyMDk5NCAxMzMuMjgwMTc3IDAgMzkuNDAyMTc5LTYuMTIxODEgNzguMjg2MjcyLTE4LjE5NDQ0MiAxMTUuNTczMTA0LTguMzM3NDk4IDI1LjcyODE5LTE5Ljg1OTI4IDUxLjM4NDcwOS0zMy4zMjQzOTYgNzQuMjAwOTY5LTAuMzA0MDk0IDAuNTE2MDM4LTAuNjI3NjQyIDEuMDIwODE0LTAuOTY4NTk1IDEuNTE0MzI3TDUzMy43NzA4NzQgMTAwNy45MTc4MzNhMjQuNTc2MzE5IDI0LjU3NjMxOSAwIDAgMS0yMC4xOTMwNjcgMTAuNTcwNTkyek0yMzIuODkwOTA4IDU0Ni4wNzI4NTZsMjgwLjY4MzgyOCA0MDQuNzE4MzE5TDc5NC45NzgzNTQgNTQ0Ljk0OTY1NGMxMS40Njk1NjMtMTkuNTcwNTQ0IDIxLjI5ODg2My00MS41NDYxOTUgMjguNDQ3NjMtNjMuNjA3ODUyIDEwLjQ4NDU4Ni0zMi4zODM0NDUgMTUuODAyNjQ2LTY2LjE3NTc1NiAxNS44MDI2NDYtMTAwLjQzMDg2NCAwLjAwNDA5Ni03Mi4xODE4NjgtMzcuMTUzNzI3LTE1My45ODcyMzMtOTkuMzk2NzM5LTIxOC44Mjg4NjdDNjc0LjY4NjE2MyA5NC4yMTM4MzIgNTkyLjIyMzQ2MyA1NS4yODk4MDggNTEzLjU4ODA0NiA1NS4yODk4MDhjLTE3OS41NjQ5MTMgMC0zMjUuNjUxODQ3IDE0Ni4wODY5MzQtMzI1LjY1MTg0NyAzMjUuNjUxODQ3IDAgMzQuMjQ1ODkyIDUuMzE3MDM2IDY4LjAzOTIyOCAxNS44MDQ2OTQgMTAwLjQzOTA1NGEzMjQuNTgxODg3IDMyNC41ODE4ODcgMCAwIDAgMjkuMTUwMDE1IDY0LjY5MjE0N3ogbTU4Mi44MDI2OTQgMTIuMTI0ODVoMC4wMTAyMzktMC4wMTAyMzl6IG0tMzAyLjc2MDg0MiAxOC42NDI5MDRjLTk2Ljg2MTYgMC0xNzUuNjYzOTEtNzguODAzMzM0LTE3NS42NjM5MS0xNzUuNjY0OTM0czc4LjgwMjMxLTE3NS42NjM5MSAxNzUuNjYzOTEtMTc1LjY2MzkwOWM5Ni44NjI2MjMgMCAxNzUuNjYzOTEgNzguODAyMzEgMTc1LjY2MzkwOSAxNzUuNjYzOTA5cy03OC44MDEyODYgMTc1LjY2NDkzNC0xNzUuNjYzOTA5IDE3NS42NjQ5MzR6IG0wLTMwMi4xODIzNDhjLTY5Ljc2MjQyNyAwLTEyNi41MTc0MTQgNTYuNzU2MDExLTEyNi41MTc0MTUgMTI2LjUxNzQxNFM0NDMuMTcxMzU3IDUyNy42OTQxMTQgNTEyLjkzMjc2IDUyNy42OTQxMTQgNjM5LjQ1MDE3NCA0NzAuOTM4MTAzIDYzOS40NTAxNzQgNDAxLjE3NTY3NnMtNTYuNzU0OTg3LTEyNi41MTc0MTQtMTI2LjUxNzQxNC0xMjYuNTE3NDE0eiIgIC8+PC9zdmc+

<!--success-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzEuOTdweCIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9ImdyZWVuIiBkPSJNNTExLjY3OTUyNCAxMDIzLjE1OTM5Yy02OC42NTg2NzggMC0xMzUuMzk5NjE5LTEzLjU2NDQzMy0xOTguMzY5NTkxLTQwLjMxNjUwOS02MC43NTIyMzYtMjUuODA5MDc3LTExNS4zNzM0NDYtNjIuNzEyOTc2LTE2Mi4zNDYyMzMtMTA5LjY4NTc2My00Ni45NzE3NjMtNDYuOTcxNzYzLTgzLjg3NTY2Mi0xMDEuNTkyOTc0LTEwOS42ODU3NjMtMTYyLjM0NjIzMy0yNi43NTEwNTItNjIuOTY5OTcxLTQwLjMxNTQ4NS0xMjkuNzEwOTEyLTQwLjMxNTQ4NS0xOTguMzY4NTY3czEzLjU2NDQzMy0xMzUuMzk5NjE5IDQwLjMxNTQ4NS0xOTguMzY5NTkxYzI1LjgxMDEwMS02MC43NTIyMzYgNjIuNzE0LTExNS4zNzM0NDYgMTA5LjY4NTc2My0xNjIuMzQ2MjMzIDQ2Ljk3Mjc4Ny00Ni45NzE3NjMgMTAxLjU5Mzk5Ny04My44NzU2NjIgMTYyLjM0NjIzMy0xMDkuNjg1NzYzQzM3Ni4yNzk5MDUgMTUuMjg5NjggNDQzLjAyMDg0NiAxLjcyNTI0NyA1MTEuNjc5NTI0IDEuNzI1MjQ3UzY0Ny4wNzgxMTkgMTUuMjg5NjggNzEwLjA0ODA5MSA0Mi4wNDA3MzFjNjAuNzUyMjM2IDI1LjgxMDEwMSAxMTUuMzc0NDcgNjIuNzE0IDE2Mi4zNDYyMzMgMTA5LjY4NTc2MyA0Ni45NzI3ODcgNDYuOTcyNzg3IDgzLjg3NjY4NiAxMDEuNTkzOTk3IDEwOS42ODY3ODcgMTYyLjM0NjIzMyAyNi43NTIwNzYgNjIuOTY5OTcxIDQwLjMxNjUwOSAxMjkuNzEwOTEyIDQwLjMxNjUwOSAxOTguMzY5NTkxcy0xMy41NjQ0MzMgMTM1LjM5ODU5NS00MC4zMTY1MDkgMTk4LjM2ODU2N2MtMjUuODEwMTAxIDYwLjc1MzI2LTYyLjcxMjk3NiAxMTUuMzc0NDctMTA5LjY4NTc2MyAxNjIuMzQ2MjMzLTQ2Ljk3MTc2MyA0Ni45NzI3ODctMTAxLjU5Mzk5NyA4My44NzY2ODYtMTYyLjM0NjIzMyAxMDkuNjg1NzYzQzY0Ny4wNzkxNDMgMTAwOS41OTQ5NTcgNTgwLjMzNzE3OCAxMDIzLjE1OTM5IDUxMS42Nzk1MjQgMTAyMy4xNTkzOXpNNTExLjY3OTUyNCA1MC44NzE3NDJjLTYyLjAxODc4MiAwLTEyMi4yOTM4ODcgMTIuMjQ3NzE2LTE3OS4xNTIyODcgMzYuNDAzMjE5LTU0LjkyMzI1NyAyMy4zMzMzMjMtMTA0LjMxNzUzMiA1Ni43MDk5MzYtMTQ2LjgxMDgyMSA5OS4yMDQyNDlzLTc1Ljg3MDkyNiA5MS44ODg1ODgtOTkuMjA0MjQ5IDE0Ni44MTA4MjFjLTI0LjE1NTUwMyA1Ni44NTg0LTM2LjQwMzIxOSAxMTcuMTMzNTA1LTM2LjQwMzIxOSAxNzkuMTUyMjg3IDAgNjIuMDE3NzU4IDEyLjI0NzcxNiAxMjIuMjkyODYzIDM2LjQwMzIxOSAxNzkuMTUyMjg3IDIzLjMzMzMyMyA1NC45MjMyNTcgNTYuNzA5OTM2IDEwNC4zMTc1MzIgOTkuMjA0MjQ5IDE0Ni44MTE4NDUgNDIuNDkzMjg5IDQyLjQ5MzI4OSA5MS44ODg1ODggNzUuODcwOTI2IDE0Ni44MTA4MjEgOTkuMjA0MjQ5IDU2Ljg1ODQgMjQuMTU1NTAzIDExNy4xMzM1MDUgMzYuNDAzMjE5IDE3OS4xNTIyODcgMzYuNDAzMjE5IDYyLjAxNzc1OCAwIDEyMi4yOTM4ODctMTIuMjQ3NzE2IDE3OS4xNTMzMTEtMzYuNDAzMjE5IDU0LjkyMzI1Ny0yMy4zMzMzMjMgMTA0LjMxNzUzMi01Ni43MTA5NiAxNDYuODEwODIxLTk5LjIwNDI0OSA0Mi40OTQzMTMtNDIuNDk0MzEzIDc1Ljg3MTk1LTkxLjg4ODU4OCA5OS4yMDUyNzMtMTQ2LjgxMTg0NSAyNC4xNTU1MDMtNTYuODU4NCAzNi40MDMyMTktMTE3LjEzMzUwNSAzNi40MDMyMTktMTc5LjE1MjI4N3MtMTIuMjQ3NzE2LTEyMi4yOTM4ODctMzYuNDA0MjQzLTE3OS4xNTIyODdjLTIzLjMzMzMyMy01NC45MjMyNTctNTYuNzEwOTYtMTA0LjMxNzUzMi05OS4yMDQyNDktMTQ2LjgxMDgyMS00Mi40OTQzMTMtNDIuNDkzMjg5LTkxLjg4ODU4OC03NS44NzA5MjYtMTQ2LjgxMTg0NS05OS4yMDQyNDlDNjMzLjk3MjM4NyA2My4xMTk0NTkgNTczLjY5NzI4MiA1MC44NzE3NDIgNTExLjY3OTUyNCA1MC44NzE3NDJ6TTQ1MS43ODAxODUgNjg5Ljg0ODg4MWMtNi4yMjMxNzUgMC0xMi40NTI0OTMtMi4yNTU2MTktMTcuMzY1MDk1LTYuNzk0NTAzTDI1My4xOTU1NzggNTE1LjY1ODM0MmMtMTAuMzg0MjQ1LTkuNTkyNzgyLTExLjAyNzI0NS0yNS43ODc1NzYtMS40MzQ0NjMtMzYuMTcxODIxIDkuNTkyNzgyLTEwLjM4NjI5MyAyNS43ODY1NTItMTEuMDI2MjIxIDM2LjE3MTgyMS0xLjQzNDQ2M2wxNjMuMTQ2OTEyIDE1MC43MDM2MzMgMjg5Ljc1MzQwNC0yODkuNzU0NDI4YzkuOTk3MjE2LTkuOTk2MTkyIDI2LjIwMzI3My05Ljk5NjE5MiAzNi4xOTk0NjYgMCA5Ljk5NjE5MiA5Ljk5NjE5MiA5Ljk5NjE5MiAyNi4yMDMyNzMgMCAzNi4xOTk0NjZMNDY5Ljg4MzUwMSA2ODIuMzUxOTkzQzQ2NC44OTYxNTYgNjg3LjMzOTMzOCA0NTguMzQyMjY2IDY4OS44NDg4ODEgNDUxLjc4MDE4NSA2ODkuODQ4ODgxeiIgLz48L3N2Zz4=

<!--atm-->
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzEuOTdweCIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9ImJsdWUiIGQ9Ik01MTEuNzA4MTkzIDk4NS40NTk5MzJjLTI0My40MzQ4NzkgMC00NDIuNjA4MjItMTkxLjc5NzI3MS00NDIuNjA4MjItNDMwLjMxNDQyOSAwLTExNC4zNTQ2OCA0NS43NDIwNzctMjE5LjA3OTcxOSAxMjIuOTMzODE1LTI5Ny40OTkwOTYgMC4zNzA2NDYtMC4zNzY3OSAwLjAzOTkzMi0yLjgyMjg1Mi0wLjAyODY2OS00LjYzNTEyOS0wLjA4Mzk1OS0yLjE5ODI4MiAwLjA0MTk3OS0zLjg4NDYyMSAwLjA0MTk3OS01LjIzMzA3OEwxOTIuMDQ3MDk5IDc1LjY1Mzg2M2MwLTEyLjI5NDgxNSA3LjM3NzA5NC0yMi4xMzAyNTcgMTkuNjcxOTA5LTI0LjU4OTYzIDAgMCAwIDAgMi40NTkzNzMgMCAyLjQ1OTM3MyAwIDIuNDU5MzczIDAgMi40NTkzNzMgMHMwIDAgMi40NTkzNzMgMGM0LjkxNzcyMSAwIDkuODM1NDQyIDAgMTQuNzUzMTY0IDIuNDU5MzczbDE0Mi42MTgwMTEgODguNTIyMDU0IDIuNDU5MzczIDIuNDU5MzczYzQxLjgwMjE2Ni0xMi4yOTQ4MTUgODYuMDYyNjgxLTE5LjY3MTkwOSAxMzIuNzgyNTY4LTE5LjY3MTkwOSAyNDMuNDM0ODc5IDAgNDQyLjYwODIyIDE5MS43OTcyNzEgNDQyLjYwODIyIDQzMC4zMTQ0MjlTNzU1LjE0MzA3MiA5ODUuNDU5OTMyIDUxMS43MDgxOTMgOTg1LjQ1OTkzMnpNNTExLjcwODE5MyAxNzQuMDExMzU5Yy00NC4yNjA1MTUgMC04OC41MjIwNTQgNy4zNzcwOTQtMTI3Ljg2NDg0NyAyMi4xMzAyNTdsMCAwYy0xMC4zNzcwNzggNS40MTAyMS0yNC41ODk2MyA0LjkxNzcyMS0zNC40MjUwNzItMi40NTkzNzNMMjQxLjIyNTMzNSAxMjkuNzQ5ODJsMCAxMTguMDI5NDA1YzAgOS43MDIzMzcgMy4wNDA5MzkgMjEuMDI1NDg1LTAuNjA0MDkyIDI5LjczMjYwNi0wLjA1MDE3IDAuMTE5Nzk1LTAuMzEzMzA5IDAuNDkyNDg5LTAuNTEwOTE5IDAuNjk5MzE0LTAuMDUxMTk0IDAuMDUzMjQyLTAuMTE0Njc1IDAuMTA4NTMyLTAuMTg0Mjk5IDAuMTc2MTA4LTc0LjIyNDUxOSA3MC44NTQ5MTItMTIxLjY0Njc5MiAxNjcuOTM2NjQ3LTEyMS42NDY3OTIgMjc2Ljc1OTI3NSAwIDIxMS40NjgxNTYgMTc3LjA0MzA4MyAzODEuMTM1MTY5IDM5My40Mjk5ODQgMzgxLjEzNTE2OVM5MDUuMTM4MTc3IDc2Ni42MTQ2ODMgOTA1LjEzODE3NyA1NTUuMTQ2NTI4QzkwNS4xMzgxNzcgMzQzLjY3NzM0OCA3MjguMDk1MDkzIDE3NC4wMTEzNTkgNTExLjcwODE5MyAxNzQuMDExMzU5ek01MzYuMjk4ODQ3IDU0Ni4zMDAxNThjLTE0LjEzNzgwOSAwLTI1LjU5NzEzMy0xMS40NTkzMjUtMjUuNTk3MTMzLTI1LjU5NzEzM2wwLTc2LjczNzEzM2MwLTE0LjEzNjc4NSAxMS40NTkzMjUtMjUuNTk3MTMzIDI1LjU5NzEzMy0yNS41OTcxMzNzMjUuNTk3MTMzIDExLjQ2MDM0OCAyNS41OTcxMzMgMjUuNTk3MTMzbDAgNzYuNzM3MTMzQzU2MS44OTU5OCA1MzQuODQwODM0IDU1MC40MzU2MzEgNTQ2LjMwMDE1OCA1MzYuMjk4ODQ3IDU0Ni4zMDAxNTh6TTcyMy42Njk4NjEgNTQ2LjMwMDE1OGMtMTQuMTM3ODA5IDAtMjUuNTk3MTMzLTExLjQ1OTMyNS0yNS41OTcxMzMtMjUuNTk3MTMzbDAtNzYuNzM3MTMzYzAtMTQuMTM2Nzg1IDExLjQ1OTMyNS0yNS41OTcxMzMgMjUuNTk3MTMzLTI1LjU5NzEzM3MyNS41OTcxMzMgMTEuNDYwMzQ4IDI1LjU5NzEzMyAyNS41OTcxMzNsMCA3Ni43MzcxMzNDNzQ5LjI2Njk5NCA1MzQuODQwODM0IDczNy44MDY2NDYgNTQ2LjMwMDE1OCA3MjMuNjY5ODYxIDU0Ni4zMDAxNTh6IiAvPjwvc3ZnPg==
複製代碼

4.接着咱們只須要把對應的 base64 編碼發給小程序端，小程序直接放在 image 組件中的 src 屬性便可，對於樣式來講，能夠直接修改 image 的樣式來控制 icon 樣式，效果以下：

ok~ 還算是比較圓滿的完成了任務~

這下產品總不會刁難我了吧~

結語

到此，咱們已經 get 到了兩種小程序中實現 icon 自定義顏色的解決方案，對比發現，第一種方案的特色是實現起來比較簡單，步驟什麼的也都還ok，就是拓展性不強，每次改動都須要從新再來一遍，並且對於比較多的圖標來講小程序空間佔用較大，有必定的侷限性，而第二種方案相比於第一種來講雖然在實現過程當中稍微繁瑣了一些，可是帶來的效果是顯而易見的，解決了第一種方案的弊端，拓展性什麼的都很好，是我比較推薦的，也是咱們正在採用的一種方案~

固然，這不過是個人一種實現思路，若是你有關於這方面更好的解決方案記得及時艾特我，我已經火燒眉毛的等待學習了~