Repository: Tencent/tdesign-mobile-vue
Pull request #1009 (2023-08-03 07:36:16)

feat(collapse): support header-left-icon
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [x] 新特性提交
- [x] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
无

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->
无

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(CollapsePanel): 新增 `headerLeftIcon` 属性

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: **Size Change:** +56 B (0%) 

**Total Size:** 388 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 204 kB | +39 B (0%) |
| `./dist/tdesign.min.js` | 118 kB | +17 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.min.css` | 27.2 kB |

</details>


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5748010241)
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/badge/badge.vue b/src/badge/badge.vue
index a3d622e4..e45a9865 100644
--- a/src/badge/badge.vue
+++ b/src/badge/badge.vue
@@ -30,11 +30,11 @@ export default defineComponent({
   name,
   components: { TNode },
   props: BadgeProps,
-  setup(props) {
+  setup(props, context) {
     const internalInstance = getCurrentInstance();
     const badgeContent = computed(() => renderContent(internalInstance, 'default', 'content'));
     const countContent = computed(() => {
-      if (typeof props.count === 'function') {
+      if (typeof props.count === 'function' || context.slots.count) {
         return renderTNode(internalInstance, 'count');
       }
       return null;
@@ -46,7 +46,7 @@ export default defineComponent({
         return true;
       }
       const count = Number(props.count);
-      if (!props.showZero && !isNaN(count) && count === 0) {
+      if (!props.showZero && count === 0) {
         return false;
       }
       if (props.count == null) return false;
diff --git a/src/collapse/collapse-panel-props.ts b/src/collapse/collapse-panel-props.ts
index 76c4ccda..dff02252 100644
--- a/src/collapse/collapse-panel-props.ts
+++ b/src/collapse/collapse-panel-props.ts
@@ -32,6 +32,10 @@ export default {
   header: {
     type: [String, Function] as PropType<TdCollapsePanelProps['header']>,
   },
+  /** 面板头左侧图标 */
+  headerLeftIcon: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['headerLeftIcon']>,
+  },
   /** 面板头的右侧区域，一般用于呈现面板操作 */
   headerRightContent: {
     type: [String, Function] as PropType<TdCollapsePanelProps['headerRightContent']>,
diff --git a/src/collapse/collapse-panel.vue b/src/collapse/collapse-panel.vue
index b69e34b7..68bf8d35 100644
--- a/src/collapse/collapse-panel.vue
+++ b/src/collapse/collapse-panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapRef" :class="rootClass">
+  <div ref="wrapRef" :class="rootClass" :style="{ height: wrapperHeight }">
     <div ref="headRef" :class="`${name}__title`" @click="handleClick">
       <t-cell
         :class="[`${name}__header`, `${name}__header--${placement}`, { [`${name}__header--expanded`]: isActive }]"
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance, h } from 'vue';
+import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
 import isFunction from 'lodash/isFunction';
 import TCell from '../cell';
@@ -91,18 +91,19 @@ export default defineComponent({
     const bodyRef = ref();
     const wrapRef = ref();
     const headRef = ref();
+    const wrapperHeight = ref('');
     const updatePanelState = () => {
       if (!wrapRef.value) {
         return;
       }
       const { height: headHeight } = headRef.value.getBoundingClientRect();
       if (!isActive.value) {
-        wrapRef.value.style.height = `${headHeight}px`;
+        wrapperHeight.value = `${headHeight}px`;
         return;
       }
       const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
       const height = headHeight + bodyHeight;
-      wrapRef.value.style.height = `${height}px`;
+      wrapperHeight.value = `${height}px`;
     };
 
     watch(isActive, () => {
@@ -131,6 +132,7 @@ export default defineComponent({
       panelContent,
       headerContent,
       noteContent,
+      wrapperHeight,
     };
   },
 });
diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md
index 754e6890..e5781622 100644
--- a/src/collapse/collapse.en-US.md
+++ b/src/collapse/collapse.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Collapse Props
 
 name | type | default | description | required
@@ -10,7 +9,7 @@ defaultExpandAll | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 expandIcon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 expandMutex | Boolean | false | \- | N
-theme | String | default | options：default/card | N
+theme | String | default | options: default/card | N
 value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 onChange | Function |  | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`<br/> | N
@@ -31,8 +30,9 @@ destroyOnCollapse | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 expandIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-placement | String | bottom | options：bottom/top | N
+placement | String | bottom | options: bottom/top | N
 value | String / Number | - | \- | N
 
 
diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md
index 6247a4b2..9dc75bd0 100644
--- a/src/collapse/collapse.md
+++ b/src/collapse/collapse.md
@@ -26,10 +26,11 @@ change | `(value: CollapseValue, context: { e: MouseEvent })` | 切换面板时
 -- | -- | -- | -- | --
 content | String / Slot / Function | - | 折叠面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 折叠面板内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N
+destroyOnCollapse | Boolean | false | 【暂不支持】当前面板处理折叠状态时，是否销毁面板内容 | N
 disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
 expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | 面板头左侧图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
diff --git a/src/collapse/type.ts b/src/collapse/type.ts
index a965ffe9..5f6d1f19 100644
--- a/src/collapse/type.ts
+++ b/src/collapse/type.ts
@@ -78,6 +78,10 @@ export interface TdCollapsePanelProps {
    * 面板头内容
    */
   header?: string | TNode;
+  /**
+   * 面板头左侧图标
+   */
+  headerLeftIcon?: string | TNode;
   /**
    * 面板头的右侧区域，一般用于呈现面板操作
    */
diff --git a/src/common.ts b/src/common.ts
index 177d1a7b..a5f102ba 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -78,7 +78,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {
@@ -121,3 +121,7 @@ export interface ScrollToElementParams {
   time?: number;
   behavior?: 'auto' | 'smooth';
 }
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key: string | number;
+}
diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md
index ed6e3d2b..d19cabb8 100644
--- a/src/rate/rate.en-US.md
+++ b/src/rate/rate.en-US.md
@@ -16,7 +16,6 @@ size | String | 24px | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
 value | Number | 0 | `v-model` and `v-model:value` is supported | N
 defaultValue | Number | 0 | uncontrolled property | N
-variant | String | outline | options：outline/filled | N
 onChange | Function |  | Typescript：`(value: number) => void`<br/> | N
 
 ### Rate Events
diff --git a/src/rate/rate.md b/src/rate/rate.md
index 9c0ddfc9..febf96c9 100644
--- a/src/rate/rate.md
+++ b/src/rate/rate.md
@@ -16,7 +16,6 @@ size | String | 24px | 评分图标的大小 | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
 value | Number | 0 | 选择评分的值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | Number | 0 | 选择评分的值。非受控属性 | N
-variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
 onChange | Function |  | TS 类型：`(value: number) => void`<br/>评分数改变时触发 | N
 
 ### Rate Events
diff --git a/src/rate/rate.vue b/src/rate/rate.vue
index f66d48db..a8577863 100644
--- a/src/rate/rate.vue
+++ b/src/rate/rate.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { ref, computed, defineComponent, h } from 'vue';
-import { StarFilledIcon, StarIcon } from 'tdesign-icons-vue-next';
+import { StarFilledIcon } from 'tdesign-icons-vue-next';
 import { onClickOutside } from '@vueuse/core';
 import rateProps from './props';
 import config from '../config';
@@ -121,7 +121,7 @@ export default defineComponent({
     });
 
     const regSize = (val: string | number) => {
-      return `${val}`.indexOf('px') > 0 ? val : `${val}px`;
+      return `${val}`.includes('px') ? val : `${val}px`;
     };
     const unitConvert = (value: number | string): number => {
       if (typeof value === 'string') {
@@ -131,10 +131,11 @@ export default defineComponent({
     };
 
     const icon = (isSelect: boolean) => {
-      const { variant, icon } = props;
-      const startComponent = variant === 'filled' ? StarFilledIcon : StarIcon;
+      const { icon } = props;
+      const startComponent = StarFilledIcon;
       let select = startComponent;
       let unSelect = startComponent;
+
       if (Array.isArray(icon)) {
         const [_select, _unSelect] = icon;
         if (typeof _select === 'function') {
@@ -179,18 +180,12 @@ export default defineComponent({
 
     const classes = (n: number) => {
       const classPrefix = `${name}__icon`;
-      const className = {
+
+      return {
         [classPrefix]: true,
+        [`${classPrefix}--current`]: scaleIndex.value === Math.ceil(n),
+        [`${classPrefix}--${actualVal.value >= n ? 'selected' : 'unselected'}`]: true,
       };
-      if (scaleIndex.value === Math.ceil(n)) {
-        className[`${classPrefix}--current`] = true;
-      }
-      if (actualVal.value >= n) {
-        className[`${classPrefix}--selected`] = true;
-      } else {
-        className[`${classPrefix}--unselected`] = true;
-      }
-      return className;
     };
 
     const ratePopoverRef = ref<HTMLElement>();


Test patch:
diff --git a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
index 11bf8aec..f9a2a28f 100644
--- a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,7 +8,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -77,7 +76,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -146,7 +144,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -215,7 +212,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -294,7 +290,6 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -372,7 +367,6 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -451,7 +445,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -520,7 +513,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -589,7 +581,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -658,7 +649,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -771,7 +761,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -866,7 +855,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--top"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -957,7 +945,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1053,7 +1040,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1122,7 +1108,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1191,7 +1176,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1260,7 +1244,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1361,7 +1344,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1430,7 +1412,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1499,7 +1480,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1568,7 +1548,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1651,7 +1630,6 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--top"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
index 210d8e4b..814678df 100644
--- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
@@ -702,28 +702,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--selected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -738,28 +738,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--selected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -774,28 +774,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -810,28 +810,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -846,28 +846,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -2747,28 +2747,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--selected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2783,28 +2783,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--selected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2819,28 +2819,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2855,28 +2855,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2891,28 +2891,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
diff --git a/src/rate/__test__/index.test.jsx b/src/rate/__test__/index.test.jsx
index a01ea199..8d76d9f6 100644
--- a/src/rate/__test__/index.test.jsx
+++ b/src/rate/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { ref, nextTick, markRaw } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import { ThumbUpIcon, ThumbDownIcon, StarIcon } from 'tdesign-icons-vue-next';
+import { ThumbUpIcon, ThumbDownIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
 import Rate from '../rate.vue';
 import { trigger } from '../../image-viewer/__test__/touch';
 
@@ -20,7 +20,7 @@ describe('Rate', () => {
     expect(wrapper.classes()).toContain(`${name}`);
     const items = wrapper.findAll(`.${name}__icon`);
     expect(items.length).toBe(5);
-    const icon = wrapper.findComponent(StarIcon);
+    const icon = wrapper.findComponent(StarFilledIcon);
     expect(icon.exists()).toBeTruthy();
 
     const $target = wrapper.find(`.${name}__wrapper`);