feat: iconify已经内置，无需额外配置，直接使用即可

docs/zh/guide/start/icon.md

@@ -23,9 +23,18 @@ app.component("CheckOutlined",CheckOutlined)
 
 ## 二、使用`iconify`图标
 
-示例项目中使用了`iconify`图标，如果你想集成到你的项目中，请按如下步骤配置
+示例项目中使用了`iconify`图标 
 
-### 1. 安装依赖
+::: tip
+`1.20.0`版本之后，`iconify`图标已经内置到`fast-crud`中，无需额外配置，直接按照步骤4使用即可
+::: 
+
+
+<details> 
+    <summary>过时的内容，已折叠</summary>
+
+~~如果你想集成到你的项目中，请按如下步骤配置~~
+###  ~~1. 安装依赖~~
 
 ```json
  {
@@ -39,7 +48,7 @@ app.component("CheckOutlined",CheckOutlined)
 
 ```
 
-### 2. 配置vite插件
+### ~~2. 配置vite插件~~
 ```js
 // vite.config.js
 return {
@@ -50,11 +59,17 @@ return {
 }
 ```
 
-### 3. `main.ts` 中导入`generated`
+### ~~3. `main.ts` 中导入`generated`~~
 ```js
 import "@purge-icons/generated";
 ```
 
+
+</details>
+
+
+
+
 ### 4. fs中配置使用`iconify`图标
 
 1. 从[iconify图标库](https://icon-sets.iconify.design/) 中查找你要使用的图标，复制图标名称，配置到`icon`属性上即可.

package.json

@@ -29,39 +29,39 @@
   "author": "Greper",
   "license": "MIT",
   "devDependencies": {
-    "@algolia/client-search": "^4.20.0",
-    "@lerna-lite/cli": "^2.6.0",
-    "@lerna-lite/publish": "^2.6.0",
-    "@lerna-lite/run": "^2.6.0",
-    "@lerna-lite/version": "^2.6.0",
-    "@mdit-vue/shared": "^1.0.0",
+    "@algolia/client-search": "^4.22.1",
+    "@lerna-lite/cli": "^3.2.1",
+    "@lerna-lite/publish": "^3.2.1",
+    "@lerna-lite/run": "^3.2.1",
+    "@lerna-lite/version": "^3.2.1",
+    "@mdit-vue/shared": "^2.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/flexsearch": "^0.7.3",
-    "@types/glob-to-regexp": "^0.4.3",
-    "@types/lodash-es": "^4.17.10",
+    "@types/glob-to-regexp": "^0.4.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "20.8.9",
-    "axios": "^1.5.1",
+    "@types/node": "20.11.9",
+    "axios": "^1.6.7",
     "copyfiles": "^2.4.1",
     "glob-to-regexp": "^0.4.1",
     "markdown-it": "^13.0.1",
-    "typedoc": "^0.25.2",
-    "typedoc-plugin-markdown": "^3.16.0",
-    "vite": "^4.5.0",
-    "vite-plugin-static-copy": "^0.17.0",
-    "vitepress": "1.0.0-rc.24",
-    "vitepress-plugin-search": "1.0.4-alpha.20",
-    "vue": "^3.3.7",
+    "typedoc": "^0.25.7",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "vite": "^5.0.12",
+    "vite-plugin-static-copy": "^1.0.1",
+    "vitepress": "1.0.0-rc.40",
+    "vitepress-plugin-search": "1.0.4-alpha.22",
+    "vue": "^3.4.15",
     "vue-docgen-cli": "^4.67.0",
-    "vue-tsc": "^1.8.21"
+    "vue-tsc": "^1.8.27"
   },
   "dependencies": {
-    "@types/flexsearch": "^0.7.5",
-    "@types/markdown-it": "^13.0.5",
+    "@types/flexsearch": "^0.7.6",
+    "@types/markdown-it": "^13.0.7",
     "glob-to-regexp": "^0.4.1",
-    "markdown-it": "^13.0.2",
-    "typescript": "^5.2.2"
+    "markdown-it": "^14.0.0",
+    "typescript": "^5.3.3"
   },
   "workspaces": [
     "packages/**"

packages/fast-crud/package.json

@@ -22,6 +22,7 @@
   "author": "Greper",
   "license": "MIT",
   "dependencies": {
+    "@iconify/vue": "^4.1.1",
     "file-saver": "^2.0.5",
     "lru-cache": "^10.0.0",
     "vuedraggable-es": "^4.1.1",

packages/fast-crud/src/components/basic/fs-iconify.vue

@@ -1,15 +1,18 @@
 <template>
-  <span ref="iconifyRef" class="fs-iconify" :class="{ 'fs-iconify-spin': spin }"></span>
+  <span class="fs-iconify" :class="{ 'fs-iconify-spin': spin }">
+    <Icon ref="iconifyRef" :icon="icon" />
+  </span>
 </template>
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, ref, unref, watch } from "vue";
-
+import { Icon } from "@iconify/vue";
 /**
  * iconify 按需加载图标组件
  * https://iconify.design/icon-sets/ion/
  */
 export default defineComponent({
   name: "FsIconify",
+  components: { Icon },
   props: {
     /**
      * 图标名称
@@ -27,31 +30,14 @@ export default defineComponent({
   },
   setup(props, ctx) {
     const iconifyRef = ref(null);
-    const update = async () => {
-      if (!props.icon) return;
-
-      const el: any = unref(iconifyRef);
-      if (!el) return;
-
-      await nextTick();
-      const span: any = document.createElement("span");
-      span.className = "iconify";
-      span.dataset.icon = props.icon;
-      el.textContent = "";
-      el.appendChild(span);
-    };
-
-    watch(() => props.icon, update, { flush: "post" });
-
-    onMounted(update);
-
     return { iconifyRef };
   }
 });
 </script>
 <style lang="less">
-span.fs-iconify {
+.fs-iconify {
   //display: inline-flex !important;
+  display: inline-flex;
   align-items: center;
   &-spin {
     svg {
@@ -78,11 +64,11 @@ span.fs-iconify {
   }
 }
 
-span.iconify {
-  display: block;
-  min-width: 1em;
-  min-height: 1em;
-  // background-color: @iconify-bg-color;
-  border-radius: 100%;
-}
+//span.iconify {
+//  display: block;
+//  min-width: 1em;
+//  min-height: 1em;
+//  // background-color: @iconify-bg-color;
+//  border-radius: 100%;
+//}
 </style>

packages/fast-crud/src/components/crud/fs-row-handle.vue

@@ -259,7 +259,7 @@ export default defineComponent({
   & > * {
     margin: 2px;
     display: inline-flex;
-    align-items: baseline;
+    align-items: center;
   }
   .fs-row-handle-dropdown-item {
     display: flex;