百度智能小程序 圖標

icon 圖標

解釋： 包括天氣、系統(tǒng)設(shè)置、互動社交、生活服務(wù)、書籍影音、政務(wù)服務(wù)、交通出行 7 個行業(yè)類別的圖標。請掃描示例二維碼查看圖標全集。詳細設(shè)計文檔參考圖片圖標。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例 1： 自定義 icon 類型

<view class="icon-item" s-for="item in list">
    <view class="icon-inner">
        <view><smt-icon name="{{item}}" size="{{iconSize}}" /></view>
        <view class="en-name">{{item}}</view>
    </view>
</view>

Page({
    data: {
        // 更多icon請參看右側(cè)示例的icon全集
        list: ['arrow-left', 'arrow-down', 'arrow', 'arrow-up', 'arrow-bottom-right', 'arrow-top-left']
        iconSize: '39.86rpx'
    }
});

.icon-item {
    display: inline-block;
    width: 25%;
    text-align: center;
    box-sizing: border-box;
}
.icon-item .icon-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 22.94686vw;
    padding: 0 4.23rpx;
    font-size: 0;
}
.icon-item .en-name {
    white-space: normal;
    font-size: 23.55rpx;
    margin-top: 27.17rpx;
}

設(shè)計指南

提供 2 種主題的圖標，單色線型和多色面型。框架和基礎(chǔ)功能類頁面可選擇單色圖標，重點內(nèi)容分類入口（金剛位）可選擇多色圖標。

代碼示例 2： 自定義 icon 顏色

<view>
    <smt-icon name="add" color="{{color1}}" />
    <smt-icon name="smart-game-m" size="30px"  color="{{color2}}"/>
</view>

Page({
    data: {
        color1: '#3388ff',
        color2: ['#ffdd52', '#ffc92c', '#ffa808', '#ffa808']
    }
});

代碼示例 3： 自定義 icon 大小

<view>
    <smt-icon name="add" size="30px" />
    <smt-icon name="add" size="36.232rpx"/>
    <smt-icon name="add" size="6vw" />
</view>