feat(rate): rate组件库支持自定义图标前缀iconPrefix,适配第三方图标库

package.json

@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}

src/rate/README.en-US.md

@@ -6,34 +6,21 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 allow-half | Boolean | false | \- | N
-color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
 count | Number | 5 | \- | N
-disabled | Boolean | - | \- | N
+custom-style `v0.25.0` | String | - | \- | N
+disabled | Boolean | false | \- | N
 external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
-gap | String / Number | 8 | \- | N
-icon | String / Array | - | Typescript：`string \| string[]` | N
+gap | Number | 8 | \- | N
 show-text | Boolean | false | \- | N
-size | String | 24px | \- | N
+size | String | 20 | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
 value | Number | 0 | \- | N
 default-value | Number | undefined | uncontrolled property | N
+iconPrefix | String  | undefined | icon prefix | N        
 variant | String | outline | options：outline/filled | N
 
 ### Rate Events
 
 name | params | description
 -- | -- | --
 change | `(value: number)` | \-
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-rate-icon-scale | 1.33 | - 
---td-rate-selected-color | @warning-color | - 
---td-rate-text-active-color | @font-gray-1 | - 
---td-rate-text-active-font-weight | 600 | - 
---td-rate-text-color | @font-gray-4 | - 
---td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 

src/rate/README.md

@@ -58,6 +58,10 @@ isComponent: true
 
 {{ special }}
 
+自定义图片前缀
+
+{{iconPrefix}}
+
 
 ## API
 ### Rate Props
@@ -75,6 +79,7 @@ size | String | 24px | 评分图标的大小 | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
 value | Number | 0 | 选择评分的值 | N
 default-value | Number | undefined | 选择评分的值。非受控属性 | N
+iconPrefix | String | undefined | 定义图标前缀 
 variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
 
 ### Rate Events

src/rate/_example/custom-prefix/index.js

@@ -0,0 +1,13 @@
+Component({
+  data: {
+    value: 3,
+  },
+  methods: {
+    onChange(e) {
+      const { value } = e.detail;
+      this.setData({
+        value,
+      });
+    },
+  },
+});

src/rate/_example/custom-prefix/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/custom-prefix/index.wxml

@@ -0,0 +1,4 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">自定义icon前缀</view>
+  <t-rate value="{{value}}" iconPrefix="icon" icon="a-1h" bind:change="onChange" />
+</view>

src/rate/_example/custom-prefix/index.wxss

@@ -0,0 +1,22 @@
+.demo-rate {
+  background-color: #fff;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/iconfont.wxss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'icon'; /* Project id 3144196 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.woff?t=1642299317916') format('woff'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.ttf?t=1642299317916') format('truetype');
+}
+
+.icon {
+  font-family: 'icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-0:before {
+  content: '\e64d';
+}
+
+.icon-a-1h:before {
+  content: '\e64e';
+}
+
+.icon-a-2h:before {
+  content: '\e64f';
+}
+
+.icon-a-3h:before {
+  content: '\e650';
+}

src/rate/_example/rate.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "base": "./base",
     "custom": "./custom",
+    "custom-prefix": "./custom-prefix",
     "special": "./special",
     "un-filled": "./un-filled",
     "count": "./count",

src/rate/_example/rate.less

@@ -0,0 +1 @@
+@import './iconfont.wxss';

src/rate/_example/rate.wxml

@@ -8,6 +8,9 @@
     <view class="demo-desc">自定义评分</view>
     <custom />
 
+    <view class="demo-desc">自定义icon前缀评分(适配自有图标库)</view>
+    <custom-prefix />
+
     <view class="demo-desc">自定义评分数量</view>
     <count />
 

src/rate/props.ts

@@ -34,6 +34,11 @@ const props: TdRateProps = {
     type: null,
     value: 8,
   },
+  /** 自定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    value: undefined,
+  },
   /** 自定义评分图标，[选中图标，未选中图标] */
   icon: {
     type: null,

src/rate/rate.wxml

@@ -24,6 +24,7 @@
       t-class="{{prefix}}-class-icon"
       name="{{utils.getIconName(defaultValue, value, index, icon)}}"
       size="{{ size }}"
+      prefix="{{iconPrefix}}"
     />
   </view>
   <text

src/rate/type.ts

@@ -59,6 +59,14 @@ export interface TdRateProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 自定义图标前缀
+   */
+  iconPrefix?: {
+    type: StringConstructor;
+    value?: string;
+    reuqired?: boolean;
+  };
   /**
    * 自定义评分图标，[选中图标，未选中图标]
    */