chore(button): use icons-vue component

src/packages/__VUE/button/__tests__/__snapshots__/button.spec.ts.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should change icon class prefix when using icon-class-prefix prop 1`] = `
-"<view class=\\"nut-button nut-button--default nut-button--normal nut-button--round\\">
-  <view class=\\"nut-button__warp\\">
-    <!--v-if-->
-    <!---->
-    <!--v-if-->
-  </view>
-</view>"
-`;

src/packages/__VUE/button/__tests__/button.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Button from '../index.vue';
 import { nextTick } from 'vue';
+import { StarFill } from '@nutui/icons-vue';
 test('emit click event', () => {
   const wrapper = mount(Button);
 
@@ -43,13 +44,14 @@ test('should not emit click event when loading', () => {
   wrapper.trigger('click');
   expect(wrapper.emitted('click')).toBeFalsy();
 });
-test('should change icon class prefix when using icon-class-prefix prop', () => {
+test('should find nut-icon class of an svg tag when using icon slot', () => {
   const wrapper = mount(Button, {
-    props: {
-      icon: 'star-fill',
-      iconClassPrefix: 'my-icon'
+    slots: {
+      icon: StarFill
     }
   });
 
-  expect(wrapper.html()).toMatchSnapshot();
+  const nutIcons = wrapper.findAll('svg');
+  expect(nutIcons.length).toEqual(1);
+  expect(nutIcons[0].element.classList).toContain('nut-icon');
 });

src/packages/__VUE/button/demo.vue

@@ -38,10 +38,18 @@
     </div>
     <h2>{{ translate('title5') }}</h2>
     <div class="demo-button-row2">
-      <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-      <nut-button shape="square" type="primary" icon="star">{{ translate('star') }}</nut-button>
+      <nut-button shape="square" plain type="primary">
+        <template #icon>
+          <StarFill />
+        </template>
+      </nut-button>
+      <nut-button shape="square" type="primary">
+        <template #icon>
+          <Star />
+        </template>
+        {{ translate('star') }}
+      </nut-button>
     </div>
-
     <h2>{{ translate('title7') }}</h2>
     <div class="demo-button-row2">
       <nut-button size="large" type="primary" style="margin-bottom: 10px">{{ translate('large') }}</nut-button>
@@ -67,6 +75,7 @@ import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('button');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { StarFill, Star } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -136,6 +145,7 @@ const initTranslate = () =>
   });
 
 export default createDemo({
+  components: { StarFill, Star },
   props: {},
   setup(props) {
     initTranslate();

src/packages/__VUE/button/doc.en-US.md

@@ -199,9 +199,6 @@ The color of the button can be customized through the color property.
 | plain    | Whether to be plain button     | Boolean | `false`   |
 | disabled | Whether to disable button         | Boolean | `false`   |
 | block    | Whether to set display block      | Boolean | `false`   |
-| icon     | Left Icon                     | String  | -         |
-| icon-font-class-name`v3.1.17` | Custom icon font base class name    | String | `nutui-iconfont` |
-| icon-class-prefix `v3.1.17`   | Custom icon class name prefix for using custom icons           | String | `nut-icon`       |
 | loading  | Whether to show loading status     | Boolean | `false`   |
 
 ### Events

src/packages/__VUE/button/doc.md

@@ -198,11 +198,15 @@ app.use(Button);
 | plain    | 是否为朴素按钮                                               | Boolean | `false`   |
 | disabled | 是否禁用按钮                                                 | Boolean | `false`   |
 | block    | 是否为块级元素                                               | Boolean | `false`   |
-| icon     | 按钮图标，同 Icon 组件 name 属性                             | String  | -         |
-| icon-font-class-name`v3.1.17` | 自定义 icon 字体基础类名                         | String | `nutui-iconfont` |
-| icon-class-prefix `v3.1.17`   | 自定义 icon 类名前缀，用于使用自定义图标           | String | `nut-icon`       |
 | loading  | 按钮 loading 状态                                            | Boolean | `false`   |
 
+### Slots
+
+| 名称 | 说明 |
+|-|-|
+| default | 按钮内容 |
+| icon | 按钮图标 |
+
 ### Events
 
 | 事件名 | 说明           | 回调参数          |

src/packages/__VUE/button/index.scss

@@ -19,6 +19,10 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
+  .nut-icon {
+    width: $button-icon-width;
+    height: $button-icon-width;
+  }
   .nut-button__text {
     margin-left: 5px;
   }

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

@@ -1,15 +1,9 @@
 <template>
   <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
-        v-if="icon && !loading"
-        :name="icon"
-        v-bind="$attrs"
-        :class-prefix="iconClassPrefix"
-        :font-class-name="iconFontClassName"
-      ></nut-icon>
-      <view :class="{ 'nut-button__text': icon || loading }" v-if="$slots.default">
+      <Loading class="nut-icon-loading" v-if="loading" />
+      <slot name="icon" v-if="$slots.icon && !loading"></slot>
+      <view :class="{ 'nut-button__text': $slots.icon || loading }">
         <slot></slot>
       </view>
     </view>
@@ -19,12 +13,10 @@
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading } from '@nutui/icons-vue-taro';
 const { componentName, create } = createComponent('button');
-import Icon from '../icon/index.taro.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  components: { Loading },
   props: {
     color: String,
     shape: {

src/packages/__VUE/button/index.vue

@@ -1,15 +1,9 @@
 <template>
   <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
-        v-if="icon && !loading"
-        :name="icon"
-        v-bind="$attrs"
-        :class-prefix="iconClassPrefix"
-        :font-class-name="iconFontClassName"
-      ></nut-icon>
-      <view :class="{ 'nut-button__text': icon || loading }" v-if="$slots.default">
+      <Loading class="nut-icon-loading" v-if="loading" />
+      <slot name="icon" v-if="$slots.icon && !loading"></slot>
+      <view :class="{ 'nut-button__text': $slots.icon || loading }">
         <slot></slot>
       </view>
     </view>
@@ -19,12 +13,10 @@
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Icon from '../icon/index.vue';
+import { Loading } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('button');
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  components: { Loading },
   props: {
     color: String,
     shape: {
@@ -54,18 +46,6 @@ export default create({
     block: {
       type: Boolean,
       default: false
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    iconClassPrefix: {
-      type: String,
-      default: 'nut-icon'
-    },
-    iconFontClassName: {
-      type: String,
-      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],

src/packages/styles/css-variables.scss

@@ -52,6 +52,7 @@ page {
   // button
   --nut-button-border-radius: 25px;
   --nut-button-border-width: 1px;
+  --nut-button-icon-width: 16px;
   --nut-button-default-bg-color: var(--nut-white);
   --nut-button-default-border-color: rgba(204, 204, 204, 1);
   --nut-button-default-color: rgba(102, 102, 102, 1);

src/packages/styles/variables-jdb.scss

@@ -122,6 +122,7 @@ $line-height-base: 1.5 !default;
 // button
 $button-border-radius: $tdd-border-radius-7 !default;
 $button-border-width: 1px !default;
+$button-icon-width: 16px !default;
 $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;

src/packages/styles/variables-jddkh.scss

@@ -53,6 +53,7 @@ $line-height-base: 1.5 !default;
 // button
 $button-border-radius: 21px !default;
 $button-border-width: 1px !default;
+$button-icon-width: 16px !default;
 $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;

src/packages/styles/variables-jdt.scss

@@ -52,6 +52,7 @@ $line-height-base: 1.5 !default;
 // button
 $button-border-radius: 25px !default;
 $button-border-width: 1px !default;
+$button-icon-width: 16px !default;
 $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;

src/packages/styles/variables-var.scss

@@ -52,6 +52,7 @@ $line-height-base: var(--nut-line-height-base) !default;
 // button
 $button-border-radius: var(--nut-button-border-radius) !default;
 $button-border-width: var(--nut-button-border-width) !default;
+$button-icon-width: var(--nut-button-icon-width) !default;
 $button-default-bg-color: var(--nut-button-default-bg-color) !default;
 $button-default-border-color: var(--nut-button-default-border-color) !default;
 $button-default-color: var(--nut-button-default-color) !default;

src/packages/styles/variables.scss

@@ -53,6 +53,7 @@ $line-height-base: 1.5 !default;
 // button
 $button-border-radius: 25px !default;
 $button-border-width: 1px !default;
+$button-icon-width: 16px !default;
 $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;