feat: tag 增加iconSize属性，提取元素变量

src/packages/tag/demo.taro.tsx

@@ -40,6 +40,7 @@ const TagDemo = () => {
             linkSlot={
               <Tag
                 closeable
+                iconSize="14px"
                 onClose={() => Taro.showToast({ title: 'Tag closed' })}
                 type="primary"
               >

src/packages/tag/demo.tsx

@@ -37,7 +37,12 @@ const TagDemo = () => {
           <Cell
             title="可关闭标签"
             linkSlot={
-              <Tag closeable onClose={() => alert('Tag closed')} type="primary">
+              <Tag
+                closeable
+                iconSize="14px"
+                onClose={() => alert('Tag closed')}
+                type="primary"
+              >
                 标签
               </Tag>
             }

src/packages/tag/doc.en-US.md

@@ -199,6 +199,7 @@ export default App;
 | round      | Whether it is a rounded style                      | Boolean | `false`   |
 | mark       | Whether it is a tag style                          | Boolean | `false`   |
 | closeable  | Whether it can be closed label                     | Boolean | `false`   |
+| iconSize | the size of closed label  | string | number | ` 12px`|
 
 ### Event
 
@@ -216,6 +217,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value |
 | --- | --- |
+| --nutui-tag-padding | ` 0 4px`|
 | --nutui-tag-font-size | ` 12px` |
 | --nutui-tag-default-border-radius | `  4px` |
 | --nutui-tag-round-border-radius | ` 8px` |

src/packages/tag/doc.md

@@ -199,6 +199,7 @@ export default App;
 | round      | 是否为圆角样式                                   | Boolean | `false`   |
 | mark       | 是否为标记样式                                   | Boolean | `false`   |
 | closeable  | 是否为可关闭标签                                 | Boolean | `false`   |
+| iconSize | 关闭标签的尺寸 | string | number | ` 12px`|
 
 ### Event
 
@@ -217,6 +218,7 @@ export default App;
 
 | 名称 | 默认值 |
 | --- | --- |
+| --nutui-tag-padding | ` 0 4px`|
 | --nutui-tag-font-size | ` 12px` |
 | --nutui-tag-default-border-radius | `  4px` |
 | --nutui-tag-round-border-radius | ` 8px` |

src/packages/tag/doc.taro.md

@@ -198,6 +198,7 @@ export default App;
 | round      | 是否为圆角样式                                   | Boolean | `false`   |
 | mark       | 是否为标记样式                                   | Boolean | `false`   |
 | closeable  | 是否为可关闭标签                                 | Boolean | `false`   |
+| iconSize | 关闭标签的尺寸 | string | number | ` 12px`|
 
 ### Event
 
@@ -216,6 +217,7 @@ export default App;
 
 | 名称 | 默认值 |
 | --- | --- |
+| --nutui-tag-padding | ` 0 4px`|
 | --nutui-tag-font-size | ` 12px` |
 | --nutui-tag-default-border-radius | `  4px` |
 | --nutui-tag-round-border-radius | ` 8px` |

src/packages/tag/doc.zh-TW.md

@@ -198,7 +198,7 @@ export default App;
 | round      | 是否為圓角樣式                                   | Boolean | `false`   |
 | mark       | 是否為標記樣式                                   | Boolean | `false`   |
 | closeable  | 是否为可关闭標籤                                 | Boolean | `false`   |
-
+| iconSize | 关闭标签的尺寸 | string | number | ` 12px`|
 
 ### Event
 
@@ -215,6 +215,7 @@ export default App;
 
 | 名稱 | 默認值 |
 | --- | --- |
+| --nutui-tag-padding | ` 0 4px`|
 | --nutui-tag-font-size | ` 12px` |
 | --nutui-tag-default-border-radius | `  4px` |
 | --nutui-tag-round-border-radius | ` 8px` |

src/packages/tag/tag.scss

@@ -1,12 +1,14 @@
 @import '../icon/icon.scss';
+
 .nut-tag {
-  padding: 0 4px;
+  padding: $tag-padding;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   font-size: $tag-font-size;
   border-radius: $tag-default-border-radius;
   height: $tag-height;
+
   ._icon {
     vertical-align: middle;
     margin-left: 4px;

src/packages/tag/tag.taro.tsx

@@ -4,10 +4,10 @@ import React, {
   useEffect,
   useState,
 } from 'react'
+import classNames from 'classnames'
 import Icon from '@/packages/icon/index.taro'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import classNames from 'classnames'
 
 export interface TagProps extends BasicComponent {
   type: TagType
@@ -17,6 +17,7 @@ export interface TagProps extends BasicComponent {
   round: boolean
   mark: boolean
   closeable: boolean
+  iconSize?: string | number
   prefixCls: string
   onClick: (e: MouseEvent) => void
   onClose: (e?: any) => void
@@ -34,6 +35,7 @@ const defaultProps = {
   round: false,
   mark: false,
   closeable: false,
+  iconSize: '12px',
   prefixCls: 'nut-tag',
   onClose: (e: any) => {},
   onClick: (e: MouseEvent) => {},
@@ -50,6 +52,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
     children,
     mark,
     closeable,
+    iconSize,
     textColor,
     onClick,
     onClose,
@@ -71,6 +74,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
     round,
     mark,
     closeable,
+    iconSize,
     prefixCls,
     onClick,
     onClose,
@@ -125,7 +129,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
               fontClassName={iconFontClassName}
               className="_icon"
               name="close"
-              size="12"
+              size={iconSize}
               onClick={(e) => {
                 setIsTagShow(false)
                 if (props.onClose) {

src/packages/tag/tag.tsx

@@ -4,10 +4,10 @@ import React, {
   useEffect,
   useState,
 } from 'react'
+import classNames from 'classnames'
 import Icon from '@/packages/icon'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import classNames from 'classnames'
 
 export interface TagProps extends BasicComponent {
   type: TagType
@@ -17,6 +17,7 @@ export interface TagProps extends BasicComponent {
   round: boolean
   mark: boolean
   closeable: boolean
+  iconSize?: string | number
   prefixCls: string
   onClick: (e: MouseEvent) => void
   onClose: (e?: any) => void
@@ -34,6 +35,7 @@ const defaultProps = {
   round: false,
   mark: false,
   closeable: false,
+  iconSize: '12px',
   prefixCls: 'nut-tag',
   onClose: (e: any) => {},
   onClick: (e: MouseEvent) => {},
@@ -50,6 +52,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
     children,
     mark,
     closeable,
+    iconSize,
     textColor,
     onClick,
     onClose,
@@ -71,6 +74,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
     round,
     mark,
     closeable,
+    iconSize,
     prefixCls,
     onClick,
     onClose,
@@ -125,7 +129,7 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
               fontClassName={iconFontClassName}
               className="_icon"
               name="close"
-              size="12"
+              size={iconSize}
               onClick={(e) => {
                 setIsTagShow(false)
                 if (props.onClose) {

src/styles/variables.scss

@@ -1230,6 +1230,7 @@ $timeselect-timedetail-time-font-size: var(
 ) !default;
 
 //tag（✅）
+$tag-padding: var(--nutui-tag-padding, 0 4px) !default;
 $tag-font-size: var(--nutui-tag-font-size, 12px) !default;
 $tag-default-border-radius: var(
   --nutui-tag-default-border-radius,