小程序原生提供的Icon組件
屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| type | string | 是 | icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的顏色饺窿，同css的color |
說(shuō)明
組件size屬性的長(zhǎng)度單位默認(rèn)為px歧焦，2.4.0起支持傳入單位(rpx/px)
- PX 數(shù)值類型，默認(rèn)使用肚医，什么單位都不填绢馍，只寫一個(gè)數(shù)值就可以
- RPX（Responsive Pixel）屏幕自適應(yīng)單位，他將屏幕分為750個(gè)單位肠套，每個(gè)單位是1/750舰涌。
比方說(shuō)：iphone6的屏幕寬度是350px，每個(gè)rpx就是0.5px你稚。也就是說(shuō)如果我們?cè)趇phone6機(jī)器上將size的值設(shè)置為60rpx瓷耙，他與設(shè)置為30或者30px的效果是一樣的朱躺。
組件color屬性是改變圖標(biāo)所有像素點(diǎn)的顏色
常見(jiàn)問(wèn)題
圖標(biāo)與文本能否放在同一行中？
可以的搁痛，圖標(biāo)本身就是為了更好的布局和更方便使用而誕生的长搀。代碼如下：
<view style="font-size: 17px;margin-top: 20px;">
我是一行文字，<icon type="success" size="15"></icon>我里面包含了圖標(biāo)鸡典！
</view>
有時(shí)候真機(jī)上Icon顯示空白源请？
首先此問(wèn)題肯定不是由于字體文件鏈接沒(méi)有加入小程序的安全域名，WXSS加載圖片及字體允許外域彻况！如果圖標(biāo)是自定義實(shí)現(xiàn)的谁尸，要檢查一下機(jī)型及嵌入的字體文件類型，可能是兼容性引起的疗垛，在小程序中推薦使用TTF和WOFF格式的字體症汹。如果使用的是這兩種字體，情況依然存在贷腕，可以考慮換SVG格式的數(shù)據(jù)嵌入。
weui組件庫(kù)里的icon組件的圖標(biāo)如何取出來(lái)咬展，保存在本地泽裳？
直接可以打開(kāi)weui官網(wǎng)，然后通過(guò)瀏覽器開(kāi)發(fā)者工具查看源碼破婆，找到資源地址然后下載涮总。或者在微信的官方文檔上下載祷舀。
優(yōu)點(diǎn)
開(kāi)箱即用瀑梗。
缺點(diǎn)
只支持success, success_no_circle, info, warn, waiting, cancel, download, search, clear這幾種類型，遠(yuǎn)遠(yuǎn)不能滿足開(kāi)發(fā)需求裳扯。
自定義實(shí)現(xiàn)圖標(biāo)
直接使用圖片
優(yōu)點(diǎn)
簡(jiǎn)單粗暴抛丽，每個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)圖片。
缺點(diǎn)
- 圖片在文本中不方便布局饰豺。不方便修改顏色亿鲜。
- 圖片不能升縮，放大之后會(huì)變虛冤吨、有鋸齒蒿柳。
- 圖片需要在本地或者網(wǎng)絡(luò)上存儲(chǔ)，這樣將導(dǎo)致大量HTTP請(qǐng)求漩蟆，使得頁(yè)面加載速度變慢垒探。
- 使用起來(lái)不如圖標(biāo)只使用一個(gè)名稱那么方便。
使用精靈圖
Sprite怠李，連續(xù)圖片集圾叼，以非重疊仔引、最小化分布的方式排列成一張圖片。每次使用的時(shí)候通過(guò)縱橫顯示的起始坐標(biāo)及區(qū)域大小褐奥，以達(dá)到動(dòng)態(tài)切換的效果咖耘。
使用示例
通過(guò)精靈圖實(shí)現(xiàn)一個(gè)爆炸效果。圖片大小為（650x650） px撬码；所以每一個(gè)小圖標(biāo)大小為（130x130）px儿倒；這是css樣式設(shè)置的width和height為130px的原因，也是js代碼移動(dòng)step設(shè)置為130的原因呜笑。js中l(wèi)eft和top均為負(fù)數(shù)夫否，這是由于這里不是顯示圖標(biāo)的坐標(biāo)，而是背景圖片所要向左上方移動(dòng)的距離叫胁。
注意：在wxss中只可以使用網(wǎng)絡(luò)圖片凰慈，不能使用本地圖片泛领！
代碼如下：
<!--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)
},
})
優(yōu)點(diǎn)
- 在加載的時(shí)候庶近，只加載一次逮栅。減少了HTTP請(qǐng)求斗蒋。
使用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);
}
缺點(diǎn)
- 每個(gè)圖標(biāo)都需要寫CSS樣式代碼徐钠，勞動(dòng)量大反镇。
- 這種圖標(biāo)不是字符毁涉，每個(gè)圖標(biāo)在繪制時(shí)要統(tǒng)一一個(gè)中心點(diǎn)饼齿，不然使用起來(lái)控制位置會(huì)比較麻煩买乃。
- 大小與顏色也不方便控制姻氨。所以這并不是一種好的圖標(biāo)方案。
使用矢量字體 （推薦使用）
當(dāng)瀏覽器渲染一個(gè)字符的時(shí)候剪验，首先看font-family樣式肴焊，確定使用字體名是哪一個(gè)。接著以此字符的Unicode在字體文件里查找對(duì)應(yīng)的字符信息功戚。
字體類型有兩種娶眷，一種是點(diǎn)陣字體，一種是矢量字體∫咄現(xiàn)在使用最廣泛的是矢量字體茂浮。矢量字體大概分成三類：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)站果善，我們可以在此網(wǎng)站上搜索到任何圖片在線編輯，并下載樣式文件系谐，在小程序里面使用巾陕。
字體源說(shuō)明：
- EOT是微軟IE瀏覽器專用的OpenType字體類型。
- TTF是TrueType字體纪他。
- WOFF與WOFF2是移動(dòng)開(kāi)發(fā)專用的矢量字體格式鄙煤。是對(duì)三種矢量字體格式的再封裝。
鏈接各種字體文件源可以兼容不同瀏覽器宿主環(huán)境茶袒。瀏覽器會(huì)選擇自己支持的格式梯刚，從列表中的第一個(gè)開(kāi)始嘗試加載。一旦獲得一個(gè)可以使用的薪寓，就不會(huì)再加載剩下的字體格式了亡资。小程序里面建議使用TTF和WOFF這兩個(gè)格式。WOFF2在低版本的IOS設(shè)備上會(huì)有不兼容的問(wèn)題预愤。
使用示例可以參考此文章
使用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)了。
示例
- 準(zhǔn)備SVG圖片
<svg t="1636971106558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M326.2 429.7L710 428 525.4 892.1z" fill="#83A4FF" p-id="1339"></path><path d="M370.2 271.1l292.4 2.6 51.7 113-379.5-2.6z" fill="#FF7E71" p-id="1340"></path><path d="M296.1 380.7L64.9 284.1l124.2-92.3 148.4 76.7z" fill="#A4BEFF" p-id="1341"></path><path d="M64.9 330.5L284 428l235.5 460.6zM755.6 427.1L960.9 321 528.8 886z" fill="#5B79FB" p-id="1342"></path><path d="M751.3 379.8l-57.8-119 132-73.4 113.8 95.8z" fill="#A4BEFF" p-id="1343"></path><path d="M365.8 233.4l-50-12.9-94-52.7 110.4-39.6h360.6l109.5 45.7-105.2 50.9-35.4 8.6z" fill="#C7D8FF" p-id="1344"></path></svg>
- 使用線上Image2base64轉(zhuǎn)換圖片為：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+
- 編寫代碼
.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 引擎
