fix: 🐛 update icon #1

isboyjc · Dec 26, 2024 · cee4137 · cee4137
1 parent 2d3a07c
commit cee4137
Show file tree

Hide file tree

Showing 20 changed files with 445 additions and 95 deletions.
diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -25,6 +25,7 @@
   "author": "isboyjc",
   "license": "MIT",
   "dependencies": {
+    "@iconify/vue": "^4.2.0",
     "@isle-editor/core": "workspace:*",
     "tippy.js": "^6.3.7",
     "uuid": "^11.0.2"
@@ -35,9 +36,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@iconify-json/lucide": "^1.2.14",
-    "@iconify-json/tabler": "^1.2.10"
   }
 }
diff --git a/packages/vue3/src/components/bubble-menu/selector/bubble-menu-link-selector.js b/packages/vue3/src/components/bubble-menu/selector/bubble-menu-link-selector.js
@@ -1,8 +1,7 @@
 import { defineComponent, ref, watchEffect, h } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
 import ButtonLink from "@/components/special-button/button-link";
-import { ITooltip, IDivider, IButton } from "@/components/ui";
+import { ITooltip, IDivider, IButton, IIcon } from "@/components/ui";
 
 export default defineComponent({
   name: "BubbleLinkSelector",
@@ -58,8 +57,7 @@ export default defineComponent({
                   onClick: openLink,
                 },
                 {
-                  icon: () =>
-                    h(getIcon("openRight"), { style: { fontSize: "12px" } }),
+                  icon: () => h(IIcon, { name: "openRight", size: 14 }),
                   default: () =>
                     h(
                       "span",
@@ -85,8 +83,9 @@ export default defineComponent({
                 },
                 {
                   icon: () =>
-                    h(getIcon(copyOk.value ? "check" : "copy"), {
-                      style: { fontSize: "12px" },
+                    h(IIcon, {
+                      name: copyOk.value ? "check" : "copy",
+                      size: 13.5,
                     }),
                 },
               ),
@@ -105,8 +104,7 @@ export default defineComponent({
                   onClick: unLink,
                 },
                 {
-                  icon: () =>
-                    h(getIcon("unlink"), { style: { fontSize: "12px" } }),
+                  icon: () => h(IIcon, { name: "unlink", size: 14 }),
                 },
               ),
           },

diff --git a/packages/vue3/src/components/bubble-menu/selector/bubble-menu-selector.js b/packages/vue3/src/components/bubble-menu/selector/bubble-menu-selector.js
@@ -1,13 +1,12 @@
 import { defineComponent, h } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
 import ButtonLink from "@/components/special-button/button-link";
 import ButtonColor from "@/components/special-button/button-color";
 import ButtonBackground from "@/components/special-button/button-background";
 import ButtonTextAlign from "@/components/special-button/button-text-align";
 import ButtonFontFamily from "@/components/special-button/button-font-family";
 import ButtonFontSize from "@/components/special-button/button-font-size";
-import { ITooltip, IButton, IDivider } from "@/components/ui";
+import { ITooltip, IButton, IDivider, IIcon } from "@/components/ui";
 
 export default defineComponent({
   name: "BubbleSelector",
@@ -108,8 +107,7 @@ export default defineComponent({
                     onClick: () => menu.command({ editor: props.editor }),
                   },
                   {
-                    icon: () =>
-                      h(getIcon(menu.name), { style: { fontSize: "13px" } }),
+                    icon: () => h(IIcon, { name: menu.name, size: 14 }),
                   },
                 ),
             },

diff --git a/packages/vue3/src/components/bubble-menu/selector/bubble-menu-table-selector.js b/packages/vue3/src/components/bubble-menu/selector/bubble-menu-table-selector.js
@@ -1,17 +1,17 @@
 import { defineComponent, h } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { ITooltip, IDivider, IButton } from "@/components/ui";
-import DeleteTable from "~icons/tabler/table-minus";
-import HeaderRow from "~icons/tabler/table-row";
-import HeaderCol from "~icons/tabler/table-column";
-import AddColumnBefore from "~icons/tabler/column-insert-left";
-import AddColumnAfter from "~icons/tabler/column-insert-right";
-import DeleteColumn from "~icons/tabler/column-remove";
-import AddRowBefore from "~icons/tabler/row-insert-top";
-import AddRowAfter from "~icons/tabler/row-insert-bottom";
-import DeleteRow from "~icons/tabler/row-remove";
-import MergeCells from "~icons/lucide/table-cells-merge";
-import SplitCell from "~icons/lucide/table-cells-split";
+import { ITooltip, IDivider, IButton, IIcon } from "@/components/ui";
+// import DeleteTable from "~icons/tabler/table-minus";
+// import HeaderRow from "~icons/tabler/table-row";
+// import HeaderCol from "~icons/tabler/table-column";
+// import AddColumnBefore from "~icons/tabler/column-insert-left";
+// import AddColumnAfter from "~icons/tabler/column-insert-right";
+// import DeleteColumn from "~icons/tabler/column-remove";
+// import AddRowBefore from "~icons/tabler/row-insert-top";
+// import AddRowAfter from "~icons/tabler/row-insert-bottom";
+// import DeleteRow from "~icons/tabler/row-remove";
+// import MergeCells from "~icons/lucide/table-cells-merge";
+// import SplitCell from "~icons/lucide/table-cells-split";
 
 export default defineComponent({
   name: "BubbleTableSelector",
@@ -32,22 +32,22 @@ export default defineComponent({
         command: ({ editor }) => editor.commands.addColumnBefore(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().addColumnBefore(),
-        icon: () => h(AddColumnBefore, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "addColumnBefore", size: 14 }),
       },
       {
         name: "tables.addColumnAfter",
         command: ({ editor }) => editor.commands.addColumnAfter(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().addColumnAfter(),
-        icon: () => h(AddColumnAfter, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "addColumnAfter", size: 14 }),
       },
       {
         name: "tables.deleteColumn",
         isDel: true,
         command: ({ editor }) => editor.commands.deleteColumn(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().deleteColumn(),
-        icon: () => h(DeleteColumn, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "deleteColumn", size: 14 }),
       },
       {
         name: "|",
@@ -57,22 +57,22 @@ export default defineComponent({
         command: ({ editor }) => editor.commands.addRowBefore(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().addRowBefore(),
-        icon: () => h(AddRowBefore, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "addRowBefore", size: 14 }),
       },
       {
         name: "tables.addRowAfter",
         command: ({ editor }) => editor.commands.addRowAfter(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().addRowAfter(),
-        icon: () => h(AddRowAfter, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "addRowAfter", size: 14 }),
       },
       {
         name: "tables.deleteRow",
         isDel: true,
         command: ({ editor }) => editor.commands.deleteRow(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().deleteRow(),
-        icon: () => h(DeleteRow, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "deleteRow", size: 14 }),
       },
       {
         name: "|",
@@ -82,25 +82,25 @@ export default defineComponent({
         command: ({ editor }) => editor.commands.mergeCells(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().mergeCells(),
-        icon: () => h(MergeCells, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "mergeCells", size: 14 }),
       },
       {
         name: "tables.splitCell",
         command: ({ editor }) => editor.commands.splitCell(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().splitCell(),
-        icon: () => h(SplitCell, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "splitCell", size: 14 }),
       },
       {
         name: "tables.headerRow",
-        icon: () => h(HeaderRow, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "headerRow", size: 14 }),
         command: ({ editor }) => editor.commands.toggleHeaderRow(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().toggleHeaderRow(),
       },
       {
         name: "tables.headerCol",
-        icon: () => h(HeaderCol, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "headerCol", size: 14 }),
         command: ({ editor }) => editor.commands.toggleHeaderColumn(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().toggleHeaderColumn(),
@@ -114,7 +114,7 @@ export default defineComponent({
         command: ({ editor }) => editor.commands.deleteTable(),
         isActive: () => false,
         isDisabled: () => !props.editor.can().deleteTable(),
-        icon: () => h(DeleteTable, { style: { fontSize: "13px" } }),
+        icon: () => h(IIcon, { name: "deleteTable", size: 14 }),
       },
     ];
 
@@ -152,7 +152,7 @@ export default defineComponent({
                       onClick: () => item.command({ editor: props.editor }),
                     },
                     {
-                      icon: () => item.icon(),
+                      icon: item.icon,
                     },
                   ),
               },

diff --git a/packages/vue3/src/components/slash-menu/slash-menu.js b/packages/vue3/src/components/slash-menu/slash-menu.js
@@ -1,8 +1,7 @@
 import { defineComponent, h, computed, ref } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
 import { convertShortcutKeys } from "@/utils/shortcutkey";
-
+import { IIcon } from "@/components/ui";
 export default defineComponent({
   name: "IsleEditorSlash",
   props: {
@@ -140,9 +139,10 @@ export default defineComponent({
                       "div",
                       { class: `${prefixClass}-slash-menu__item-left` },
                       [
-                        h(getIcon(item.name), {
+                        h(IIcon, {
+                          name: item.name,
                           class: `${prefixClass}-slash-menu__item-left-icon`,
-                          style: { fontSize: "13px" },
+                          size: 14.5,
                         }),
                         h(
                           "span",

diff --git a/packages/vue3/src/components/special-button/button-background.js b/packages/vue3/src/components/special-button/button-background.js
@@ -1,7 +1,13 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon, getDefaultColors } from "@/utils";
-import { ITooltip, IButton, ITrigger, IColorPicker } from "@/components/ui";
+import { getDefaultColors } from "@/utils";
+import {
+  ITooltip,
+  IButton,
+  ITrigger,
+  IColorPicker,
+  IIcon,
+} from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonBackground",
@@ -135,13 +141,15 @@ export default defineComponent({
                             },
                           },
                           [
-                            h(getIcon(props.menu.name || "background"), {
-                              style: { fontSize: "12px" },
+                            h(IIcon, {
+                              name: props.menu.name || "background",
+                              size: 13,
                             }),
                           ],
                         ),
                       default: () =>
-                        h(getIcon("down"), {
+                        h(IIcon, {
+                          name: "down",
                           style: {
                             marginLeft: "0.1rem",
                             marginTop: "0.1rem",

diff --git a/packages/vue3/src/components/special-button/button-color.js b/packages/vue3/src/components/special-button/button-color.js
@@ -1,7 +1,13 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon, getDefaultColors } from "@/utils";
-import { ITooltip, IButton, ITrigger, IColorPicker } from "@/components/ui";
+import { getDefaultColors } from "@/utils";
+import {
+  ITooltip,
+  IButton,
+  ITrigger,
+  IColorPicker,
+  IIcon,
+} from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonColor",
@@ -51,9 +57,10 @@ export default defineComponent({
                   }),
               },
               [
-                h(getIcon(props.menu.name), {
+                h(IIcon, {
+                  name: props.menu.name,
                   class: `${prefixClass}-special-button__color-box-item-icon`,
-                  style: { fontSize: "12px" },
+                  size: 13,
                 }),
               ],
             ),
@@ -126,13 +133,15 @@ export default defineComponent({
                             style: { color: activeColor.value },
                           },
                           [
-                            h(getIcon(props.menu.name || "color"), {
-                              style: { fontSize: "12px" },
+                            h(IIcon, {
+                              name: props.menu.name || "color",
+                              size: 13,
                             }),
                           ],
                         ),
                       default: () =>
-                        h(getIcon("down"), {
+                        h(IIcon, {
+                          name: "down",
                           style: {
                             marginLeft: "0.1rem",
                             marginTop: "0.1rem",

diff --git a/packages/vue3/src/components/special-button/button-font-family.js b/packages/vue3/src/components/special-button/button-font-family.js
@@ -1,7 +1,6 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
-import { ITooltip, IButton, ITrigger } from "@/components/ui";
+import { ITooltip, IButton, ITrigger, IIcon } from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonFontFamily",
@@ -74,7 +73,8 @@ export default defineComponent({
                               : "fontFamily",
                           ),
                         ),
-                        h(getIcon("down"), {
+                        h(IIcon, {
+                          name: "down",
                           style: {
                             marginLeft: "0.1rem",
                             marginTop: "0.1rem",

diff --git a/packages/vue3/src/components/special-button/button-font-size.js b/packages/vue3/src/components/special-button/button-font-size.js
@@ -1,7 +1,6 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
-import { ITooltip, IButton, ITrigger } from "@/components/ui";
+import { ITooltip, IButton, ITrigger, IIcon } from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonFontSize",
@@ -74,7 +73,8 @@ export default defineComponent({
                               : "fontSize",
                           ),
                         ),
-                        h(getIcon("down"), {
+                        h(IIcon, {
+                          name: "down",
                           style: {
                             marginLeft: "0.1rem",
                             marginTop: "0.1rem",

diff --git a/packages/vue3/src/components/special-button/button-link.js b/packages/vue3/src/components/special-button/button-link.js
@@ -1,7 +1,6 @@
 import { defineComponent, nextTick, watchEffect, h, ref } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
-import { ITooltip, IButton, ITrigger } from "@/components/ui";
+import { ITooltip, IButton, ITrigger, IIcon } from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonLink",
@@ -107,11 +106,13 @@ export default defineComponent({
                     {
                       icon: () =>
                         props.isEdit
-                          ? h(getIcon("edit"), {
-                              style: { fontSize: "13px" },
+                          ? h(IIcon, {
+                              name: "edit",
+                              size: 13,
                             })
-                          : h(getIcon(props.menu.name), {
-                              style: { fontSize: "12px" },
+                          : h(IIcon, {
+                              name: props.menu.name,
+                              size: 13,
                             }),
                     },
                   ),
@@ -120,9 +121,10 @@ export default defineComponent({
           content: () =>
             h("div", { class: `${prefixClass}-special-button__link` }, [
               h("div", { class: `${prefixClass}-special-button__link-input` }, [
-                h(getIcon(props.menu.name || "link"), {
+                h(IIcon, {
+                  name: props.menu.name || "link",
                   class: `${prefixClass}-special-button__link-input-icon`,
-                  style: { fontSize: "13px" },
+                  size: 13,
                 }),
                 h("input", {
                   ref: linkInputRef,