@coffic/cosy-ui 0.6.12 → 0.6.16

package/dist/vue/BannerBox/ExampleImageExport.vue

@@ -0,0 +1,37 @@
+<!--
+@component BannerBox.ImageExport
+
+@description
+BannerBox 组件的导出为图片示例，展示如何使用图片导出功能。
+
+@usage
+```vue
+<BannerBoxExamples.ImageExport />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxImageExportExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <div>
+        <p class="cosy:mb-4">悬停在左上角显示下载按钮，点击可下载当前内容为图片。</p>
+        <BannerBox :backgroundClassIndex="8">
+            <div
+                class="cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:min-h-[200px] cosy:p-8 cosy:text-center">
+                <h2 class="cosy:text-3xl cosy:font-bold cosy:mb-4">可导出为图片的内容</h2>
+                <p class="cosy:text-lg">适用于创建社交媒体分享图、营销材料等场景</p>
+            </div>
+        </BannerBox>
+    </div>
+</template>

package/dist/vue/BannerBox/ExampleSizePreset.vue

@@ -0,0 +1,35 @@
+<!--
+@component BannerBox.SizePreset
+
+@description
+BannerBox 组件的尺寸预设示例，展示如何使用尺寸选择功能。
+
+@usage
+```vue
+<BannerBoxExamples.SizePreset />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxSizePresetExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <div>
+        <p class="cosy:mb-4">悬停在左上角显示下载按钮，点击可切换尺寸。尺寸会保存在浏览器中。</p>
+        <BannerBox>
+            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]">
+                <h2 class="cosy:text-3xl cosy:font-bold">点击左上角按钮切换尺寸</h2>
+            </div>
+        </BannerBox>
+    </div>
+</template>

package/dist/vue/{FeatureCard.vue → BannerBox/FeatureCard.vue}

@@ -1,49 +1,3 @@
-<template>
-  <component
-    :is="link ? 'a' : 'div'"
-    :href="link || undefined"
-    :target="link ? '_blank' : undefined"
-    :rel="link ? 'noopener noreferrer' : undefined"
-    :class="[
-      'card bg-base-100/10 backdrop-blur-lg p-8 transition-all duration-300 hover:-translate-y-1 shadow-lg',
-      {
-        'hover:bg-primary/15 cursor-pointer': link,
-        'cursor-default': !link
-      }
-    ]"
-  >
-    <div class="card-body p-0">
-      <div class="mb-4">
-        <component
-          :is="icon"
-          v-if="icon"
-          class="text-4xl text-base-content"
-        />
-        <component
-          :is="getPresetIcon"
-          v-else-if="presetIcon"
-          class="text-4xl text-base-content"
-        />
-        <div
-          v-else
-          class="text-4xl text-base-content"
-        >
-          {{ emoji }}
-        </div>
-      </div>
-      <h3 class="card-title text-lg font-medium text-base-content">
-        {{ title }}
-      </h3>
-      <p
-        v-if="description"
-        class="text-base-content/70"
-      >
-        {{ description }}
-      </p>
-    </div>
-  </component>
-</template>
-
 <script setup lang="ts">
 import { computed, type Component } from 'vue';
 import {
@@ -206,4 +160,31 @@ const getPresetIcon = computed(() => {
     if (!props.presetIcon) return null;
     return presetIcons[props.presetIcon];
 });
-</script>
+</script>
+
+<template>
+    <component :is="link ? 'a' : 'div'" :href="link || undefined" :target="link ? '_blank' : undefined"
+        :rel="link ? 'noopener noreferrer' : undefined" :class="[
+            'cosy:card cosy:no-underline cosy:bg-base-100/10 cosy:backdrop-blur-lg cosy:p-8 cosy:transition-all cosy:duration-300 cosy:hover:-translate-y-1 cosy:shadow-lg',
+            {
+                'cosy:hover:bg-primary/15 cosy:cursor-pointer': link,
+                'cosy:cursor-default': !link
+            }
+        ]">
+        <div class="card-body cosy:p-0">
+            <div class="cosy:mb-4">
+                <component :is="icon" v-if="icon" class="cosy:text-4xl cosy:text-base-content" />
+                <component :is="getPresetIcon" v-else-if="presetIcon" class="cosy:text-4xl cosy:text-base-content" />
+                <div v-else class="cosy:text-4xl cosy:text-base-content">
+                    {{ emoji }}
+                </div>
+            </div>
+            <h3 class="card-title cosy:text-lg cosy:font-medium cosy:text-base-content">
+                {{ title }}
+            </h3>
+            <p v-if="description" class="cosy:text-base-content/70">
+                {{ description }}
+            </p>
+        </div>
+    </component>
+</template>

package/dist/vue/BannerBox/SmartBanner.vue

@@ -0,0 +1,44 @@
+<!--
+@component BannerBox.SmartBanner
+
+@description
+BannerBox 组件的智能横幅模式示例，展示如何通过 title、description 和 features 属性创建结构化内容。
+
+@usage
+```vue
+<BannerBoxExamples.SmartBanner />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxSmartBannerExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <BannerBox title="我们的产品特性" description="探索产品提供的所有强大功能" :features="[
+        {
+            emoji: '⚡',
+            title: '快速响应',
+            link: '#speed'
+        },
+        {
+            emoji: '🔒',
+            title: '安全可靠',
+            link: '#security'
+        },
+        {
+            emoji: '🌐',
+            title: '全球支持',
+            link: '#global'
+        }
+    ]" />
+</template>

package/dist/vue/BannerBox/bgStyles.ts

@@ -0,0 +1,55 @@
+/**
+ * BannerBox组件的背景样式类列表
+ * 包含多种渐变和纯色背景
+ */
+export const bgClasses = [
+	// 半透明渐变背景
+	'cosy:bg-gradient-to-b cosy:from-blue-100/50 cosy:to-blue-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-blue-200/10',
+	'cosy:bg-gradient-to-b cosy:from-blue-200/50 cosy:to-purple-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-purple-200/10',
+	'cosy:bg-gradient-to-b cosy:from-yellow-200/50 cosy:to-green-200/50 dark:cosy:from-yellow-500/10 dark:cosy:to-green-200/10',
+	'cosy:bg-gradient-to-b cosy:from-teal-200/50 cosy:to-blue-200/50 dark:cosy:from-teal-500/10 dark:cosy:to-blue-200/10',
+	'cosy:bg-gradient-to-b cosy:from-pink-200/50 cosy:to-indigo-200/20 dark:cosy:from-pink-500/10 dark:cosy:to-indigo-200/10',
+	'cosy:bg-gradient-to-b cosy:from-red-200/50 cosy:to-orange-200/50 dark:cosy:from-red-500/10 dark:cosy:to-orange-200/10',
+	'cosy:bg-gradient-to-b cosy:from-orange-200/50 cosy:to-yellow-200/50 dark:cosy:from-orange-500/10 dark:cosy:to-yellow-200/10',
+	'cosy:bg-gradient-to-b cosy:from-green-200/50 cosy:to-teal-200/50 dark:cosy:from-green-500/10 dark:cosy:to-teal-200/10',
+
+	// 不透明的背景
+	'cosy:bg-gradient-to-b cosy:from-blue-100 cosy:to-blue-200 dark:cosy:from-blue-500 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-blue-200 cosy:to-purple-200 dark:cosy:from-blue-500 dark:cosy:to-purple-200',
+	'cosy:bg-gradient-to-b cosy:from-yellow-200 cosy:to-green-200 dark:cosy:from-yellow-500 dark:cosy:to-green-200',
+	'cosy:bg-gradient-to-b cosy:from-teal-200 cosy:to-blue-200 dark:cosy:from-teal-500 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-pink-200 cosy:to-red-200 dark:cosy:from-pink-500 dark:cosy:to-red-200',
+	'cosy:bg-gradient-to-b cosy:from-red-200 cosy:to-orange-200 dark:cosy:from-red-500 dark:cosy:to-orange-200',
+	'cosy:bg-gradient-to-b cosy:from-orange-200 cosy:to-yellow-200 dark:cosy:from-orange-500 dark:cosy:to-yellow-200',
+	'cosy:bg-gradient-to-b cosy:from-green-200 cosy:to-teal-200 dark:cosy:from-green-500 dark:cosy:to-teal-200',
+
+	// 不透明的深色背景
+	'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-blue-200 dark:cosy:from-blue-900 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-purple-200 dark:cosy:from-blue-900 dark:cosy:to-purple-200',
+	'cosy:bg-gradient-to-b cosy:from-yellow-900 cosy:to-green-200 dark:cosy:from-yellow-900 dark:cosy:to-green-200',
+	'cosy:bg-gradient-to-b cosy:from-teal-900 cosy:to-blue-200 dark:cosy:from-teal-900 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-pink-900 cosy:to-red-200 dark:cosy:from-pink-900 dark:cosy:to-red-200',
+	'cosy:bg-gradient-to-b cosy:from-red-900 cosy:to-orange-200 dark:cosy:from-red-900 dark:cosy:to-orange-200',
+	'cosy:bg-gradient-to-b cosy:from-orange-900 cosy:to-yellow-200 dark:cosy:from-orange-900 dark:cosy:to-yellow-200',
+	'cosy:bg-gradient-to-b cosy:from-green-900 cosy:to-teal-900 dark:cosy:from-green-900 dark:cosy:to-teal-900',
+
+	// 不透明的渐变背景
+	'cosy:bg-gradient-to-br cosy:from-emerald-400 cosy:to-cyan-400 dark:cosy:from-emerald-600 dark:cosy:to-cyan-600',
+	'cosy:bg-gradient-to-br cosy:from-violet-400 cosy:to-fuchsia-400 dark:cosy:from-violet-600 dark:cosy:to-fuchsia-600',
+	'cosy:bg-gradient-to-br cosy:from-amber-400 cosy:to-orange-400 dark:cosy:from-amber-600 dark:cosy:to-orange-600',
+	'cosy:bg-gradient-to-br cosy:from-rose-400 cosy:to-pink-400 dark:cosy:from-rose-600 dark:cosy:to-pink-600',
+	'cosy:bg-gradient-to-br cosy:from-sky-400 cosy:to-indigo-400 dark:cosy:from-sky-600 dark:cosy:to-indigo-600',
+	'cosy:bg-gradient-to-br cosy:from-lime-400 cosy:to-emerald-400 dark:cosy:from-lime-600 dark:cosy:to-emerald-600',
+	'cosy:bg-gradient-to-br cosy:from-purple-400 cosy:to-indigo-400 dark:cosy:from-purple-600 dark:cosy:to-indigo-600',
+	'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:to-violet-400 dark:cosy:from-blue-600 dark:cosy:to-violet-600',
+
+	// 纯色背景
+	'cosy:bg-emerald-400 dark:cosy:bg-emerald-600',
+	'cosy:bg-violet-400 dark:cosy:bg-violet-600',
+	'cosy:bg-amber-400 dark:cosy:bg-amber-600',
+	'cosy:bg-rose-400 dark:cosy:bg-rose-600',
+	'cosy:bg-sky-400 dark:cosy:bg-sky-600',
+	'cosy:bg-lime-400 dark:cosy:bg-lime-600',
+	'cosy:bg-purple-400 dark:cosy:bg-purple-600',
+	'cosy:bg-blue-400 dark:cosy:bg-blue-600',
+];

package/dist/vue/BannerBox/index.ts

@@ -0,0 +1,83 @@
+import Basic from './ExampleBasic.vue';
+import CustomBg from './ExampleCustomBg.vue';
+import DisplayModeAlways from './ExampleDisplayModeAlways.vue';
+import DisplayModeHover from './ExampleDisplayModeHover.vue';
+import DisplayModeNever from './ExampleDisplayModeNever.vue';
+import SmartBanner from './SmartBanner.vue';
+import SizePreset from './ExampleSizePreset.vue';
+import ImageExport from './ExampleImageExport.vue';
+import BasicSource from './ExampleBasic.vue?raw';
+import CustomBgSource from './ExampleCustomBg.vue?raw';
+import DisplayModeAlwaysSource from './ExampleDisplayModeAlways.vue?raw';
+import DisplayModeHoverSource from './ExampleDisplayModeHover.vue?raw';
+import DisplayModeNeverSource from './ExampleDisplayModeNever.vue?raw';
+import SmartBannerSource from './SmartBanner.vue?raw';
+import SizePresetSource from './ExampleSizePreset.vue?raw';
+import ImageExportSource from './ExampleImageExport.vue?raw';
+
+// 提取简单示例源代码函数
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
+	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
+
+	if (!templateMatch) {
+		return source;
+	}
+
+	let importSection = `<script setup>
+import { BannerBox } from 'cosy-ui'
+`;
+
+	// 从源码中提取导入语句（除了组件的导入和app.css）
+	if (scriptMatch && scriptMatch[1]) {
+		const importLines = scriptMatch[1]
+			.split('\n')
+			.filter(
+				(line) =>
+					line.includes('import') && !line.includes('../../app.css') && !line.includes('BannerBox')
+			);
+
+		if (importLines.length > 0) {
+			importSection += importLines.join('\n') + '\n';
+		}
+	}
+
+	importSection += '</script>\n\n';
+
+	// 提取模板内容，并替换组件路径
+	const templateContent = templateMatch[1].replace('../BannerBox.vue', 'BannerBox');
+
+	return importSection + '<template>' + templateContent + '</template>';
+}
+
+// 获取 BannerBox 和 FeatureCard 组件
+export { default as BannerBox } from './BannerBox.vue';
+export { default as FeatureCard } from './FeatureCard.vue';
+export { default as DownloadButton } from './DownloadButton.vue';
+export { bgClasses } from './bgStyles';
+export { sizePresets, type SizePreset } from './sizePresets';
+
+// 导出示例组件
+export const BannerBoxExamples = {
+	Basic,
+	CustomBg,
+	DisplayModeAlways,
+	DisplayModeHover,
+	DisplayModeNever,
+	SmartBanner,
+	SizePreset,
+	ImageExport,
+};
+
+// 导出示例源代码
+export const BannerBoxExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	CustomBg: extractSimpleExample(CustomBgSource),
+	DisplayModeAlways: extractSimpleExample(DisplayModeAlwaysSource),
+	DisplayModeHover: extractSimpleExample(DisplayModeHoverSource),
+	DisplayModeNever: extractSimpleExample(DisplayModeNeverSource),
+	SmartBanner: extractSimpleExample(SmartBannerSource),
+	SizePreset: extractSimpleExample(SizePresetSource),
+	ImageExport: extractSimpleExample(ImageExportSource),
+};

package/dist/vue/BannerBox/sizePresets.ts

@@ -0,0 +1,23 @@
+/**
+ * BannerBox组件的尺寸预设列表
+ * 包含各种常用尺寸和比例
+ */
+
+export interface SizePreset {
+	name: string;
+	width: string;
+	height: string;
+}
+
+export const sizePresets: SizePreset[] = [
+	{ name: 'Default', width: 'cosy:w-full', height: 'cosy:h-full' },
+	{ name: 'Square', width: 'cosy:w-[600px]', height: 'cosy:h-[600px]' },
+	{ name: 'Landscape', width: 'cosy:w-[800px]', height: 'cosy:h-[450px]' },
+	{ name: 'Portrait', width: 'cosy:w-[450px]', height: 'cosy:h-[800px]' },
+	{ name: 'Wide', width: 'cosy:w-[1200px]', height: 'cosy:h-[675px]' },
+	{ name: 'Banner', width: 'cosy:w-[1200px]', height: 'cosy:h-[300px]' },
+	{ name: '1280 × 800', width: 'cosy:w-[1280px]', height: 'cosy:h-[800px]' },
+	{ name: '1440 × 900', width: 'cosy:w-[1440px]', height: 'cosy:h-[900px]' },
+	{ name: '2560 × 1600', width: 'cosy:w-[2560px]', height: 'cosy:h-[1600px]' },
+	{ name: '2880 × 1800', width: 'cosy:w-[2880px]', height: 'cosy:h-[1800px]' },
+];

package/dist/vue/FeatureButton.vue

@@ -1,30 +1,23 @@
 <template>
-  <div>
-    <!-- Button with hover effects -->
-    <button
-      :class="[
-        'bg-cyan-500/20 p-4 rounded-2xl text-center backdrop-blur-lg text-2xl transition-all duration-300 hover:scale-105 hover:bg-cyan-500/30',
-        props.size
-      ]"
-      @click="showPopup"
-    >
-      <slot />
-      {{ props.title }}
-    </button>
+    <div>
+        <!-- Button with hover effects -->
+        <button :class="[
+            'bg-cyan-500/20 p-4 rounded-2xl text-center backdrop-blur-lg text-2xl transition-all duration-300 hover:scale-105 hover:bg-cyan-500/30',
+            props.size
+        ]" @click="showPopup">
+            <slot />
+            {{ props.title }}
+        </button>
 
-    <!-- Popup message -->
-    <Transition name="fade">
-      <div
-        v-if="isPopupVisible"
-        class="fixed inset-0 flex items-center justify-center z-50"
-        @click="hidePopup"
-      >
-        <div class="bg-black/80 backdrop-blur-sm p-6 rounded-xl text-white animate-popup">
-          {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
-        </div>
-      </div>
-    </Transition>
-  </div>
+        <!-- Popup message -->
+        <Transition name="fade">
+            <div v-if="isPopupVisible" class="fixed inset-0 flex items-center justify-center z-50" @click="hidePopup">
+                <div class="bg-black/80 backdrop-blur-sm p-6 rounded-xl text-white animate-popup">
+                    {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
+                </div>
+            </div>
+        </Transition>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -92,4 +85,10 @@ const hidePopup = () => {
         opacity: 1;
     }
 }
-</style>
+</style>
+
+<script lang="ts">
+export default {
+    name: 'FeatureButton'
+}
+</script>

package/dist/vue/Icons/AlertTriangleIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="alertTriangle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CalendarIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="calendar" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CheckCircleIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="checkCircle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CheckIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="check" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/ChevronDownIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="chevronDown" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/ClipboardIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="clipboard" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CloseIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="close" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/InfoCircleIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="infoCircle" :size="size" :color="color" :class="props.class" />
+</template>