feat: 单选框和复选框支持外部自定义图标 (#1182)

src/packages/__VUE/checkbox/doc.md

@@ -248,6 +248,8 @@ app.use(Checkbox).use(CheckboxGroup).use(Icon);
 | icon-size | [图标尺寸](#/icon) | String、Number | `18`
 | icon-name | [图标名称](#/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
 | icon-active-name | [图标名称](#/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
+| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
+| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 
 

src/packages/__VUE/checkbox/index.taro.vue

@@ -35,6 +35,14 @@ export default create({
     label: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -71,11 +79,13 @@ export default create({
     };
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName } = props;
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
       return h(nutIcon, {
         name: !pValue.value ? iconName : iconActiveName,
         size: iconSize,
-        class: color.value
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
       });
     };
 

src/packages/__VUE/checkbox/index.vue

@@ -36,6 +36,14 @@ export default create({
     label: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -72,11 +80,13 @@ export default create({
     };
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName } = props;
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
       return h(nutIcon, {
         name: !pValue.value ? iconName : iconActiveName,
         size: iconSize,
-        class: color.value
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
       });
     };
 

src/packages/__VUE/radio/doc.md

@@ -207,6 +207,8 @@ app.use(Radio).use(RadioGroup);
 | icon-size        | [图标尺寸](#/icon)                                           | String、Number          | `18`              |
 | icon-name        | [图标名称](#/icon)，选中前(建议和`icon-active-name`一起修改) | String                  | `'check-normal'`  |
 | icon-active-name | [图标名称](#/icon)，选中后(建议和`icon-name`一起修改)        | String                  | `'check-checked'` |
+| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
+| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label            | 单选框标识                                                   | String、Number、Boolean | -                 |
 | shape            | 形状，可选值为 button、round                                 | String                  | round             |
 

src/packages/__VUE/radio/index.taro.vue

@@ -29,6 +29,14 @@ export default create({
     iconSize: {
       type: [String, Number],
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   setup(props, { emit, slots }) {
@@ -51,11 +59,13 @@ export default create({
     });
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName } = props;
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
       return h(nutIcon, {
         name: isCurValue.value ? iconActiveName : iconName,
         size: iconSize,
-        class: color.value
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
       });
     };
 

src/packages/__VUE/radio/index.vue

@@ -29,6 +29,14 @@ export default create({
     iconSize: {
       type: [String, Number],
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   setup(props, { emit, slots }) {
@@ -51,11 +59,13 @@ export default create({
     });
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName } = props;
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
       return h(nutIcon, {
         name: isCurValue.value ? iconActiveName : iconName,
         size: iconSize,
-        class: color.value
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
       });
     };