feat(sidebar): finish support icon

example/app.json

@@ -55,7 +55,7 @@
   "subpackages": [
     {
       "root": "pages/side-bar/",
-      "pages": ["side-bar", "base/index", "switch/index", "custom/index"]
+      "pages": ["side-bar", "base/index", "switch/index", "custom/index", "with-icon/index"]
     },
     {
       "root": "pages/action-sheet/",

src/side-bar-item/props.ts

@@ -15,6 +15,10 @@ const props: TdSideBarItemProps = {
     type: Boolean,
     value: false,
   },
+  /* 图标，传对象则透传至 Icon */
+  icon: {
+    type: null,
+  },
   /** 展示的标签 */
   label: {
     type: String,

src/side-bar-item/side-bar-item.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "t-badge": "../badge/badge"
+    "t-badge": "../badge/badge",
+    "t-icon": "../icon/icon"
   }
 }

src/side-bar-item/side-bar-item.less

@@ -8,8 +8,12 @@
 @side-bar-disabled-color: var(--td-side-bar-disabled-color, @font-gray-4);
 @side-bar-active-color: var(--td-side-bar-active-color, @primary-color);
 @side-bar-border-radius: var(--td-side-bar-border-radius, 18rpx);
+@side-bar-icon-size: var(--td-side-bar-icon-size, 40rpx);
 
 .@{prefix}-side-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   padding: 32rpx;
   font-size: @side-bar-font-size;
@@ -26,6 +30,11 @@
     color: @side-bar-active-color;
   }
 
+  &__icon {
+    font-size: @side-bar-icon-size;
+    margin-right: 4rpx;
+  }
+
   &__prefix,
   &__suffix {
     z-index: 1;

src/side-bar-item/side-bar-item.ts

@@ -21,7 +21,11 @@ export default class SideBarItem extends SuperComponent {
     },
   };
 
-  observers = {};
+  observers = {
+    icon(v) {
+      this.setData({ _icon: typeof v === 'string' ? { name: v } : v });
+    },
+  };
 
   data = {
     classPrefix: name,

src/side-bar-item/side-bar-item.wxml

@@ -1,4 +1,5 @@
 <import src="../common/template/badge" />
+<import src="../common/template/icon" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
@@ -13,6 +14,7 @@
     <view class="{{classPrefix}}__prefix"></view>
     <view class="{{classPrefix}}__suffix"></view>
   </block>
+  <template wx:if="{{_icon}}" is="icon" data="{{ class: classPrefix + '__icon', ..._icon }}" />
   <block wx:if="{{badgeProps}}">
     <template is="badge" data="{{ ...badgeProps, content: label }}" />
   </block>

src/side-bar-item/type.ts

@@ -20,6 +20,12 @@ export interface TdSideBarItemProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 图标，传对象则透传至 Icon
+   */
+  icon?: {
+    type: null;
+  };
   /**
    * 展示的标签
    * @default ''

src/side-bar/README.en-US.md

@@ -21,5 +21,6 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 badge-props | Object | - | \- | N
 disabled | Boolean | false | \- | N
+icon | String / Object | - | `1.0.0-rc.1` | N
 label | String | - | \- | N
 value | String / Number | - | \- | N

src/side-bar/README.md

@@ -35,6 +35,14 @@ isComponent: true
 
 {{ switch }}
 
+### 带图标侧边导航
+
+{{ with-icon }}
+
+### 自定义样式
+
+{{ custom }}
+
 ## API
 ### SideBar Props
 
@@ -56,5 +64,6 @@ click | `(value: number \| string, label: string)` | 点击选项时触发
 -- | -- | -- | -- | --
 badge-props | Object | - | 透传至 Badge 组件 | N
 disabled | Boolean | false | 是否禁用 | N
+icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 展示的标签 | N
 value | String / Number | - | 当前选项的值 | N