小程式中怎麼實(shí)作Icon圖示？以下這篇文章跟大家分享小程式Icon圖示的幾種實(shí)作方案，希望對(duì)大家有幫助！

小程式原生提供的#Icon元件

屬性

說(shuō)明

元件size屬性的長(zhǎng)度單位預(yù)設(shè)為px，2.4.0起支援傳入單位( rpx/px)

• PX 數(shù)值類(lèi)型，預(yù)設(shè)使用，什麼單位都不填，只寫(xiě)一個(gè)數(shù)值就可以

• RPX（Responsive Pixel）螢?zāi)蛔赃m應(yīng)單位，他將螢?zāi)环譃?50個(gè)單位，每個(gè)單位是1/750。 【相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)】

比方說(shuō)：iphone6的螢?zāi)粚挾仁?50px，每個(gè)rpx就是0.5px。也就是說(shuō)如果我們?cè)趇phone6機(jī)器上將size的值設(shè)定為60rpx，他與設(shè)定為30或30px的效果是一樣的。

元件color屬性是改變圖示所有像素點(diǎn)的顏色

#常見(jiàn)問(wèn)題

圖示與文字能否放在同一行？

可以的，圖示本身就是為了更好的佈局和更方便使用而誕生的。程式碼如下：

<view style="font-size: 17px;margin-top: 20px;">
    我是一行文字，<icon type="success" size="15"></icon>我里面包含了圖標(biāo)！
</view>

有時(shí)候真機(jī)上Icon顯示空白

首先此問(wèn)題肯定不是由於字體檔案連結(jié)沒(méi)有加入小程式的安全域名，WXSS載入圖片及字體允許外域！如果圖示是自訂實(shí)現(xiàn)的，要檢查一下機(jī)型及嵌入的字體檔案類(lèi)型，可能是相容性引起的，在小程式中推薦使用TTF和WOFF格式的字體。如果使用的是這兩種字體，情況依然存在，可以考慮換SVG格式的資料嵌入。

weui元件庫(kù)裡的icon元件的圖示如何取出來(lái)，儲(chǔ)存在本機(jī)？

直接可以開(kāi)啟 weui官網(wǎng)（https://weui.io/），然後透過(guò)瀏覽器開(kāi)發(fā)者工具查看原始碼，找到資源位址然後下載。或在微信的官方文件上下載（https://developers.weixin.qq.com/miniprogram/design/#圖示）。

優(yōu)點(diǎn)

開(kāi)箱即用。

缺點(diǎn)

只支援success, success_no_circle, info, warn, waiting, cancel, download, search, clear這幾種類(lèi)型，遠(yuǎn)遠(yuǎn)無(wú)法滿(mǎn)足開(kāi)發(fā)需求。

自訂實(shí)作圖示

直接使用圖片

優(yōu)點(diǎn)

• #簡(jiǎn)單粗暴，每個(gè)圖示對(duì)應(yīng)一個(gè)圖片。

• 缺點(diǎn)

• 圖片在文字中不方便佈局。不方便修改顏色。

• 圖片不能升縮，放大之後會(huì)變虛、有鋸齒。

圖片需要在本地或網(wǎng)路上存儲(chǔ)，這將導(dǎo)致大量HTTP請(qǐng)求，使得頁(yè)面載入速度變慢。

使用起來(lái)不如圖示只使用一個(gè)名稱(chēng)方便。

使用精靈圖

透過(guò)精靈圖實(shí)作一個(gè)爆炸效果。圖片大小為（650x650） px；所以每個(gè)小圖示大小為（130x130）px；這是css樣式設(shè)定的width和height為130px的原因，也是js程式移動(dòng)step設(shè)定為130的原因。 js中l(wèi)eft和top皆為負(fù)數(shù)，這是由於這裡不是顯示圖示的座標(biāo)，而是背景圖片所要向左上方移動(dòng)的距離。

• 程式碼如下：

  <!--icon.wxml-->
  <view>
  <icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
  </view>

  /* icon.wxss */
  .sprite{
      display: block;
      width: 130px;
      height: 130px;
      background: url("https://i.loli.net/2021/11/15/7BH5gdkbLynrfM3.png") no-repeat;
  }
  .scale{
      transform-origin: 0 0 0;
      transform: scale(2,2);
  }

  // icon.js
  Page({
  
      /**
       * 頁(yè)面的初始數(shù)據(jù)
       */
      data: {
          left:'0px',
          top:'0px',
      },
  
      /**
       * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
       */
      onLoad: function () {
          var that = this;
          var left = 0;
          var top = 0;
          const step = 130;
          const stop = (650-130);
          var i = setInterval(function() {
               if (left >= stop && top >=stop) {
                    clearInterval(i)
               } else {
                  left += step;
                  if(left >= 650){
                      left = 0;
                      top += step;
                  }
                  that.setData({
                      left: '-' + left +'px',
                      top: '-' + top +'px'
                    })
               }
          }, 100)
      },
  })

在載入的時(shí)候，只載入一次。減少了HTTP請(qǐng)求。

使用CSS樣式繪製

• #使用範(fàn)例

  <view>
      <icon class="icon-close"></icon>
  </view>

  .icon-close{
      display: inline-block;
      width: 17px;
      height: 2px;
      background: red;
      transform: rotate(45deg);
  }
  .icon-close::after {
      content: '';
      display: block;
      width: 17px;
      height: 2px;
      background: red;
      transform: rotate(-90deg);
  }

• 缺點(diǎn)

• 每個(gè)圖示都需要寫(xiě)CSS樣式程式碼，勞動(dòng)量大。

  #########這種圖示不是字符，每個(gè)圖示在繪製時(shí)要統(tǒng)一一個(gè)中心點(diǎn)，不然使用起來(lái)控制位置會(huì)比較麻煩。 ############大小與顏色也不方便控制。所以這並不是一種好的圖標(biāo)方案。 ###

使用矢量字體 （推薦使用）

當(dāng)瀏覽器渲染一個(gè)字符的時(shí)候，首先看font-family樣式，確定使用字體名是哪一個(gè)。接著以此字符的Unicode在字體文件里查找對(duì)應(yīng)的字符信息。

字體類(lèi)型有兩種，一種是點(diǎn)陣字體，一種是矢量字體?，F(xiàn)在使用最廣泛的是矢量字體。矢量字體大概分成三類(lèi)：Adobe主導(dǎo)的Type1、Apple和Microsoft主導(dǎo)的TrueType、Adobe，Apple和Microsoft共同主導(dǎo)的開(kāi)源字體OpenType。

在矢量字體里面每個(gè)Unicode只是每個(gè)字符的一個(gè)索引，每個(gè)字符描述信息是一個(gè)幾何矢量繪圖描述信息。以Type1為例，它使用三次貝塞爾曲線來(lái)繪制字形。TrueType則使用二次貝塞爾曲線描述字形。正是由于矢量字體是繪制出來(lái)的，所以它可以實(shí)時(shí)填充任何顏色，并且可以無(wú)極縮放而沒(méi)有鋸齒。

阿里巴巴的圖標(biāo)網(wǎng)站（https://iconfont.cn/），我們可以在此網(wǎng)站上搜索到任何圖片在線編輯，并下載樣式文件，在小程序里面使用。

字體源說(shuō)明：

• EOT是微軟IE瀏覽器專(zhuān)用的OpenType字體類(lèi)型。

• TTF是TrueType字體。

• WOFF與WOFF2是移動(dòng)開(kāi)發(fā)專(zhuān)用的矢量字體格式。是對(duì)三種矢量字體格式的再封裝。

鏈接各種字體文件源可以兼容不同瀏覽器宿主環(huán)境。瀏覽器會(huì)選擇自己支持的格式，從列表中的第一個(gè)開(kāi)始嘗試加載。一旦獲得一個(gè)可以使用的，就不會(huì)再加載剩下的字體格式了。小程序里面建議使用TTF和WOFF這兩個(gè)格式。WOFF2在低版本的IOS設(shè)備上會(huì)有不兼容的問(wèn)題。

使用示例可以參考此文章

https://www.jianshu.com/p/25db60f77531

使用SVG矢量文件

很多作圖軟件都可以導(dǎo)出SVG格式的矢量文件，比方說(shuō) Sketch，但是它導(dǎo)出的SVG格式的矢量文件有沒(méi)有用的垃圾信息?？梢缘?阿里巴巴的圖標(biāo)網(wǎng)站 編輯好之后下載SVG格式的矢量文件，它不帶什么垃圾信息。然后我們拿這個(gè)文件找一個(gè)Image2base64工具，將文件內(nèi)容轉(zhuǎn)化為base64的字符串。然后就可以在小程序里使用這個(gè)base64的字符串作為圖片源，實(shí)現(xiàn)自定義圖標(biāo)了。

示例

1、準(zhǔn)備SVG圖片

2、使用線上Image2base64轉(zhuǎn)換圖片為：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+

3、編寫(xiě)代碼

.svg-icon{
    display: block;
    width: 200px;
    height: 200px;  
    background-repeat: no-repeat;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+");
}

<view>
    <icon class="svg-icon"></icon>
</view>

說(shuō)明

此種方法仍舊需要一張圖片處理一次，然后在頁(yè)面中引用。注意：樣式文件中的width和height屬性的值需要和下載的SVG文件的width和height保持一致的（在svg標(biāo)簽中可以看到）。

使用Canvas繪制SVG繪制

這種繪制用于制作動(dòng)畫(huà)還是可以的，但是用來(lái)做圖標(biāo)有點(diǎn)大材小用了。

騰訊的將SVG繪制成圖像的 Cax 引擎

https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)?。?/p>

以上是淺析小程式中怎麼實(shí)現(xiàn)Icon圖示？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！