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

背景

隨著公司業務的發展，現在的產品真的是越來越 體(sang)貼(xin)用(bing)戶(kuang) 了，剛好前陣子準備做一個後臺可以讓用使用者 DIY 自己的小程式，不小心看到了 某網 提供了一套圖示庫，使用者可以自主選擇，並且可以進行顏色配置的時候，我就感覺事情不妙~

當時腦子一熱，桌子一拍，我們也需要提供這樣的功能，而且要做的比他們還強大...

作為開發的我默默的留下了這張圖~

我們知道小程式裡面是不支援類似 ttf woff 這類字型的，直接引入編譯都過不去~

這個就是要告訴我們，我們不能像 H5 那樣直接把字型下載下來然後引入到樣式中，這條道路是行不通了，只能重新找找方案了~

嗯，我也不 藏著掖著了 ， 接下來給大家 安利 2 中解決方案~

解決方案

方案一

利用小程式中不支援 ttf 字型，卻支援 base64 的特點，我們可以通過將 ttf 字型轉碼成 base64 ，再通過 iconfont 的特點，通過設定字型大小和顏色來達到目的。

其具體實現如下：

• 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 應該類似下面這樣

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，就是擴充性不強，每次改動都需要重新再來一遍，而且對於比較多的圖示來說小程式空間佔用較大，有一定的侷限性，而第二種方案相比於第一種來說雖然在實現過程中稍微繁瑣了一些，但是帶來的效果是顯而易見的，解決了第一種方案的弊端，擴充性什麼的都很好，是我比較推薦的，也是我們正在採用的一種方案~

當然，這不過是我的一種實現思路，如果你有關於這方面更好的解決方案記得及時艾特我，我已經迫不及待的等待學習了~