fix(dependency) Replace @vicons/tabler with @tabler/icons-vue

src/tools/html-wysiwyg-editor/editor/menu-bar.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/vue-3';
 import {
-  ArrowBack,
-  ArrowForwardUp,
-  Blockquote,
-  Bold,
-  ClearFormatting,
-  Code,
-  CodePlus,
-  H1,
-  H2,
-  H3,
-  H4,
-  Italic,
-  List,
-  ListNumbers,
-  Strikethrough,
-  TextWrap,
-} from '@vicons/tabler';
+  IconArrowBack,
+  IconArrowForwardUp,
+  IconBlockquote,
+  IconBold,
+  IconClearFormatting,
+  IconCode,
+  IconCodePlus,
+  IconH1,
+  IconH2,
+  IconH3,
+  IconH4,
+  IconItalic,
+  IconList,
+  IconListNumbers,
+  IconStrikethrough,
+  IconTextWrap,
+} from '@tabler/icons-vue';
 import type { Component } from 'vue';
 import MenuBarItem from './menu-bar-item.vue';
 
@@ -37,28 +37,28 @@ type MenuItem =
 const items: MenuItem[] = [
   {
     type: 'button',
-    icon: Bold,
+    icon: IconBold,
     title: 'Bold',
     action: () => editor.value.chain().focus().toggleBold().run(),
     isActive: () => editor.value.isActive('bold'),
   },
   {
     type: 'button',
-    icon: Italic,
+    icon: IconItalic,
     title: 'Italic',
     action: () => editor.value.chain().focus().toggleItalic().run(),
     isActive: () => editor.value.isActive('italic'),
   },
   {
     type: 'button',
-    icon: Strikethrough,
+    icon: IconStrikethrough,
     title: 'Strike',
     action: () => editor.value.chain().focus().toggleStrike().run(),
     isActive: () => editor.value.isActive('strike'),
   },
   {
     type: 'button',
-    icon: Code,
+    icon: IconCode,
     title: 'Inline code',
     action: () => editor.value.chain().focus().toggleCode().run(),
     isActive: () => editor.value.isActive('code'),
@@ -68,28 +68,28 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: H1,
+    icon: IconH1,
     title: 'Heading 1',
     action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 1 }),
   },
   {
     type: 'button',
-    icon: H2,
+    icon: IconH2,
     title: 'Heading 2',
     action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 2 }),
   },
   {
     type: 'button',
-    icon: H3,
+    icon: IconH3,
     title: 'Heading 3',
     action: () => editor.value.chain().focus().toggleHeading({ level: 3 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 3 }),
   },
   {
     type: 'button',
-    icon: H4,
+    icon: IconH4,
     title: 'Heading 4',
     action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 4 }),
@@ -99,21 +99,21 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: List,
+    icon: IconList,
     title: 'Bullet list',
     action: () => editor.value.chain().focus().toggleBulletList().run(),
     isActive: () => editor.value.isActive('bulletList'),
   },
   {
     type: 'button',
-    icon: ListNumbers,
+    icon: IconListNumbers,
     title: 'Ordered list',
     action: () => editor.value.chain().focus().toggleOrderedList().run(),
     isActive: () => editor.value.isActive('orderedList'),
   },
   {
     type: 'button',
-    icon: CodePlus,
+    icon: IconCodePlus,
     title: 'Code block',
     action: () => editor.value.chain().focus().toggleCodeBlock().run(),
     isActive: () => editor.value.isActive('codeBlock'),
@@ -121,7 +121,7 @@ const items: MenuItem[] = [
 
   {
     type: 'button',
-    icon: Blockquote,
+    icon: IconBlockquote,
     title: 'Blockquote',
     action: () => editor.value.chain().focus().toggleBlockquote().run(),
     isActive: () => editor.value.isActive('blockquote'),
@@ -131,26 +131,26 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: TextWrap,
+    icon: IconTextWrap,
     title: 'Hard break',
     action: () => editor.value.chain().focus().setHardBreak().run(),
   },
   {
     type: 'button',
-    icon: ClearFormatting,
+    icon: IconClearFormatting,
     title: 'Clear format',
     action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
   },
 
   {
     type: 'button',
-    icon: ArrowBack,
+    icon: IconArrowBack,
     title: 'Undo',
     action: () => editor.value.chain().focus().undo().run(),
   },
   {
     type: 'button',
-    icon: ArrowForwardUp,
+    icon: IconArrowForwardUp,
     title: 'Redo',
     action: () => editor.value.chain().focus().redo().run(),
   },