feat(component): add Icon component

apps/admin/autoResolver/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     CAAppLogo: typeof import('@celeris/components')['CAAppLogo']
     CAAppNaiveUIProvider: typeof import('@celeris/components')['CAAppNaiveUIProvider']
+    CAIcon: typeof import('@celeris/components')['CAIcon']
     NAlert: typeof import('@celeris/ca-components')['NAlert']
     NAvatar: typeof import('@celeris/ca-components')['NAvatar']
     NBreadcrumb: typeof import('@celeris/ca-components')['NBreadcrumb']

packages/web/components/Icon/index.ts

@@ -1,6 +1,9 @@
 import { withInstall } from "@celeris/utils/src/vue/install";
 import unocssIcon from "./src/UnoCSSIcon.vue";
+import icon from "./src/Icon.vue";
 
 export const UnoCSSIcon = withInstall(unocssIcon);
+export const Icon = withInstall(icon);
 
 export { default as CAUnoCSSIcon } from "./src/UnoCSSIcon.vue";
+export { default as CAIcon } from "./src/Icon.vue";

packages/web/components/Icon/src/Icon.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { NIcon, NIconWrapper } from "naive-ui";
+import { Icon, type IconifyIcon, loadIcon } from "@iconify/vue";
+import { computed, defineProps, ref, watchEffect } from "vue";
+import { isNil } from "@celeris/utils";
+
+interface IconOptions {
+  name?: string;
+  size?: number;
+  bgSize?: number;
+  color?: string;
+  iconColor?: string;
+  bgColor?: string;
+  borderRadius?: number;
+  depth?: 1 | 2 | 3 | 4 | 5;
+}
+const props = defineProps<Omit<IconOptions, "iconColor">>();
+const shouldUseWrapper = computed(() => !!(props.bgColor || props.bgSize || props.borderRadius));
+const componentToRender = computed(() => (shouldUseWrapper.value ? NIconWrapper : NIcon));
+
+const options = computed(() => {
+  const opt: IconOptions = {};
+  if (shouldUseWrapper.value) {
+    if (!isNil(props.bgSize)) {
+      opt.size = props.bgSize;
+    }
+    if (!isNil(props.bgColor)) {
+      opt.color = props.bgColor;
+    }
+    if (!isNil(props.borderRadius)) {
+      opt.borderRadius = props.borderRadius;
+    }
+    if (!isNil(props.color)) {
+      opt.iconColor = props.color;
+    }
+  } else {
+    if (!isNil(props.color)) {
+      opt.color = props.color;
+    }
+    if (!isNil(props.depth)) {
+      opt.depth = props.depth;
+    }
+    if (!isNil(props.size)) {
+      opt.size = props.size;
+    }
+  }
+  return opt;
+});
+
+const loadIconByName = (name: string) => loadIcon(name).catch(() => console.error(`Failed to load icon ${name}`));
+
+const icon = ref<void | Required<IconifyIcon>>();
+
+function setIcon(name: string | undefined) {
+  if (!isNil(name)) {
+    loadIconByName(name).then(res => (icon.value = res));
+  }
+}
+
+setIcon(props.name);
+
+watchEffect(() => setIcon(props.name));
+</script>
+
+<template>
+  <component :is="componentToRender" v-bind="options">
+    <template v-if="$slots.default">
+      <slot />
+    </template>
+    <template v-else>
+      <Icon v-if="icon" :icon="icon" :width="size" :height="size" />
+    </template>
+  </component>
+</template>

packages/web/styles/package.json

@@ -24,6 +24,7 @@
     "@css-render/plugin-bem": "^0.15.12",
     "@css-render/vue3-ssr": "^0.15.12",
     "@iconify/json": "^2.2.165",
+    "@iconify/vue": "4.1.1",
     "css-render": "^0.15.12",
     "unocss": "^0.58.3",
     "vite": "^5.0.11"