fix(dependency) Icon overhaul / Replace @vicons/tabler & MDI 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 />
+        <IconChevronRight size="17" />
       </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 />
+      <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/NavbarButtons.vue

@@ -16,7 +16,7 @@ const { isDarkTheme } = toRefs(styleStore);
       rel="noopener noreferrer"
       :aria-label="$t('home.nav.githubRepository')"
     >
-      <n-icon size="25" :component="IconBrandGithub" />
+      <IconBrandGithub size="25" />
     </c-button>
   </c-tooltip>
 
@@ -29,19 +29,19 @@ const { isDarkTheme } = toRefs(styleStore);
       target="_blank"
       :aria-label="$t('home.nav.twitterXAccount')"
     >
-      <n-icon size="25" :component="IconBrandX" />
+      <IconBrandX size="25" />
     </c-button>
   </c-tooltip>
 
   <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
     <c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
-      <n-icon size="25" :component="IconInfoCircle" />
+      <IconInfoCircle size="25" />
     </c-button>
   </c-tooltip>
   <c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
     <c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
-      <n-icon v-if="isDarkTheme" size="25" :component="IconSun" />
-      <n-icon v-else size="25" :component="IconMoon" />
+      <IconSun v-if="isDarkTheme" size="25" />
+      <IconMoon v-else size="25" />
     </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" />
+            <IconCopy size="20" />
           </c-button>
         </c-tooltip>
       </div>

src/layouts/base.layout.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars } from 'naive-ui';
+import { 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" />
+          <IconMenu2 size="25" />
         </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" />
+            <IconHome2 size="25" />
           </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 />
+            <n-icon v-if="!styleStore.isSmallScreen" :component="IconHeart" ml-2 size="14" />
           </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,13 @@
 <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>
+    <n-icon :component="IconFileUnknown" size="95" lh-1 op50 transition />
 
     <h1 m-0 mt-3>
       {{ $t('404.notFound') }}

src/pages/Home.page.vue

@@ -41,7 +41,7 @@ function onUpdateFavoriteTools() {
             :aria-label="$t('home.follow.twitterXAccount')"
           >X</a>.
           {{ $t('home.follow.thankYou') }}
-          <n-icon :component="IconHeart" />
+          <IconHeart size="15" />
         </ColoredCard>
 
         <a href="https://bit.ly/3zBl7DG" target="_blank" rel="noopener" class="text-current decoration-none">
@@ -76,7 +76,7 @@ function onUpdateFavoriteTools() {
           <h3 class="mb-5px mt-25px font-500 text-neutral-400">
             {{ $t('home.categories.favoriteTools') }}
             <c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
-              <n-icon :component="IconDragDrop" size="18" />
+              <IconDragDrop size="18" />
             </c-tooltip>
           </h3>
           <Draggable

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,
 });