feat: add icons demo (#323)

apps/admin/package.json

@@ -62,7 +62,7 @@
     "@vben/types": "workspace:*",
     "@vue/compiler-sfc": "3.3.6",
     "@vue/test-utils": "^2.4.1",
-    "naive-ui": "^2.35.0",
+    "naive-ui": "^2.36.0",
     "typescript": "^5.2.2",
     "vite": "5.0.10",
     "vue-tsc": "^1.8.20"

apps/admin/src/pages/demo/feat/icon.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import {
+  QqCircleFilled,
+  GithubFilled,
+  WechatFilled,
+  AlipayCircleFilled,
+  IeCircleFilled,
+  TaobaoCircleFilled,
+  CodepenCircleFilled,
+} from '@ant-design/icons-vue'
+import { openWindow } from '@vben/utils'
+import { Icon, SvgIcon, IconPicker } from '@vben/components/index'
+</script>
+
+<template>
+  <VbenCard title="Icon组件示例">
+    <VbenCard title="Antv Icon使用 (直接按需引入相应组件即可)">
+      <div class="flex justify-around">
+        <GithubFilled :style="{ fontSize: '30px' }" />
+        <QqCircleFilled :style="{ fontSize: '30px' }" />
+        <WechatFilled :style="{ fontSize: '30px' }" />
+        <AlipayCircleFilled :style="{ fontSize: '30px' }" />
+        <IeCircleFilled :style="{ fontSize: '30px' }" />
+        <TaobaoCircleFilled :style="{ fontSize: '30px' }" />
+        <CodepenCircleFilled :style="{ fontSize: '30px' }" />
+      </div>
+    </VbenCard>
+
+    <VbenCard title="IconIfy 组件使用" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <Icon icon="ion:layers-outline" :size="30" />
+        <Icon icon="ion:bar-chart-outline" :size="30" />
+        <Icon icon="ion:tv-outline" :size="30" />
+        <Icon icon="ion:settings-outline" :size="30" />
+      </div>
+    </VbenCard>
+
+    <VbenCard title="svg 雪碧图" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <SvgIcon icon="total-sales" size="32" />
+        <template v-for="item in 6" :key="item">
+          <SvgIcon :icon="`dynamic-avatar-${item}`" size="32" />
+        </template>
+      </div>
+    </VbenCard>
+
+    <VbenCard title="图标选择器(Iconify)" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <IconPicker />
+      </div>
+    </VbenCard>
+
+    <VbenCard title="图标选择器(Svg)" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <IconPicker mode="svg" />
+      </div>
+    </VbenCard>
+
+    <VbenAlert title="推荐使用Iconify组件" type="info">
+      Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。
+    </VbenAlert>
+    <VbenButton
+      quaternary
+      type="info"
+      @click="openWindow('https://iconify.design/')"
+    >
+      Iconify 图标大全
+    </VbenButton>
+  </VbenCard>
+</template>

apps/gf-vben/package.json

@@ -62,7 +62,7 @@
     "@vben/types": "workspace:*",
     "@vue/compiler-sfc": "3.3.6",
     "@vue/test-utils": "^2.4.1",
-    "naive-ui": "^2.35.0",
+    "naive-ui": "^2.36.0",
     "typescript": "^5.2.2",
     "vite": "5.0.10",
     "vue-tsc": "^1.8.20"

packages/components/index.ts

@@ -9,6 +9,7 @@ export { default as CountDownButton } from './src/countdown-input/countdown-butt
 export { default as CountDownInput } from './src/countdown-input/index.vue'
 export { default as StrengthMeter } from './src/strength-meter/index.vue'
 export { default as ClickOutside } from './src/click-outside/index.vue'
+export { default as IconPicker } from './src/icon-picker/index.vue'
 
 export { default as CollapseTransition } from './src/transition/collapse-transition.vue'
 export { default as CustomTransition } from './src/transition/index'