IconPicker

.vitepress/config.js

@@ -304,6 +304,10 @@ function createSidebar() {
             text: 'JsonEditor JSON编辑器组件（2.2.0+）',
             link: '/components/json-editor',
           },
+          {
+            text: '图标选择器组件（2.3.0+）',
+            link: '/components/icon-picker',
+          },
         ],
       },
       {

components/icon-picker.md

@@ -0,0 +1,39 @@
+# IconPicker 图标选择器组件
+
+用于快速选择 Iconify 图标。
+
+IconPicker 组件位于 [src/components/IconPicker](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/IconPicker) 内
+
+::: tip
+
+目前只集成了 Ant Design Icons 、Element Plus、TDesign Icons 三个开源项目图标
+
+:::
+
+## 用法
+
+
+```vue
+<script lang="ts" setup>
+import { IconPicker } from '@/components/IconPicker'
+
+const currentIcon = ref('tdesign:book-open')
+</script>
+
+<template>
+  <IconPicker v-model="currentIcon" />
+</template>
+
+```
+
+## 如何添加其他开源项目的图标
+
+可以执行 `pnpm run icon` 然后选择你想要的图标集
+
+之后，在 [IconPicker.vue](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/IconPicker/src/IconPicker.vue) 导入，并添加到 `icons` 中即可。
+
+## Icon 属性<span id="Icon"></span>
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| modelValue | 选中项绑定值，支持v-model | `string` | - | - |