✨ feat(message): add icon suppoer to message component

docs/content/2.components/message.md

@@ -48,6 +48,20 @@ props:
 ---
 ::
 
+### Icon
+
+Or you can use the `icon` prop to change the icon of the message.
+
+::ComponentPreview
+---
+privateProps:
+  content: Thanks for activating
+props:
+  icon: tabler:circle-key
+---
+::
+
+
 ### Color
 
 Use the `color` prop to change the color of the message.

src/runtime/components/overlays/Message.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
+import { onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
 import { message } from '../../themes'
 import type { DeepPartial, Message, MessageColor, MessageType, Strategy } from '../../types/index'
@@ -17,6 +17,10 @@ export default defineComponent({
       type: String as PropType<MessageColor>,
       default: undefined,
     },
+    icon: {
+      type: String,
+      default: null,
+    },
     duration: {
       type: Number,
       default: config.default.duration,
@@ -63,6 +67,10 @@ export default defineComponent({
       }
     })
 
+    const iconName = computed(() => {
+      return props.icon || ui.value.type[props.type]?.icon || null
+    })
+
     onMounted(() => {
       setTimeout(() => {
         message.remove(messageBody.value.id)
@@ -75,6 +83,7 @@ export default defineComponent({
       attrs,
       messageBody,
       containerClass,
+      iconName,
     }
   },
 })
@@ -83,10 +92,7 @@ export default defineComponent({
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
     <div :class="containerClass">
-      <IconCircleSuccess v-if="messageBody?.type === 'success'" class="text-xl" />
+      <RayIcon v-if="iconName" :name="iconName" class="text-xl" />
-      <IconCircleWarning v-if="messageBody?.type === 'warning'" class="text-xl" />
-      <IconCircleError v-if="messageBody?.type === 'error'" class="text-xl" />
-      <IconCircleInfo v-if="messageBody?.type === 'info'" class="text-xl" />
       <span>
         {{ messageBody.content }}
       </span>

src/runtime/themes/overlays/message.ts

@@ -9,15 +9,19 @@ export default {
   type: {
     success: {
       color: 'emerald',
+      icon: 'tabler:circle-check',
     },
     warning: {
       color: 'amber',
+      icon: 'tabler:alert-circle',
     },
     error: {
       color: 'red',
+      icon: 'tabler:circle-x',
     },
     info: {
       color: 'blue',
+      icon: 'tabler:info-circle',
     },
   },
   default: {