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

components.d.ts

@@ -89,18 +89,6 @@ declare module '@vue/runtime-core' {
     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
-    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
-    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
-    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
-    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
-    IconMdiClose: typeof import('~icons/mdi/close')['default']
-    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    IconMdiEye: typeof import('~icons/mdi/eye')['default']
-    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
-    IconMdiHeart: typeof import('~icons/mdi/heart')['default']
-    IconMdiSearch: typeof import('~icons/mdi/search')['default']
-    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
-    IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']

package.json

@@ -47,7 +47,6 @@
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
-    "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",

scripts/create-tool.mjs

@@ -46,7 +46,7 @@ createToolFile(
 createToolFile(
   `index.ts`,
   `
-import { ArrowsShuffle } from '@vicons/tabler';
+import { IconArrowsShuffle } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -55,7 +55,7 @@ export const tool = defineTool({
   description: '',
   keywords: ['${toolName.split('-').join("', '")}'],
   component: () => import('./${toolName}.vue'),
-  icon: ArrowsShuffle,
+  icon: IconArrowsShuffle,
   createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
 });
 `,

src/components/CollapsibleToolMenu.vue

@@ -2,6 +2,7 @@
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { RouterLink, useRoute } from 'vue-router';
+import { IconChevronRight } from '@tabler/icons-vue';
 import MenuIconItem from './MenuIconItem.vue';
 import type { Tool, ToolCategory } from '@/tools/tools.types';
 
@@ -48,7 +49,7 @@ const themeVars = useThemeVars();
   <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
     <div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
       <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
-        <icon-mdi-chevron-right />
+        <n-icon :component="IconChevronRight" />
       </span>
 
       <span ml-8px text-13px>

src/components/FavoriteButton.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconHeartFilled } from '@tabler/icons-vue';
 import { useToolStore } from '@/tools/tools.store';
 import type { Tool } from '@/tools/tools.types';
 
@@ -32,7 +33,7 @@ function toggleFavorite(event: MouseEvent) {
       :style="{ opacity: isFavorite ? 1 : 0.2 }"
       @click="toggleFavorite"
     >
-      <icon-mdi-heart />
+      <n-icon :component="IconHeartFilled" size="18" />
     </c-button>
   </c-tooltip>
 </template>

src/components/InputCopyable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
+import { IconCopy } from '@tabler/icons-vue';
 import { useCopy } from '@/composable/copy';
 
 const props = defineProps<{ value: string }>();
@@ -15,7 +16,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to cli
     <template #suffix>
       <c-tooltip :tooltip="tooltipText">
         <c-button circle variant="text" size="small" @click="copy()">
-          <icon-mdi-content-copy />
+          <IconCopy size="15" />
         </c-button>
       </c-tooltip>
     </template>

src/components/TextareaCopyable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Copy } from '@vicons/tabler';
+import { IconCopy } from '@tabler/icons-vue';
 import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
@@ -55,7 +55,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
       <div absolute right-10px top-10px>
         <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
           <c-button circle important:h-10 important:w-10 @click="copy()">
-            <n-icon size="22" :component="Copy" />
+            <n-icon size="22" :component="IconCopy" />
           </c-button>
         </c-tooltip>
       </div>

src/layouts/base.layout.vue

@@ -2,7 +2,7 @@
 import { NIcon, useThemeVars } from 'naive-ui';
 
 import { RouterLink } from 'vue-router';
-import { Heart, Home2, Menu2 } from '@vicons/tabler';
+import { IconBrush, IconHeart, IconHome2, IconMenu2 } from '@tabler/icons-vue';
 
 import { storeToRefs } from 'pinia';
 import HeroGradient from '../assets/hero-gradient.svg?component';
@@ -97,18 +97,18 @@ const tools = computed<ToolCategory[]>(() => [
           :aria-label="$t('home.toggleMenu')"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
-          <NIcon size="25" :component="Menu2" />
+          <NIcon size="25" :component="IconMenu2" />
         </c-button>
 
         <c-tooltip :tooltip="$t('home.home')" position="bottom">
           <c-button to="/" circle variant="text" :aria-label="$t('home.home')">
-            <NIcon size="25" :component="Home2" />
+            <NIcon size="25" :component="IconHome2" />
           </c-button>
         </c-tooltip>
 
         <c-tooltip :tooltip="$t('home.uiLib')" position="bottom">
           <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
-            <icon-mdi:brush-variant text-20px />
+            <IconBrush />
           </c-button>
         </c-tooltip>
 
@@ -131,7 +131,7 @@ const tools = computed<ToolCategory[]>(() => [
             @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
           >
             {{ $t('home.buyMeACoffee') }}
-            <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
+            <NIcon v-if="!styleStore.isSmallScreen" :component="IconHeart" ml-2 />
           </c-button>
         </c-tooltip>
       </div>

src/modules/command-palette/command-palette.store.ts

@@ -1,16 +1,11 @@
 import { defineStore } from 'pinia';
 import _ from 'lodash';
+import { IconBrandGithub, IconBug, IconDice5Filled, IconInfoCircle, IconSun } from '@tabler/icons-vue';
 import type { PaletteOption } from './command-palette.types';
 import { useToolStore } from '@/tools/tools.store';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import { useStyleStore } from '@/stores/style.store';
 
-import SunIcon from '~icons/mdi/white-balance-sunny';
-import GithubIcon from '~icons/mdi/github';
-import BugIcon from '~icons/mdi/bug-outline';
-import DiceIcon from '~icons/mdi/dice-5';
-import InfoIcon from '~icons/mdi/information-outline';
-
 export const useCommandPaletteStore = defineStore('command-palette', () => {
   const toolStore = useToolStore();
   const styleStore = useStyleStore();
@@ -33,7 +28,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
         const { path } = _.sample(toolStore.tools)!;
         router.push(path);
       },
-      icon: DiceIcon,
+      icon: IconDice5Filled,
       category: 'Tools',
       keywords: ['random', 'tool', 'pick', 'choose', 'select'],
       closeOnSelect: true,
@@ -42,7 +37,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       name: 'Toggle dark mode',
       description: 'Toggle dark mode on or off.',
       action: () => styleStore.toggleDark(),
-      icon: SunIcon,
+      icon: IconSun,
       category: 'Actions',
       keywords: ['dark', 'theme', 'toggle', 'mode', 'light', 'system'],
     },
@@ -52,23 +47,23 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       category: 'External',
       description: 'View the source code of it-tools on Github.',
       keywords: ['github', 'repo', 'repository', 'source', 'code'],
-      icon: GithubIcon,
+      icon: IconBrandGithub,
     },
     {
       name: 'Report a bug or an issue',
       description: 'Report a bug or an issue to help improve it-tools.',
       href: 'https://github.com/CorentinTh/it-tools/issues/new/choose',
       category: 'Actions',
       keywords: ['report', 'issue', 'bug', 'problem', 'error'],
-      icon: BugIcon,
+      icon: IconBug,
     },
     {
       name: 'About',
       description: 'Learn more about IT-Tools.',
       to: '/about',
       category: 'Pages',
       keywords: ['about', 'learn', 'more', 'info', 'information'],
-      icon: InfoIcon,
+      icon: IconInfoCircle,
     },
   ];
 

src/modules/command-palette/command-palette.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import _ from 'lodash';
+import { IconSearch } from '@tabler/icons-vue';
 import { useCommandPaletteStore } from './command-palette.store';
 import type { PaletteOption } from './command-palette.types';
 
@@ -114,8 +115,7 @@ function activateOption(option: PaletteOption) {
   <div flex-1>
     <c-button w-full important:justify-start @click="isModalOpen = true">
       <span flex items-center gap-3 op-40>
-
-        <icon-mdi-search />
+        <IconSearch size="15px" />
         {{ $t('search.label') }}
 
         <span hidden flex-1 border border-current border-op-40 rounded border-solid px-5px py-3px sm:inline>

src/pages/404.page.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head';
+import { IconFileUnknown } from '@tabler/icons-vue';
 
 useHead({ title: 'Page not found - IT Tools' });
 </script>
 
 <template>
   <div mt-20 flex flex-col items-center>
-    <span text-90px lh-1 op-50>
-      <icon-mdi:kettle-steam-outline />
-    </span>
+    <div lh-1 op50 transition>
+      <IconFileUnknown size="90" />
+    </div>
 
     <h1 m-0 mt-3>
       {{ $t('404.notFound') }}

src/tools/ascii-text-drawer/index.ts

@@ -1,4 +1,4 @@
-import { Artboard } from '@vicons/tabler';
+import { IconArtboard } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Create ASCII art text with many fonts and styles.',
   keywords: ['ascii', 'asciiart', 'text', 'drawer'],
   component: () => import('./ascii-text-drawer.vue'),
-  icon: Artboard,
+  icon: IconArtboard,
   createdAt: new Date('2024-03-03'),
 });

src/tools/base64-file-converter/index.ts

@@ -1,4 +1,4 @@
-import { FileDigit } from '@vicons/tabler';
+import { IconFileDigit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.base64-file-converter.description'),
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
-  icon: FileDigit,
+  icon: IconFileDigit,
 });

src/tools/base64-string-converter/index.ts

@@ -1,4 +1,4 @@
-import { FileDigit } from '@vicons/tabler';
+import { IconFileDigit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.base64-string-converter.description'),
   keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
   component: () => import('./base64-string-converter.vue'),
-  icon: FileDigit,
+  icon: IconFileDigit,
   redirectFrom: ['/file-to-base64', '/base64-converter'],
 });

src/tools/basic-auth-generator/index.ts

@@ -1,4 +1,4 @@
-import { PasswordRound } from '@vicons/material';
+import { IconPassword } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -18,5 +18,5 @@ export const tool = defineTool({
     'authorization',
   ],
   component: () => import('./basic-auth-generator.vue'),
-  icon: PasswordRound,
+  icon: IconPassword,
 });

src/tools/bcrypt/index.ts

@@ -1,4 +1,4 @@
-import { LockSquare } from '@vicons/tabler';
+import { IconLockSquare } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.bcrypt.description'),
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
-  icon: LockSquare,
+  icon: IconLockSquare,
 });

src/tools/benchmark-builder/benchmark-builder.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Plus, Trash } from '@vicons/tabler';
+import { IconPlus, IconTrash } from '@tabler/icons-vue';
 import { useStorage } from '@vueuse/core';
 import _ from 'lodash';
 
@@ -99,14 +99,14 @@ function copyAsBulletList() {
 
         <div flex justify-center>
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
-            <n-icon :component="Trash" depth="3" mr-2 size="18" />
+            <n-icon :component="IconTrash" depth="3" mr-2 size="18" />
             Delete suite
           </c-button>
           <c-button
             variant="text"
             @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
           >
-            <n-icon :component="Plus" depth="3" mr-2 size="18" />
+            <n-icon :component="IconPlus" depth="3" mr-2 size="18" />
             Add suite
           </c-button>
         </div>

src/tools/benchmark-builder/dynamic-values.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Plus, Trash } from '@vicons/tabler';
+import { IconPlus, IconTrash } from '@tabler/icons-vue';
 import { useTemplateRefsList, useVModel } from '@vueuse/core';
 import { NInputNumber } from 'naive-ui';
 import { nextTick } from 'vue';
@@ -41,13 +41,13 @@ function onInputEnter(index: number) {
       />
       <c-tooltip tooltip="Delete this value">
         <c-button circle variant="text" @click="values.splice(index, 1)">
-          <n-icon :component="Trash" depth="3" size="18" />
+          <n-icon :component="IconTrash" depth="3" size="18" />
         </c-button>
       </c-tooltip>
     </div>
 
     <c-button @click="addValue">
-      <n-icon :component="Plus" depth="3" mr-2 size="18" />
+      <n-icon :component="IconPlus" depth="3" mr-2 size="18" />
       Add a measure
     </c-button>
   </div>

src/tools/benchmark-builder/index.ts

@@ -1,4 +1,4 @@
-import { SpeedFilled } from '@vicons/material';
+import { IconBrandSpeedtest } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.benchmark-builder.description'),
   keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
   component: () => import('./benchmark-builder.vue'),
-  icon: SpeedFilled,
+  icon: IconBrandSpeedtest,
   createdAt: new Date('2023-04-05'),
 });