feat: 组件图标尺寸治理

Author: irisSong

.cursor/skills/nutui-proportional-scaling/SKILL.md

@@ -79,6 +79,13 @@ description: >-
 - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。
 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。
 
+### 3.5 组件 `.tsx` 图标尺寸治理（props → class → 变量）
+
+- 对 `@nutui/icons-react` / `@nutui/icons-react-taro`：尽量避免在组件上写死 `size={12}`、`width={16}`、`height={16}`。
+- **推荐模式**：在 `.tsx` 里只加语义化 `className`，到对应 `.scss` 里用变量控制尺寸（优先 `$icon-size-*` 阶梯，或组件专用变量）。
+- 若是内联 `<svg>`（非 NutUI 图标组件）也遵循同一规则：移除 `width/height` 字面量，改为 class，并在 SCSS 用变量（可新增如 `$xxx-icon-size`，默认 `scale-icon-px(Npx)`）。
+- 新增尺寸档优先沉淀到 `variables.scss`（如 `$icon-size-11`、`$icon-size-16`），避免同一像素值在多个组件重复散落。
+
 ### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致）
 
 - **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。
@@ -104,6 +111,7 @@ description: >-
 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。
 - [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。
 - [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。
+- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。
 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
 

src/packages/calendarcard/calendarcard.scss

@@ -3,8 +3,6 @@
   border-radius: 12px;
   overflow: hidden;
   font-size: $calendar-base-font-size;
-  line-height: $line-height-l;
-  line-height: $calendar-base-font-size;
   color: $color-title;
 
   &-header {
@@ -13,6 +11,7 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {

src/packages/card/card.scss

@@ -27,7 +27,7 @@
 
     &-title {
       @include moreline-ellipsis();
-      line-height: $line-height-xl;
+      line-height: $line-height-2xl;
       font-size: $font-size-base;
       color: $color-title;
     }

src/packages/inputnumber/inputnumber.taro.tsx

@@ -184,7 +184,6 @@ export const InputNumber: FunctionComponent<
     <View className={classes} style={style}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
         <Minus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-minus`,
             {
@@ -211,7 +210,6 @@ export const InputNumber: FunctionComponent<
 
       <View className={`${classPrefix}-add`} onClick={handlePlus}>
         <Plus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-plus`,
             {

src/packages/menuitem/menuitem.taro.tsx

@@ -233,7 +233,6 @@ export const MenuItem = forwardRef((props: Partial<WebMenuItemProps>, ref) => {
                       ) : (
                         <Check
                           color={activeColor}
-                          size={16}
                           className={`nut-menu-container-item-icon ${getIconCName(item.value, value)}`}
                         />
                       )}

src/packages/noticebar/noticebar.scss

@@ -74,6 +74,11 @@
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;

src/packages/noticebar/noticebar.taro.tsx

@@ -26,7 +26,7 @@ const defaultProps = {
   content: '',
   closeable: false,
   wrap: false,
-  leftIcon: <Notice size={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent<
             className="nut-noticebar-box-right-icon"
             onClick={handleClickIcon}
           >
-            {rightIcon || <Close size={12} />}
+            {rightIcon || (
+              <Close className="nut-noticebar-box-right-icon-default" />
+            )}
           </View>
         ) : null}
       </>

src/packages/noticebar/noticebar.tsx

@@ -24,7 +24,7 @@ const defaultProps = {
   content: '',
   closeable: false,
   wrap: false,
-  leftIcon: <Notice width={16} height={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent<
           ) : null}
           {closeable || rightIcon ? (
             <div className="nut-noticebar-box-right-icon" onClick={onClickIcon}>
-              {rightIcon || <Close width={12} height={12} />}
+              {rightIcon || (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              )}
             </div>
           ) : null}
         </div>
@@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent<
               handleClickIcon(e)
             }}
           >
-            {rightIcon || (closeable ? <Close width={12} height={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              ) : null)}
           </div>
         </div>
       ) : null}

src/packages/notify/notify.scss

@@ -98,4 +98,9 @@
       width: 12px;
     }
   }
+
+  &-close-icon {
+    height: $icon-size-12;
+    width: $icon-size-12;
+  }
 }

src/packages/notify/notify.taro.tsx

@@ -142,7 +142,10 @@ export const Notify: FunctionComponent<Partial<TaroNotifyProps>> & {
             className={`${classPrefix}-right-icon`}
             onClick={handleClickIcon}
           >
-            {rightIcon || (closeable ? <Close size={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className={`${classPrefix}-close-icon`} />
+              ) : null)}
           </View>
         ) : null}
       </View>