feat: icon attribute supports object type

src/avatar/README.md

@@ -64,8 +64,7 @@ badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
-icon | String / Slot | - | 图标 | N
-icon-props | Object | {} | 图标属性，透传至 icon | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String | - | 图片地址 | N
 image-props | Object | - | 透传至 Image 组件 | N
 shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N

src/avatar/avatar.ts

@@ -1,6 +1,7 @@
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import avatarProps from './props';
+import { setIcon } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-avatar`;
@@ -38,6 +39,15 @@ export default class Avatar extends SuperComponent {
     },
   };
 
+  observers = {
+    icon(icon) {
+      const obj = setIcon('icon', icon, '');
+      this.setData({
+        ...obj,
+      });
+    },
+  };
+
   methods = {
     /**
      * @description avatar-group子节点缩紧，avatar无

src/avatar/avatar.wxml

@@ -1,3 +1,5 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
 <wxs src="./avatar.wxs" module="this" />
 
 <view class="{{classPrefix}}__wrapper {{prefix}}-class" style="{{this.getAvatarStyles(isShow, zIndex, customStyle)}}">
@@ -37,15 +39,11 @@
         error="{{alt}}"
         bind:error="onLoadError"
       />
-      <t-icon
-        wx:elif="{{icon}}"
-        name="{{icon || iconProps.name}}"
-        prefix="{{iconProps.prefix}}"
-        size="{{iconProps.size}}"
-        color="{{iconProps.color}}"
-        customStyle="{{iconProps.customStyle}}"
-        class="{{classPrefix}}__icon {{prefix}}-class-icon"
-      ></t-icon>
+      <template
+        wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
+        is="icon"
+        data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', name: iconName, ...iconData}}"
+      />
       <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
         <slot />
       </view>

src/avatar/props.ts

@@ -31,12 +31,7 @@ const props: TdAvatarProps = {
   },
   /** 图标 */
   icon: {
-    type: String,
-  },
-  /** 图标属性，透传至 icon */
-  iconProps: {
-    type: Object,
-    value: {},
+    type: null,
   },
   /** 图片地址 */
   image: {

src/avatar/type.ts

@@ -49,16 +49,8 @@ export interface TdAvatarProps {
    * 图标
    */
   icon?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 图标属性，透传至 icon
-   * @default {}
-   */
-  iconProps?: {
-    type: ObjectConstructor;
-    value?: object;
+    type: null;
+    value?: string | object;
   };
   /**
    * 图片地址

src/button/README.md

@@ -65,8 +65,7 @@ custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 disabled | Boolean | false | 禁用状态 | N
 external-classes | Array | - | 组件类名。`['t-class', 't-class-icon', 't-class-loading']` | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
-icon | String | - | 图标名称 | N
-icon-props | Object | {} | 图标属性，透传至 icon | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 loading | Boolean | false | 是否显示为加载状态 | N
 loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N

src/button/button.ts

@@ -2,6 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import { canIUseFormFieldButton } from '../common/version';
+import { setIcon } from '../common/utils';
 import type { TdButtonProps } from './type';
 
 const { prefix } = config;
@@ -26,6 +27,13 @@ export default class Button extends SuperComponent {
     'theme, size, plain, block, shape, disabled, loading'() {
       this.setClass();
     },
+
+    icon(icon) {
+      const obj = setIcon('icon', icon, '');
+      this.setData({
+        ...obj,
+      });
+    },
   };
 
   lifetimes = {

src/button/button.wxml

@@ -1,3 +1,6 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
 <button
   style="{{ customStyle }}"
   data-custom="{{ customDataset }}"
@@ -25,16 +28,11 @@
   bind:chooseavatar="chooseavatar"
   aria-label="{{ariaLabel}}"
 >
-  <t-icon
-    wx:if="{{icon || iconProps.name}}"
-    name="{{icon || iconProps.name}}"
-    prefix="{{iconProps.prefix}}"
-    size="{{iconProps.size}}"
-    color="{{iconProps.color}}"
-    customStyle="{{iconProps.customStyle}}"
-    class="{{classPrefix}}__icon {{prefix}}-class-icon"
-    aria-hidden
-  ></t-icon>
+  <template
+    wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
+    is="icon"
+    data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
+  />
   <view wx:if="{{loading}}" class="{{classPrefix}}__loading">
     <t-loading
       delay="{{loadingProps.delay || 0}}"

src/button/props.ts

@@ -40,13 +40,7 @@ const props: TdButtonProps = {
   },
   /** 图标名称 */
   icon: {
-    type: String,
-    value: '',
-  },
-  /** 图标属性，透传至 icon */
-  iconProps: {
-    type: Object,
-    value: {},
+    type: null,
   },
   /** 是否显示为加载状态 */
   loading: {

src/button/type.ts

@@ -63,19 +63,10 @@ export interface TdButtonProps {
   };
   /**
    * 图标名称
-   * @default ''
    */
   icon?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 图标属性，透传至 icon
-   * @default {}
-   */
-  iconProps?: {
-    type: ObjectConstructor;
-    value?: object;
+    type: null;
+    value?: string | object;
   };
   /**
    * 是否显示为加载状态

src/empty/README.md

@@ -43,6 +43,5 @@ action | Slot | - | 操作按钮 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 description | String / Slot | - | 描述文字 | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-description', 't-class-image', 't-class-actions']` | N
-icon | String | - | 图标名称 | N
-icon-props | Object | {} | 图标属性，透传至 icon | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String / Slot | - | 图片地址 | N

src/empty/__test__/__snapshots__/index.test.js.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty props :image 1`] = `
+<wx-view
+  ariaHidden="true"
+  class="t-empty__thumb"
+>
+  <t-image
+    tClass="t-class-image"
+  >
+    <wx-view
+      ariaHidden="{{false}}"
+      class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
+      style=" "
+    >
+      <t-loading
+        class="t-class-load"
+        tClassText="t-image--loading-text"
+      >
+        <wx-view
+          class="t-class"
+          style=";width: 44rpx; height: 44rpx"
+        >
+          <wx-view
+            class="t-loading t-loading--horizontal"
+            style=""
+          >
+            <wx-view
+              class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+              style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+            >
+              <wx-view
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+              />
+              <wx-view
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+              />
+              <wx-view
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+              />
+            </wx-view>
+            <wx-view
+              class="t-loading__text t-loading__text--horizontal t-class-text"
+            />
+          </wx-view>
+        </wx-view>
+      </t-loading>
+    </wx-view>
+    <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="aspectFit"
+      showMenuByLongpress="{{false}}"
+      src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/empty__demo-image.png"
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
+</wx-view>
+`;
+
+exports[`empty props :image 2`] = `
+<t-image
+  id="t-image"
+  t-class="t-class-image"
+>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=" "
+  >
+    <t-loading
+      class="t-class-load"
+      tClassText="t-image--loading-text"
+    >
+      <wx-view
+        class="t-class"
+        style=";width: 44rpx; height: 44rpx"
+      >
+        <wx-view
+          class="t-loading t-loading--horizontal"
+          style=""
+        >
+          <wx-view
+            class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+            style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          >
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+            />
+          </wx-view>
+          <wx-view
+            class="t-loading__text t-loading__text--horizontal t-class-text"
+          />
+        </wx-view>
+      </wx-view>
+    </t-loading>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{false}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/empty__demo-image.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
+`;

src/empty/__test__/index.test.js

@@ -4,6 +4,9 @@ import path from 'path';
 describe('empty', () => {
   const empty = load(path.resolve(__dirname, `../empty`));
 
+  jest.resetModules();
+  const image = load(path.resolve(__dirname, `../../image/image`), 't-image');
+
   describe('props', () => {
     it(`:image`, () => {
       const id = simulate.load({
@@ -21,8 +24,19 @@ describe('empty', () => {
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
 
-      const image = comp.querySelector('.base >>> .t-class-image');
-      expect(image).not.toBeUndefined();
+      const $thumb = comp.querySelector('.base >>> .t-empty__thumb');
+
+      const imageId = simulate.load({
+        template: `<t-image id="t-image" src="{{image}}" mode="aspectFit"></t-image>`,
+        data: {
+          image: 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/empty__demo-image.png',
+        },
+        usingComponents: {
+          't-image': image,
+        },
+      });
+      const imageComp = simulate.render(imageId).querySelector('#t-image');
+      expect($thumb.dom.innerHTML).toContain(imageComp.dom.innerHTML);
     });
 
     it(`:action`, async () => {

src/empty/empty.json

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