feat(chip): add support for custom close icon using slot and update icon prop

feat(rate): implement icon slots for rating component to allow custom icons
feat(step): introduce icon slots for step component to customize step icons
fix(alert): adjust icon margins for better alignment in dark and light themes
fix(icon): change display property to inline-flex for better layout handling
fix(radio): update icon rendering logic to use spans for better structure
fix(steps): enhance step component to prioritize slot icons over props

Author: haoziqaq

packages/varlet-ui/src/action-sheet/ActionItem.vue

@@ -5,33 +5,31 @@
     :class="classes(n('action-item'), className, [disabled, n('--disabled')])"
     :style="{ color }"
   >
-    <var-icon
-      v-if="icon"
-      var-action-sheet-cover
-      :class="n('action-icon')"
-      :namespace="namespace"
-      :name="icon"
-      :size="iconSize"
-    />
+    <var-icon v-if="isString(icon)" :class="n('action-icon')" :namespace="namespace" :name="icon" :size="iconSize" />
+    <span v-else-if="icon" :class="n('action-icon')">
+      <maybe-v-node :is="renderIcon()" />
+    </span>
     <div :class="n('action-name')">{{ name }}</div>
 
     <var-hover-overlay :hovering="disabled ? false : hovering" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { callOrReturn, isString } from '@varlet/shared'
+import { defineComponent, type PropType, type VNode } from 'vue'
 import Hover from '../hover'
 import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay'
 import VarIcon from '../icon'
 import Ripple from '../ripple'
-import { createNamespace } from '../utils/components'
+import { createNamespace, MaybeVNode } from '../utils/components'
 
 const { name, n, classes } = createNamespace('action-sheet')
 
 export default defineComponent({
   name,
   components: {
+    MaybeVNode,
     VarHoverOverlay,
     VarIcon,
   },
@@ -43,16 +41,22 @@ export default defineComponent({
     color: String,
     namespace: String,
     iconSize: [String, Number],
-    icon: String,
+    icon: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
   },
-  setup() {
+  setup(props) {
     const { hovering, handleHovering } = useHoverOverlay()
 
+    function renderIcon() {
+      return callOrReturn(props.icon)
+    }
+
     return {
       hovering,
+      isString,
       n,
       classes,
       handleHovering,
+      renderIcon,
     }
   },
 })

packages/varlet-ui/src/action-sheet/__tests__/__snapshots__/component.spec.js.snap

@@ -8,11 +8,11 @@ exports[`action-sheet styles 1`] = `
       <div class="var-popup__content var-popup--bottom var-popup--content-background-color var-elevation--3 var-popup--safe-area var-action-sheet__popup-radius" style="z-index: 2000;" role="dialog" aria-modal="true">
         <div class="var-action-sheet var--box">
           <div class="var-action-sheet__title">请选择</div>
-          <div class="var-action-sheet__action-item customClass" style="color: rgb(76, 175, 80);"><i class="var-icon var-icon--set var-icon-account-circle var-action-sheet__action-icon" style="transition-duration: 0ms; font-size: 30px;" var-action-sheet-cover=""></i>
+          <div class="var-action-sheet__action-item customClass" style="color: rgb(76, 175, 80);"><i class="var-icon var-icon--set var-icon-account-circle var-action-sheet__action-icon" style="transition-duration: 0ms; font-size: 30px;"></i>
             <div class="var-action-sheet__action-name">Item 01</div>
             <div class="var-hover-overlay"></div>
           </div>
-          <div class="var-action-sheet__action-item"><i class="var-icon var-icon--set var-icon-account-circle var-action-sheet__action-icon" style="transition-duration: 0ms;" var-action-sheet-cover=""></i>
+          <div class="var-action-sheet__action-item"><i class="var-icon var-icon--set var-icon-account-circle var-action-sheet__action-icon" style="transition-duration: 0ms;"></i>
             <div class="var-action-sheet__action-name">Item 02</div>
             <div class="var-hover-overlay"></div>
           </div>

packages/varlet-ui/src/action-sheet/__tests__/component.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { expect, test } from 'vite-plus/test'
-import { createApp } from 'vue'
+import { createApp, h } from 'vue'
 import VarActionSheet from '../ActionSheet'
 import ActionSheet from '../index'
 
@@ -34,3 +34,27 @@ test('action-sheet styles', () => {
   expect(wrapper.html()).toMatchSnapshot()
   wrapper.unmount()
 })
+
+test('action-sheet action supports vnode and render icon', () => {
+  const wrapper = mount(VarActionSheet, {
+    props: {
+      teleport: null,
+      actions: [
+        {
+          name: 'Item 01',
+          icon: h('i', { class: 'i-custom-action' }),
+        },
+        {
+          name: 'Item 02',
+          icon: () => h('i', { class: 'i-custom-action-render' }),
+        },
+      ],
+      show: true,
+    },
+  })
+
+  expect(wrapper.find('.i-custom-action').exists()).toBe(true)
+  expect(wrapper.find('.i-custom-action-render').exists()).toBe(true)
+  expect(wrapper.find('.var-icon').exists()).toBe(false)
+  wrapper.unmount()
+})

packages/varlet-ui/src/action-sheet/actionSheet.less

@@ -44,11 +44,16 @@
     max-height: var(--action-sheet-action-item-height);
   }
 
-  &__action-icon[var-action-sheet-cover] {
+  &__action-icon {
+    display: inline-flex;
     margin: var(--action-sheet-icon-margin);
     width: var(--action-sheet-icon-size);
     height: var(--action-sheet-icon-size);
     font-size: var(--action-sheet-icon-size);
+
+    .var-icon {
+      font-size: inherit;
+    }
   }
 
   &--disabled {

packages/varlet-ui/src/action-sheet/docs/en-US.md

@@ -153,6 +153,14 @@ Options provide parameters to configure the style. See the `Action` data structu
 ```html
 <script setup>
 import { Snackbar, ActionSheet } from '@varlet/ui'
+import { h } from 'vue'
+
+const svgIcon = h('svg', { viewBox: '0 0 24 24', style: { width: '1em', height: '1em' } }, [
+  h('path', {
+    fill: 'currentColor',
+    d: 'M12 2 2 7l10 5 10-5zm0 7.8L6.45 7 12 4.2 17.55 7zm-8 1.7 8 4 8-4v2.2l-8 4-8-4zm0 4 8 4 8-4v2.2l-8 4-8-4z',
+  }),
+])
 
 async function handleSelect() {
   const action = await ActionSheet({ 
@@ -164,7 +172,7 @@ async function handleSelect() {
       },
       {
         name: 'Item 02',
-        icon: 'notebook',
+        icon: svgIcon,
         color: 'var(--color-warning)',
       },
       {
@@ -345,10 +353,16 @@ function handleSelect(action) {
 
 ```html
 <script setup>
-import { ref } from 'vue'
+import { h, ref } from 'vue'
 import { Snackbar } from '@varlet/ui'
 
 const show = ref(false)
+const svgIcon = h('svg', { viewBox: '0 0 24 24', style: { width: '1em', height: '1em' } }, [
+  h('path', {
+    fill: 'currentColor',
+    d: 'M12 2 2 7l10 5 10-5zm0 7.8L6.45 7 12 4.2 17.55 7zm-8 1.7 8 4 8-4v2.2l-8 4-8-4zm0 4 8 4 8-4v2.2l-8 4-8-4z',
+  }),
+])
 const actions = ref([
   {
     name: 'Item 01',
@@ -357,7 +371,7 @@ const actions = ref([
   },
   {
     name: 'Item 02',
-    icon: 'notebook',
+    icon: svgIcon,
     color: 'var(--color-warning)',
   },
   {
@@ -451,7 +465,7 @@ function handleSelect(action) {
 | ----------- | ----------------------------------- | --------- | ------- |
 | `name`      | Action name                         | _string_  | `-`     |
 | `color`     | Action text color                   | _string_  | `-`     |
-| `icon`      | Icon, support network image address | _string_  | `-`     |
+| `icon`      | Icon, support network image address, VNode, or render function | _string \| VNode \| () => VNode_  | `-`     |
 | `iconSize`  | Icon size                           | _string_  | `-`     |
 | `namespace` | Icon namespace | _string_ | `-` |
 | `className` | Class name                          | _string_  | `-`     |

packages/varlet-ui/src/action-sheet/docs/zh-CN.md

@@ -154,6 +154,14 @@ async function handleSelect(){
 ```html
 <script setup>
 import { Snackbar, ActionSheet } from '@varlet/ui'
+import { h } from 'vue'
+
+const svgIcon = h('svg', { viewBox: '0 0 24 24', style: { width: '1em', height: '1em' } }, [
+  h('path', {
+    fill: 'currentColor',
+    d: 'M12 2 2 7l10 5 10-5zm0 7.8L6.45 7 12 4.2 17.55 7zm-8 1.7 8 4 8-4v2.2l-8 4-8-4zm0 4 8 4 8-4v2.2l-8 4-8-4z',
+  }),
+])
 
 async function handleSelect() {
   const action = await ActionSheet({ 
@@ -165,7 +173,7 @@ async function handleSelect() {
       },
       {
         name: 'Item 02',
-        icon: 'notebook',
+        icon: svgIcon,
         color: 'var(--color-warning)',
       },
       {
@@ -346,10 +354,16 @@ function handleSelect(action) {
 
 ```html
 <script setup>
-import { ref } from 'vue'
+import { h, ref } from 'vue'
 import { Snackbar } from '@varlet/ui'
 
 const show = ref(false)
+const svgIcon = h('svg', { viewBox: '0 0 24 24', style: { width: '1em', height: '1em' } }, [
+  h('path', {
+    fill: 'currentColor',
+    d: 'M12 2 2 7l10 5 10-5zm0 7.8L6.45 7 12 4.2 17.55 7zm-8 1.7 8 4 8-4v2.2l-8 4-8-4zm0 4 8 4 8-4v2.2l-8 4-8-4z',
+  }),
+])
 const actions = ref([
   {
     name: 'Item 01',
@@ -358,7 +372,7 @@ const actions = ref([
   },
   {
     name: 'Item 02',
-    icon: 'notebook',
+    icon: svgIcon,
     color: 'var(--color-warning)',
   },
   {
@@ -453,7 +467,7 @@ function handleSelect(action) {
 | --- | --- | --- | --- |
 | `name` | 选项名称 | _string_ | `-` |
 | `color` | 选项文字颜色 | _string_ | `-` |
-| `icon` | icon 图标，支持网络图片地址 | _string_ | `-` |
+| `icon` | icon 图标，支持网络图片地址、VNode 或渲染函数 | _string \| VNode \| () => VNode_ | `-` |
 | `iconSize` | 图标尺寸 | _string_ | `-` |
 | `namespace` | 图标命名空间 | _string_ | `-` |
 | `className` | 选项附加类名 | _string_ | `-` |

packages/varlet-ui/src/action-sheet/example/index.vue

@@ -1,9 +1,16 @@
 <script setup>
 import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
 import { ActionSheet, Snackbar } from '@varlet/ui'
-import { reactive, ref } from 'vue'
+import { h, reactive, ref } from 'vue'
 import { t, use } from './locale'
 
+const svgIcon = h('svg', { viewBox: '0 0 24 24', style: { width: '1em', height: '1em' } }, [
+  h('path', {
+    fill: 'currentColor',
+    d: 'M12 2 2 7l10 5 10-5zm0 7.8L6.45 7 12 4.2 17.55 7zm-8 1.7 8 4 8-4v2.2l-8 4-8-4zm0 4 8 4 8-4v2.2l-8 4-8-4z',
+  }),
+])
+
 const rawActions = [
   {
     name: 'Item 01',
@@ -41,7 +48,7 @@ const rawCustomStyleActions = [
   },
   {
     name: 'Item 02',
-    icon: 'notebook',
+    icon: svgIcon,
     color: 'var(--color-warning)',
   },
   {

packages/varlet-ui/src/action-sheet/index.ts

@@ -1,5 +1,5 @@
 import { call, inBrowser } from '@varlet/shared'
-import { nextTick, reactive, type TeleportProps } from 'vue'
+import { nextTick, shallowReactive, type TeleportProps, type VNode } from 'vue'
 import { mountInstance, withInstall, withPropsDefaultsSetter } from '../utils/components'
 import VarActionSheet from './ActionSheet.vue'
 import { props as actionSheetProps } from './props'
@@ -9,7 +9,7 @@ export type ActionSheetActions = ActionItem | 'close'
 export interface ActionItem {
   name: string
   color?: string
-  icon?: string
+  icon?: string | VNode | (() => VNode)
   iconSize?: string | number
   namespace?: string
   className?: string
@@ -54,7 +54,9 @@ function ActionSheet(options?: ActionSheetOptions): Promise<ActionSheetActions |
   return new Promise((resolve) => {
     ActionSheet.close()
 
-    const reactiveActionSheetOptions: ActionSheetOptions = reactive(normalizeOptions(options))
+    const reactiveActionSheetOptions = shallowReactive(
+      normalizeOptions(options) as Record<string, any>,
+    ) as ActionSheetOptions
     reactiveActionSheetOptions.teleport = 'body'
     singletonOptions = reactiveActionSheetOptions
 

packages/varlet-ui/src/alert/alert.less

@@ -2,9 +2,9 @@
   --alert-padding: 16px;
   --alert-border-radius: 4px;
   --alert-icon-size: 22px;
-  --alert-icon-margin: 0 12px 0 0;
+  --alert-icon-margin: 1px 12px 0 0;
   --alert-close-icon-size: 22px;
-  --alert-close-icon-margin: 2px 0 0 12px;
+  --alert-close-icon-margin: 1px 0 0 12px;
   --alert-standard-info-text-color: var(--color-on-info);
   --alert-standard-danger-text-color: var(--color-on-danger);
   --alert-standard-success-text-color: var(--color-on-success);
@@ -35,10 +35,13 @@
   border-radius: var(--alert-border-radius);
 
   &__icon {
+    display: inline-flex;
+    align-items: start;
     margin: var(--alert-icon-margin);
+    font-size: var(--alert-icon-size);
 
     .var-icon {
-      font-size: var(--alert-icon-size);
+      font-size: inherit;
     }
   }
 
@@ -61,14 +64,18 @@
   &__message {
     font-size: var(--alert-message-font-size);
     line-height: var(--alert-message-line-height);
+    margin-top: 2px;
   }
 
   &__close-icon {
+    display: inline-flex;
+    align-items: start;
     cursor: pointer;
     margin: var(--alert-close-icon-margin);
+    font-size: var(--alert-close-icon-size);
 
-    .var-icon[alert-cover] {
-      font-size: var(--alert-close-icon-size);
+    .var-icon {
+      font-size: inherit;
     }
   }
 

packages/varlet-ui/src/alert/docs/en-US.md

@@ -149,9 +149,9 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--alert-padding` | `16px` |
 | `--alert-border-radius` | `4px` |
 | `--alert-icon-size` | `22px` |
-| `--alert-icon-margin` | `0 12px 0 0` |
+| `--alert-icon-margin` | `1px 12px 0 0` |
 | `--alert-close-icon-size` | `22px` |
-| `--alert-close-icon-margin` | `2px 0 0 12px` |
+| `--alert-close-icon-margin` | `1px 0 0 12px` |
 | `--alert-standard-info-text-color` | `var(--color-on-info)` |
 | `--alert-standard-danger-text-color` | `var(--color-on-danger)` |
 | `--alert-standard-success-text-color` | `var(--color-on-success)` |