feat(button): add third-party icon support (jd-opensource#1018)

gp5251 · Feb 22, 2022 · ae26d18 · ae26d18
1 parent 795a0b9
commit ae26d18
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/src/packages/__VUE/button/doc.md b/src/packages/__VUE/button/doc.md
@@ -130,6 +130,16 @@ app.use(Button);
 
 :::
 
+#### 自定义图标
+
+参照 `Icon` 组件说明中的自定义图标，其中 `icon-font-class-name` 对应 Icon 组件的 `font-class-name`，`icon-class-prefix` 对应 Icon 组件的 `class-prefix`。
+
+```html
+<template>
+  <nut-button shape="square" plain type="primary" icon-font-class-name="iconfont" icon-class-prefix="icon" icon="close"></nut-button>
+</template>
+```
+
 ### 按钮尺寸
 
 支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。

diff --git a/src/packages/__VUE/button/index.taro.vue b/src/packages/__VUE/button/index.taro.vue
@@ -2,7 +2,12 @@
   <button :class="classes" :style="getStyle" @click="handleClick">
     <view class="nut-button__warp">
       <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
-      <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
+      <nut-icon
+        v-if="icon && !loading"
+        :name="icon"
+        :class-prefix="iconClassPrefix"
+        :font-class-name="iconFontClassName"
+      ></nut-icon>
       <view :class="{ text: icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
@@ -55,6 +60,14 @@ export default create({
     icon: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],

diff --git a/src/packages/__VUE/button/index.vue b/src/packages/__VUE/button/index.vue
@@ -2,7 +2,12 @@
   <view :class="classes" :style="getStyle" @click="handleClick">
     <view class="nut-button__warp">
       <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
-      <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
+      <nut-icon
+        v-if="icon && !loading"
+        :name="icon"
+        :class-prefix="iconClassPrefix"
+        :font-class-name="iconFontClassName"
+      ></nut-icon>
       <view :class="{ text: icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
@@ -56,6 +61,14 @@ export default create({
     icon: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],