站長資訊網小程序中怎么實現Icon圖標？下面本篇文章給大家分享小程序Icon圖標的幾種實現方案，希望對大家有所幫助！
小程序原生提供的Icon組件
屬性
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| type | string | 是 | icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的顏色，同css的color |
說明
組件size屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)
-
PX 數值類型，默認使用，什么單位都不填，只寫一個數值就可以
-
RPX（Responsive Pixel）屏幕自適應單位，他將屏幕分為750個單位，每個單位是1/750。【相關學習推薦：小程序開發教程】
比方說：iphone6的屏幕寬度是350px，每個rpx就是0.5px。也就是說如果我們在iphone6機器上將size的值設置為60rpx，他與設置為30或者30px的效果是一樣的。
組件color屬性是改變圖標所有像素點的顏色
常見問題
圖標與文本能否放在同一行中？
可以的，圖標本身就是為了更好的布局和更方便使用而誕生的。代碼如下：
<view style="font-size: 17px;margin-top: 20px;"> 我是一行文字，<icon type="success" size="15"></icon>我里面包含了圖標！ </view>
有時候真機上Icon顯示空白
首先此問題肯定不是由于字體文件鏈接沒有加入小程序的安全域名，WXSS加載圖片及字體允許外域！如果圖標是自定義實現的，要檢查一下機型及嵌入的字體文件類型，可能是兼容性引起的，在小程序中推薦使用TTF和WOFF格式的字體。如果使用的是這兩種字體，情況依然存在，可以考慮換SVG格式的數據嵌入。
weui組件庫里的icon組件的圖標如何取出來，保存在本地？
直接可以打開 weui官網（https://weui.io/），然后通過瀏覽器開發者工具查看源碼，找到資源地址然后下載。或者在微信的官方文檔上下載（https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87）。
優點
開箱即用。
缺點
只支持success, success_no_circle, info, warn, waiting, cancel, download, search, clear這幾種類型，遠遠不能滿足開發需求。
自定義實現圖標
直接使用圖片
優點
簡單粗暴，每個圖標對應一個圖片。
缺點
-
圖片在文本中不方便布局。不方便修改顏色。
-
圖片不能升縮，放大之后會變虛、有鋸齒。
-
圖片需要在本地或者網絡上存儲，這樣將導致大量HTTP請求，使得頁面加載速度變慢。
-
使用起來不如圖標只使用一個名稱那么方便。
使用精靈圖
Sprite，連續圖片集，以非重疊、最小化分布的方式排列成一張圖片。每次使用的時候通過縱橫顯示的起始坐標及區域大小，以達到動態切換的效果。
使用示例
通過精靈圖實現一個爆炸效果。圖片大小為（650×650） px；所以每一個小圖標大小為（130×130）px；這是css樣式設置的width和height為130px的原因，也是js代碼移動step設置為130的原因。js中left和top均為負數，這是由于這里不是顯示圖標的坐標，而是背景圖片所要向左上方移動的距離。
注意：在wxss中只可以使用網絡圖片，不能使用本地圖片！
代碼如下：
<!--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({ /** * 頁面的初始數據 */ data: { left:'0px', top:'0px', }, /** * 生命周期函數--監聽頁面加載 */ 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) }, })
優點
-
在加載的時候，只加載一次。減少了HTTP請求。
使用CSS樣式繪制
使用示例
<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); }
缺點
-
每個圖標都需要寫CSS樣式代碼，勞動量大。
-
這種圖標不是字符，每個圖標在繪制時要統一一個中心點，不然使用起來控制位置會比較麻煩。
-
大小與顏色也不方便控制。所以這并不是一種好的圖標方案。
使用矢量字體 （推薦使用）
當瀏覽器渲染一個字符的時候，首先看font-family樣式，確定使用字體名是哪一個。接著以此字符的Unicode在字體文件里查找對應的字符信息。
字體類型有兩種，一種是點陣字體，一種是矢量字體。現在使用最廣泛的是矢量字體。矢量字體大概分成三類：Adobe主導的Type1、Apple和Microsoft主導的TrueType、Adobe，Apple和Microsoft共同主導的開源字體OpenType。
在矢量字體里面每個Unicode只是每個字符的一個索引，每個字符描述信息是一個幾何矢量繪圖描述信息。以Type1為例，它使用三次貝塞爾曲線來繪制字形。TrueType則使用二次貝塞爾曲線描述字形。正是由于矢量字體是繪制出來的，所以它可以實時填充任何顏色，并且可以無極縮放而沒有鋸齒。
阿里巴巴的圖標網站（https://iconfont.cn/），我們可以在此網站上搜索到任何圖片在線編輯，并下載樣式文件，在小程序里面使用。
字體源說明：
-
EOT是微軟IE瀏覽器專用的OpenType字體類型。
-
TTF是TrueType字體。
-
WOFF與WOFF2是移動開發專用的矢量字體格式。是對三種矢量字體格式的再封裝。
鏈接各種字體文件源可以兼容不同瀏覽器宿主環境。瀏覽器會選擇自己支持的格式，從列表中的第一個開始嘗試加載。一旦獲得一個可以使用的，就不會再加載剩下的字體格式了。小程序里面建議使用TTF和WOFF這兩個格式。WOFF2在低版本的IOS設備上會有不兼容的問題。
使用示例可以參考此文章
https://www.jianshu.com/p/25db60f77531
使用SVG矢量文件
很多作圖軟件都可以導出SVG格式的矢量文件，比方說 Sketch，但是它導出的SVG格式的矢量文件有沒有用的垃圾信息。可以到 阿里巴巴的圖標網站 編輯好之后下載SVG格式的矢量文件，它不帶什么垃圾信息。然后我們拿這個文件找一個Image2base64工具，將文件內容轉化為base64的字符串。然后就可以在小程序里使用這個base64的字符串作為圖片源，實現自定義圖標了。
示例
1、準備SVG圖片
2、使用線上Image2base64轉換圖片為：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+
3、編寫代碼
.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>
說明
此種方法仍舊需要一張圖片處理一次，然后在頁面中引用。注意：樣式文件中的width和height屬性的值需要和下載的SVG文件的width和height保持一致的（在svg標簽中可以看到）。
使用Canvas繪制SVG繪制
這種繪制用于制作動畫還是可以的，但是用來做圖標有點大材小用了。
騰訊的將SVG繪制成圖像的 Cax 引擎
https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013
