refactor(componentes): deprecate the icon font of some components (#4067)

* refactor(components): [el-breadcumb] icon

* refactor(components): el-tabs icon

* refactor(components): color picker icon

* refactor(components): menus icon

* refactor(components): loading spinner icon

* fix(components): panel-data-pick elicon import

* refactor(components): dropdown item icon

* refactor(components): tabs plus icon

* fix: message & tabs icon test

* fix(components): breadcrumb docs

* fix(components): colorPicker docs

* fix(components): loading docs

Co-authored-by: imswk <syfzxx@vip.qq.com>

docs/en-US/component/breadcrumb.md

@@ -25,10 +25,10 @@ breadcrumb/icon
 
 ## Breadcrumb Attributes
 
-| Attribute       | Description                  | Type   | Accepted Values | Default |
-| --------------- | ---------------------------- | ------ | --------------- | ------- |
-| separator       | separator character          | string | —               | /       |
-| separator-class | class name of icon separator | string | —               | -       |
+| Attribute       | Description                       | Type               | Accepted Values | Default |
+| --------------- | --------------------------------- | ------------------ | --------------- | ------- |
+| separator       | separator character               | string             | —               | /       |
+| separator-class | icon compontent of icon separator | string / Component | —               | -       |
 
 ## Breadcrumb Slots
 

docs/en-US/component/color-picker.md

@@ -41,15 +41,15 @@ color-picker/sizes
 
 ## Attributes
 
-| Attribute             | Description                                  | Type    | Accepted Values       | Default                                                       |
-| --------------------- | -------------------------------------------- | ------- | --------------------- | ------------------------------------------------------------- |
-| model-value / v-model | binding value                                | string  | —                     | —                                                             |
-| disabled              | whether to disable the ColorPicker           | boolean | —                     | false                                                         |
-| size                  | size of ColorPicker                          | string  | medium / small / mini | —                                                             |
-| show-alpha            | whether to display the alpha slider          | boolean | —                     | false                                                         |
-| color-format          | color format of v-model                      | string  | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
-| popper-class          | custom class name for ColorPicker's dropdown | string  | —                     | —                                                             |
-| predefine             | predefined color options                     | array   | —                     | —                                                             |
+| Attribute             | Description                                       | Type               | Accepted Values       | Default                                                       |
+| --------------------- | ------------------------------------------------- | ------------------ | --------------------- | ------------------------------------------------------------- |
+| model-value / v-model | binding value                                     | string             | —                     | —                                                             |
+| disabled              | whether to disable the ColorPicker                | boolean            | —                     | false                                                         |
+| size                  | size of ColorPicker                               | string             | medium / small / mini | —                                                             |
+| show-alpha            | whether to display the alpha slider               | boolean            | —                     | false                                                         |
+| color-format          | color format of v-model                           | string             | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
+| popper-class          | custom icon compontent for ColorPicker's dropdown | string / Component | —                     | —                                                             |
+| predefine             | predefined color options                          | array              | —                     | —                                                             |
 
 ## Events
 

docs/en-US/component/loading.md

@@ -21,7 +21,7 @@ loading/basic
 
 You can customize loading text, loading spinner and background color.
 
-:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner`, `element-loading-background`, and `element-loading-svg` attributes are used to set the icon class name, background color value, and loading icon, respectively.
+:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner`, `element-loading-background`, and `element-loading-svg` attributes are used to set the icon component, background color value, and loading icon, respectively.
 
 loading/customization
 
@@ -94,9 +94,9 @@ If Element Plus is imported entirely, a globally method `$loading` will be regis
 
 ## Directives
 
-| Name                       | Description                                  | Type    |
-| -------------------------- | -------------------------------------------- | ------- |
-| v-loading                  | show animation while loading data            | boolean |
-| element-loading-text       | loading text that displays under the spinner | string  |
-| element-loading-spinner    | class name of the custom spinner             | string  |
-| element-loading-background | background color of the mask                 | string  |
+| Name                       | Description                                  | Type               |
+| -------------------------- | -------------------------------------------- | ------------------ |
+| v-loading                  | show animation while loading data            | boolean            |
+| element-loading-text       | loading text that displays under the spinner | string             |
+| element-loading-spinner    | icon compontent of the custom spinner        | string / Component |
+| element-loading-background | background color of the mask                 | string             |

packages/components/breadcrumb/__tests__/breadcrumb.spec.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { Check } from '@element-plus/icons'
 import Breadcrumb from '../src/breadcrumb.vue'
 import BreadcrumbItem from '../src/breadcrumb-item.vue'
 
@@ -9,6 +10,11 @@ const _mount = (template: string) =>
         'el-breadcrumb': Breadcrumb,
         'el-breadcrumb-item': BreadcrumbItem,
       },
+      data() {
+        return {
+          Check,
+        }
+      },
       template,
     },
     {
@@ -30,21 +36,21 @@ describe('Breadcrumb.vue', () => {
     expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('?')
   })
 
-  test('separatorClass', () => {
-    const wrapper = _mount(`
-      <el-breadcrumb separator="?" separatorClass="test">
+  test('separatorIcon', () => {
+    const wrapper = _mount(
+      `
+      <el-breadcrumb :separatorIcon="Check">
         <el-breadcrumb-item>A</el-breadcrumb-item>
       </el-breadcrumb>
-    `)
-    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
-    expect(wrapper.find('.el-breadcrumb__separator').classes()).toContain(
-      'test'
+    `
     )
+    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
+    expect(wrapper.findComponent(Check).exists()).toBe(true)
   })
 
   test('to', () => {
     const wrapper = _mount(`
-      <el-breadcrumb separator="?" separatorClass="test">
+      <el-breadcrumb separator="?" :separatorIcon="Check">
         <el-breadcrumb-item to="/index">A</el-breadcrumb-item>
       </el-breadcrumb>
     `)

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -7,11 +7,9 @@
     >
       <slot></slot>
     </span>
-    <i
-      v-if="separatorClass"
-      class="el-breadcrumb__separator"
-      :class="separatorClass"
-    />
+    <el-icon v-if="separatorIcon" class="el-breadcrumb__separator">
+      <component :is="separatorIcon" />
+    </el-icon>
     <span v-else class="el-breadcrumb__separator" role="presentation">
       {{ separator }}
     </span>
@@ -56,7 +54,7 @@ export default defineComponent({
     return {
       link,
       separator: parent?.separator,
-      separatorClass: parent?.separatorClass,
+      separatorIcon: parent?.separatorIcon,
     }
   },
 })

packages/components/breadcrumb/src/breadcrumb.ts

@@ -1,13 +1,15 @@
-import type { ExtractPropTypes } from 'vue'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
-export const breadcrumbProps = {
+import type { ExtractPropTypes, Component } from 'vue'
+
+export const breadcrumbProps = buildProps({
   separator: {
     type: String,
     default: '/',
   },
-  separatorClass: {
-    type: String,
+  separatorIcon: {
+    type: definePropType<string | Component>([String, Object]),
     default: '',
   },
-} as const
+} as const)
 export type BreadcrumbProps = ExtractPropTypes<typeof breadcrumbProps>

packages/components/color-picker/src/index.vue

@@ -75,15 +75,19 @@
                 backgroundColor: displayedColor,
               }"
             ></span>
-            <span
+            <el-icon
               v-if="!modelValue && !showPanelColor"
-              class="el-color-picker__empty el-icon-close"
-            ></span>
+              class="el-color-picker__empty is-icon-close"
+            >
+              <close />
+            </el-icon>
           </span>
-          <span
+          <el-icon
             v-show="modelValue || showPanelColor"
-            class="el-color-picker__icon el-icon-arrow-down"
-          ></span>
+            class="el-color-picker__icon is-icon-arrow-down"
+          >
+            <arrow-down />
+          </el-icon>
         </div>
       </div>
     </template>
@@ -104,6 +108,7 @@ import {
 } from 'vue'
 import debounce from 'lodash/debounce'
 import ElButton from '@element-plus/components/button'
+import ElIcon from '@element-plus/components/icon'
 import { ClickOutside } from '@element-plus/directives'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
 import { useLocaleInject } from '@element-plus/hooks'
@@ -112,6 +117,7 @@ import ElInput from '@element-plus/components/input'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { Close, ArrowDown } from '@element-plus/icons'
 import AlphaSlider from './components/alpha-slider.vue'
 import HueSlider from './components/hue-slider.vue'
 import Predefine from './components/predefine.vue'
@@ -130,6 +136,9 @@ export default defineComponent({
     ElButton,
     ElPopper,
     ElInput,
+    ElIcon,
+    Close,
+    ArrowDown,
     SvPanel,
     HueSlider,
     AlphaSlider,

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -189,6 +189,7 @@ import {
   extractTimeFormat,
   TimePickPanel,
 } from '@element-plus/components/time-picker'
+import { ElIcon } from '@element-plus/components/icon'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { isValidDatePickType } from '@element-plus/utils/validators'
 import {
@@ -214,6 +215,7 @@ export default defineComponent({
     DateTable,
     ElInput,
     ElButton,
+    ElIcon,
     TimePickPanel,
     MonthTable,
     YearTable,

packages/components/dropdown/src/dropdown-item.vue

@@ -9,25 +9,29 @@
     :tabindex="disabled ? null : -1"
     @click="handleClick"
   >
-    <i v-if="icon" :class="icon"></i>
+    <el-icon v-if="icon"><component :is="icon" /></el-icon>
     <slot></slot>
   </li>
 </template>
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import { useDropdown } from './useDropdown'
+import type { Component } from 'vue'
 
 export default defineComponent({
   name: 'ElDropdownItem',
-  props: {
+  props: buildProps({
     command: {
       type: [Object, String, Number],
       default: () => ({}),
     },
     disabled: Boolean,
     divided: Boolean,
-    icon: String,
-  },
+    icon: {
+      type: definePropType<string | Component>([String, Object]),
+    },
+  } as const),
   setup(props) {
     const { elDropdown } = useDropdown()
     const _instance = getCurrentInstance()

packages/components/dropdown/src/dropdown.vue

@@ -67,7 +67,7 @@ import {
 import ElButton from '@element-plus/components/button'
 import ElPopper, { Effect } from '@element-plus/components/popper'
 import ElScrollbar from '@element-plus/components/scrollbar'
-import { ElIcon } from '@element-plus/components/icon'
+import ElIcon from '@element-plus/components/icon'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
 import { addUnit } from '@element-plus/utils/util'
 import { ArrowDown } from '@element-plus/icons'

packages/components/loading/src/createLoadingComponent.ts

@@ -11,6 +11,7 @@ import {
   withDirectives,
 } from 'vue'
 import { removeClass } from '@element-plus/utils/dom'
+import ElIcon from '@element-plus/components/icon'
 
 import type { VNode } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
@@ -111,7 +112,7 @@ export function createLoadingComponent({
         ]
       )
 
-      const noSpinner = h('i', { class: this.spinner })
+      const noSpinner = h(ElIcon, {}, () => [this.spinner])
 
       const spinnerText = h('p', { class: 'el-loading-text' }, [this.text])
 

packages/components/menu/src/menu.ts

@@ -12,6 +12,8 @@ import {
   nextTick,
 } from 'vue'
 import { Resize } from '@element-plus/directives'
+import ElIcon from '@element-plus/components/icon'
+import { More } from '@element-plus/icons'
 import Menubar from '@element-plus/utils/menu/menu-bar'
 import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import { isString, isObject } from '@element-plus/utils/util'
@@ -359,9 +361,13 @@ export default defineComponent({
               },
               {
                 title: () =>
-                  h('i', {
-                    class: ['el-icon-more', 'el-sub-menu__icon-more'],
-                  }),
+                  h(
+                    ElIcon,
+                    {
+                      class: ['is-icon-more', 'el-sub-menu__icon-more'],
+                    },
+                    () => [h(More)]
+                  ),
                 default: () => slotMore,
               }
             )

packages/components/menu/src/sub-menu.ts

@@ -19,10 +19,12 @@ import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElPopper from '@element-plus/components/popper'
 import { buildProps } from '@element-plus/utils/props'
 import { throwError } from '@element-plus/utils/error'
+import { ArrowDown, ArrowRight } from '@element-plus/icons'
+import { ElIcon } from '@element-plus/components/icon'
 import useMenu from './use-menu'
 import { useMenuCssVar } from './use-menu-css-var'
-import type { Placement } from '@element-plus/components/popper'
 
+import type { Placement } from '@element-plus/components/popper'
 import type { ExtractPropTypes, VNodeArrayChildren, CSSProperties } from 'vue'
 import type { MenuProvider, SubMenuProvider } from './types'
 
@@ -80,8 +82,8 @@ export default defineComponent({
     const subMenuTitleIcon = computed(() => {
       return (mode.value === 'horizontal' && isFirstLevel.value) ||
         (mode.value === 'vertical' && !rootMenu.props.collapse)
-        ? 'el-icon-arrow-down'
-        : 'el-icon-arrow-right'
+        ? ArrowDown
+        : ArrowRight
     })
     const isFirstLevel = computed(() => {
       let isFirstLevel = true
@@ -292,9 +294,13 @@ export default defineComponent({
     return () => {
       const titleTag: VNodeArrayChildren = [
         slots.title?.(),
-        h('i', {
-          class: ['el-sub-menu__icon-arrow', subMenuTitleIcon.value],
-        }),
+        h(
+          ElIcon,
+          {
+            class: ['el-sub-menu__icon-arrow'],
+          },
+          () => [subMenuTitleIcon.value]
+        ),
       ]
 
       const ulStyle = useMenuCssVar(rootMenu.props)

packages/components/message/__tests__/message.spec.ts

@@ -90,7 +90,17 @@ describe('Message.vue', () => {
       const type = 'some-type'
       const wrapper = _mount({ props: { type } })
 
-      expect(wrapper.find(`el-icon-${type}`).exists()).toBe(false)
+      for (const key in TypeComponentsMap) {
+        if (key === type) {
+          expect(wrapper.findComponent(TypeComponentsMap[key]).exists()).toBe(
+            true
+          )
+        } else {
+          expect(wrapper.findComponent(TypeComponentsMap[key]).exists()).toBe(
+            false
+          )
+        }
+      }
     })
   })
 

packages/components/tabs/__tests__/tabs.spec.ts

@@ -267,7 +267,7 @@ describe('Tabs.vue', () => {
     expect(navItemsWrapper[1].classes('is-active')).toBe(true)
 
     // remove one tab, check panes length
-    await navItemsWrapper[1].find('.el-icon-close').trigger('click')
+    await navItemsWrapper[1].find('.is-icon-close').trigger('click')
 
     panesWrapper = wrapper.findAllComponents(TabPane)
     navItemsWrapper = navWrapper.findAll('.el-tabs__item')
@@ -370,7 +370,7 @@ describe('Tabs.vue', () => {
     expect(panesWrapper.length).toEqual(3)
     expect(navItemsWrapper[2].classes('is-active')).toBe(true)
 
-    await navItemsWrapper[2].find('.el-icon-close').trigger('click')
+    await navItemsWrapper[2].find('.is-icon-close').trigger('click')
 
     panesWrapper = wrapper.findAllComponents(TabPane)
     navItemsWrapper = navWrapper.findAll('.el-tabs__item')
@@ -398,7 +398,7 @@ describe('Tabs.vue', () => {
     const navWrapper = wrapper.findComponent(TabNav)
     await nextTick()
 
-    expect(navWrapper.findAll('.el-icon-close').length).toBe(2)
+    expect(navWrapper.findAll('.is-icon-close').length).toBe(2)
   })
 
   test('disabled', async () => {

packages/components/tabs/src/tab-nav.vue

@@ -17,9 +17,11 @@ import {
 } from '@element-plus/utils/resize-event'
 import { on, off } from '@element-plus/utils/dom'
 import { throwError } from '@element-plus/utils/error'
+import { ElIcon } from '@element-plus/components/icon'
+import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons'
 import TabBar from './tab-bar.vue'
-import type { ResizableElement } from '@element-plus/utils/resize-event'
 
+import type { ResizableElement } from '@element-plus/utils/resize-event'
 import type { PropType } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 import type { RootTabs, Pane, ITabType } from './token'
@@ -328,7 +330,7 @@ export default defineComponent({
               ],
               onClick: scrollPrev,
             },
-            [h('i', { class: 'el-icon-arrow-left' })]
+            [h(ElIcon, {}, () => [h(ArrowLeft)])]
           ),
           h(
             'span',
@@ -339,7 +341,7 @@ export default defineComponent({
               ],
               onClick: scrollNext,
             },
-            [h('i', { class: 'el-icon-arrow-right' })]
+            [h('i', {}, () => [h(ArrowRight)])]
           ),
         ]
       : null
@@ -351,12 +353,16 @@ export default defineComponent({
       pane.index = `${index}`
 
       const btnClose = closable
-        ? h('span', {
-            class: 'el-icon-close',
-            onClick: (ev) => {
-              onTabRemove(pane, ev)
+        ? h(
+            ElIcon,
+            {
+              class: 'is-icon-close',
+              onClick: (ev) => {
+                onTabRemove(pane, ev)
+              },
             },
-          })
+            () => [h(Close)]
+          )
         : null
 
       const tabLabelContent = pane.instance.slots.label?.() || pane.props.label

packages/components/tabs/src/tabs.ts

@@ -12,6 +12,8 @@ import {
 } from 'vue'
 import { isPromise } from '@vue/shared'
 import { EVENT_CODE } from '@element-plus/utils/aria'
+import ElIcon from '@element-plus/components/icon'
+import { Plus } from '@element-plus/icons'
 import TabNav from './tab-nav.vue'
 
 import type { Component, ComponentInternalInstance, PropType, VNode } from 'vue'
@@ -241,7 +243,7 @@ export default defineComponent({
                 }
               },
             },
-            [h('i', { class: 'el-icon-plus' })]
+            [h(ElIcon, { class: 'is-icon-plus' }, () => [Plus])]
           )
         : null
 

packages/theme-chalk/src/breadcrumb.scss

@@ -12,9 +12,12 @@
     font-weight: bold;
     color: var(--el-text-color-placeholder);
 
-    &[class*='icon'] {
+    &.#{$namespace}-icon {
       margin: 0 6px;
       font-weight: normal;
+      svg {
+        vertical-align: middle;
+      }
     }
   }
 

packages/theme-chalk/src/menu.scss

@@ -149,7 +149,7 @@
 
     > .#{$namespace}-menu-item,
     > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
-      [class^='#{$namespace}-icon-'] {
+      [class^='is-icon-'] {
         margin: 0;
         vertical-align: middle;
         width: 24px;
@@ -215,7 +215,7 @@
 @include b(menu-item) {
   @include menu-item;
 
-  & [class^='#{$namespace}-icon-'] {
+  & [class^='is-icon-'] {
     margin-right: 5px;
     width: 24px;
     text-align: center;
@@ -285,7 +285,7 @@
       background: none !important;
     }
   }
-  [class^='#{$namespace}-icon-'] {
+  [class^='is-icon-'] {
     vertical-align: middle;
     margin-right: 5px;
     width: 24px;

packages/theme-chalk/src/tabs.scss

@@ -32,7 +32,7 @@
     cursor: pointer;
     transition: all 0.15s;
 
-    .#{$namespace}-icon-plus {
+    .is-icon-plus {
       transform: scale(0.8, 0.8);
     }
 
@@ -110,7 +110,7 @@
       outline: none;
     }
 
-    & .#{$namespace}-icon-close {
+    & .is-icon-close {
       border-radius: 50%;
       text-align: center;
       transition: all var(--el-transition-duration)
@@ -125,6 +125,10 @@
         background-color: var(--el-text-color-placeholder);
         color: $color-white;
       }
+
+      svg {
+        margin-top: 1px;
+      }
     }
 
     @include when(active) {
@@ -161,9 +165,7 @@
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
       display: none;
     }
-    > .#{$namespace}-tabs__header
-      .#{$namespace}-tabs__item
-      .#{$namespace}-icon-close {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .is-icon-close {
       position: relative;
       font-size: 12px;
       width: 0;
@@ -190,7 +192,7 @@
           padding-left: 13px;
           padding-right: 13px;
 
-          & .#{$namespace}-icon-close {
+          & .is-icon-close {
             width: 14px;
           }
         }
@@ -202,7 +204,7 @@
           padding-left: 20px;
           padding-right: 20px;
 
-          .#{$namespace}-icon-close {
+          .is-icon-close {
             width: 14px;
           }
         }

play/main.ts

@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
 import App from './src/App.vue'
+import { useComponent } from './src/use'
 
 import '@element-plus/theme-chalk/src/index.scss'
 
 const app = createApp(App)
-
+useComponent(app)
 app.mount('#play')