Merge b77138181a into b47d132839

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",

pnpm-lock.yaml

@@ -38,9 +38,6 @@ dependencies:
   '@vicons/material':
     specifier: ^0.12.0
     version: 0.12.0
-  '@vicons/tabler':
-    specifier: ^0.12.0
-    version: 0.12.0
   '@vueuse/core':
     specifier: ^10.3.0
     version: 10.3.0(vue@3.3.4)
@@ -3667,10 +3664,6 @@ packages:
     resolution: {integrity: sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==}
     dev: false
 
-  /@vicons/tabler@0.12.0:
-    resolution: {integrity: sha512-3+wUFuxb7e8OzZ8Wryct1pzfA2vyoF4lwW98O9s27ZrfCGaJGNmqG+q8A7vQ92Mf+COCgxpK+rhNPTtTvaU6qw==}
-    dev: false
-
   /@vitejs/plugin-vue-jsx@3.0.2(vite@4.4.9)(vue@3.3.4):
     resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
     engines: {node: ^14.18.0 || >=16.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" />
+      <IconSun v-if="isDarkTheme" size="25" />
-      <n-icon v-else size="25" :component="IconMoon" />
+      <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,7 +47,7 @@ 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',
@@ -60,7 +55,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       href: 'https://github.com/CorentinTh/it-tools/issues/new/choose',
       category: 'Actions',
       keywords: ['report', 'issue', 'bug', 'problem', 'error'],
-      icon: BugIcon,
+      icon: IconBug,
     },
     {
       name: 'About',
@@ -68,7 +63,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       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>
-
+        <IconSearch size="15px" />
-        <icon-mdi-search />
         {{ $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>
+    <n-icon :component="IconFileUnknown" size="95" lh-1 op50 transition />
-      <icon-mdi:kettle-steam-outline />
-    </span>
 
     <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>
       </div>
 
@@ -50,7 +50,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,
 });

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

src/tools/bip39-generator/bip39-generator.vue

@@ -14,7 +14,7 @@ import {
   portugueseWordList,
   spanishWordList,
 } from '@it-tools/bip39';
-import { Copy, Refresh } from '@vicons/tabler';
+import { IconCopy, IconRefresh } from '@tabler/icons-vue';
 
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
@@ -101,14 +101,10 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
             <c-input-text v-model:value="entropy" placeholder="Your string..." />
 
             <c-button @click="refreshEntropy()">
-              <n-icon size="22">
+              <IconRefresh size="22" />
-                <Refresh />
-              </n-icon>
             </c-button>
             <c-button @click="copyEntropy()">
-              <n-icon size="22">
+              <IconCopy size="22" />
-                <Copy />
-              </n-icon>
             </c-button>
           </n-input-group>
         </n-form-item>
@@ -123,7 +119,7 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
         <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
 
         <c-button @click="copyPassphrase()">
-          <n-icon size="22" :component="Copy" />
+          <IconCopy size="22" />
         </c-button>
       </n-input-group>
     </n-form-item>

src/tools/bip39-generator/index.ts

@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } 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.bip39-generator.description'),
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
 });

src/tools/camera-recorder/camera-recorder.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import _ from 'lodash';
-
+import { IconCamera, IconDownload, IconPlayerPauseFilled, IconPlayerPlayFilled, IconPlayerRecordFilled, IconTrash, IconVideo } from '@tabler/icons-vue';
 import { useMediaRecorder } from './useMediaRecorder';
 
 interface Media { type: 'image' | 'video'; value: string; createdAt: Date }
@@ -158,28 +158,28 @@ function downloadMedia({ type, value, createdAt }: Media) {
 
         <div flex items-center justify-between gap-2>
           <c-button :disabled="!isMediaStreamAvailable" @click="takeScreenshot">
-            <span mr-2> <icon-mdi-camera /></span>
+            <span mr-2><IconCamera size="18" /></span>
             Take screenshot
           </c-button>
 
           <div v-if="isRecordingSupported" flex justify-center gap-2>
             <c-button v-if="recordingState === 'stopped'" @click="startRecording">
-              <span mr-2> <icon-mdi-video /></span>
+              <span mr-2><IconVideo size="18" /></span>
               Start recording
             </c-button>
 
             <c-button v-if="recordingState === 'recording'" @click="pauseRecording">
-              <span mr-2> <icon-mdi-pause /></span>
+              <span mr-2><IconPlayerPauseFilled size="17" /></span>
               Pause
             </c-button>
 
             <c-button v-if="recordingState === 'paused'" @click="resumeRecording">
-              <span mr-2> <icon-mdi-play /></span>
+              <span mr-2><IconPlayerPlayFilled size="15" /></span>
               Resume
             </c-button>
 
             <c-button v-if="recordingState !== 'stopped'" type="error" @click="stopRecording">
-              <span mr-2> <icon-mdi-record /></span>
+              <span mr-2><IconPlayerRecordFilled size="15" /></span>
               Stop
             </c-button>
           </div>
@@ -203,11 +203,11 @@ function downloadMedia({ type, value, createdAt }: Media) {
 
           <div flex gap-2>
             <c-button @click="downloadMedia({ type, value, createdAt })">
-              <icon-mdi-download />
+              <IconDownload size="15" />
             </c-button>
 
             <c-button @click="medias = medias.filter((_ignored, i) => i !== index)">
-              <icon-mdi-delete-outline />
+              <IconTrash size="15" />
             </c-button>
           </div>
         </div>

src/tools/camera-recorder/index.ts

@@ -1,4 +1,4 @@
-import { Camera } from '@vicons/tabler';
+import { IconCamera } 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.camera-recorder.description'),
   keywords: ['camera', 'recoder'],
   component: () => import('./camera-recorder.vue'),
-  icon: Camera,
+  icon: IconCamera,
   createdAt: new Date('2023-05-15'),
 });

src/tools/case-converter/index.ts

@@ -1,4 +1,4 @@
-import { LetterCaseToggle } from '@vicons/tabler';
+import { IconLetterCaseToggle } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'snakeCase',
   ],
   component: () => import('./case-converter.vue'),
-  icon: LetterCaseToggle,
+  icon: IconLetterCaseToggle,
 });

src/tools/chmod-calculator/index.ts

@@ -1,4 +1,4 @@
-import { FileInvoice } from '@vicons/tabler';
+import { IconFileInvoice } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -19,5 +19,5 @@ export const tool = defineTool({
     'octal',
   ],
   component: () => import('./chmod-calculator.vue'),
-  icon: FileInvoice,
+  icon: IconFileInvoice,
 });

src/tools/chronometer/index.ts

@@ -1,4 +1,4 @@
-import { TimerOutlined } from '@vicons/material';
+import { IconStopwatch } 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.chronometer.description'),
   keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
   component: () => import('./chronometer.vue'),
-  icon: TimerOutlined,
+  icon: IconStopwatch,
 });

src/tools/color-converter/index.ts

@@ -1,4 +1,4 @@
-import { Palette } from '@vicons/tabler';
+import { IconPalette } 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.color-converter.description'),
   keywords: ['color', 'converter'],
   component: () => import('./color-converter.vue'),
-  icon: Palette,
+  icon: IconPalette,
   redirectFrom: ['/color-picker-converter'],
 });

src/tools/crontab-generator/index.ts

@@ -1,4 +1,4 @@
-import { Alarm } from '@vicons/tabler';
+import { IconAlarm } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'second',
   ],
   component: () => import('./crontab-generator.vue'),
-  icon: Alarm,
+  icon: IconAlarm,
 });

src/tools/date-time-converter/index.ts

@@ -1,4 +1,4 @@
-import { Calendar } from '@vicons/tabler';
+import { IconCalendar } 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.date-converter.description'),
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
-  icon: Calendar,
+  icon: IconCalendar,
 });

src/tools/device-information/index.ts

@@ -1,4 +1,4 @@
-import { DeviceDesktop } from '@vicons/tabler';
+import { IconDeviceDesktop } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,5 +20,5 @@ export const tool = defineTool({
     'agent',
   ],
   component: () => import('./device-information.vue'),
-  icon: DeviceDesktop,
+  icon: IconDeviceDesktop,
 });

src/tools/docker-run-to-docker-compose-converter/index.ts

@@ -1,4 +1,4 @@
-import { BrandDocker } from '@vicons/tabler';
+import { IconBrandDocker } 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.docker-run-to-docker-compose-converter.description'),
   keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
   component: () => import('./docker-run-to-docker-compose-converter.vue'),
-  icon: BrandDocker,
+  icon: IconBrandDocker,
 });

src/tools/email-normalizer/index.ts

@@ -1,4 +1,4 @@
-import { Mail } from '@vicons/tabler';
+import { IconMail } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning.',
   keywords: ['email', 'normalizer'],
   component: () => import('./email-normalizer.vue'),
-  icon: Mail,
+  icon: IconMail,
   createdAt: new Date('2024-08-15'),
 });

src/tools/emoji-picker/emoji-picker.vue

@@ -2,6 +2,7 @@
 import emojiUnicodeData from 'unicode-emoji-json';
 import emojiKeywords from 'emojilib';
 import _ from 'lodash';
+import { IconSearch } from '@tabler/icons-vue';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import useDebouncedRef from '@/composable/debouncedref';
@@ -47,7 +48,7 @@ const { searchResult } = useFuzzySearch({
         mx-auto max-w-600px
       >
         <template #prefix>
-          <icon-mdi-search mr-6px color-black op-70 dark:color-white />
+          <n-icon :component="IconSearch" mr-6px color-black op-70 dark:color-white />
         </template>
       </c-input-text>
     </div>

src/tools/emoji-picker/index.ts

@@ -1,4 +1,4 @@
-import { MoodSmile } from '@vicons/tabler';
+import { IconMoodSmile } 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.emoji-picker.description'),
   keywords: ['emoji', 'picker', 'unicode', 'copy', 'paste'],
   component: () => import('./emoji-picker.vue'),
-  icon: MoodSmile,
+  icon: IconMoodSmile,
   createdAt: new Date('2023-08-07'),
 });

src/tools/encryption/index.ts

@@ -1,4 +1,4 @@
-import { Lock } from '@vicons/tabler';
+import { IconLock } 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.encryption.description'),
   keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
-  icon: Lock,
+  icon: IconLock,
   redirectFrom: ['/cypher'],
 });

src/tools/eta-calculator/index.ts

@@ -1,4 +1,4 @@
-import { Hourglass } from '@vicons/tabler';
+import { IconHourglass } 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.eta-calculator.description'),
   keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
   component: () => import('./eta-calculator.vue'),
-  icon: Hourglass,
+  icon: IconHourglass,
 });

src/tools/git-memo/index.ts

@@ -1,4 +1,4 @@
-import { BrandGit } from '@vicons/tabler';
+import { IconBrandGit } 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.git-memo.description'),
   keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
-  icon: BrandGit,
+  icon: IconBrandGit,
 });

src/tools/hash-text/index.ts

@@ -1,4 +1,4 @@
-import { EyeOff } from '@vicons/tabler';
+import { IconEyeOff } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,6 +22,6 @@ export const tool = defineTool({
     'RIPEMD160',
   ],
   component: () => import('./hash-text.vue'),
-  icon: EyeOff,
+  icon: IconEyeOff,
   redirectFrom: ['/hash'],
 });

src/tools/hmac-generator/index.ts

@@ -1,4 +1,4 @@
-import { ShortTextRound } from '@vicons/material';
+import { IconSquareKey } 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.hmac-generator.description'),
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
-  icon: ShortTextRound,
+  icon: IconSquareKey,
 });

src/tools/html-entities/index.ts

@@ -1,4 +1,4 @@
-import { Code } from '@vicons/tabler';
+import { IconCode } 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.html-entities.description'),
   keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
   component: () => import('./html-entities.vue'),
-  icon: Code,
+  icon: IconCode,
 });

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,
+  IconArrowBack,
-  ArrowForwardUp,
+  IconArrowForwardUp,
-  Blockquote,
+  IconBlockquote,
-  Bold,
+  IconBold,
-  ClearFormatting,
+  IconClearFormatting,
-  Code,
+  IconCode,
-  CodePlus,
+  IconCodePlus,
-  H1,
+  IconH1,
-  H2,
+  IconH2,
-  H3,
+  IconH3,
-  H4,
+  IconH4,
-  Italic,
+  IconItalic,
-  List,
+  IconList,
-  ListNumbers,
+  IconListNumbers,
-  Strikethrough,
+  IconStrikethrough,
-  TextWrap,
+  IconTextWrap,
-} from '@vicons/tabler';
+} 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(),
   },

src/tools/html-wysiwyg-editor/index.ts

@@ -1,4 +1,4 @@
-import { Edit } from '@vicons/tabler';
+import { IconEdit } 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.html-wysiwyg-editor.description'),
   keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
   component: () => import('./html-wysiwyg-editor.vue'),
-  icon: Edit,
+  icon: IconEdit,
 });

src/tools/iban-validator-and-parser/index.ts

@@ -1,6 +1,6 @@
+import { IconBuildingBank } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import Bank from '~icons/mdi/bank';
 
 export const tool = defineTool({
   name: translate('tools.iban-validator-and-parser.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.iban-validator-and-parser.description'),
   keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
   component: () => import('./iban-validator-and-parser.vue'),
-  icon: Bank,
+  icon: IconBuildingBank,
   createdAt: new Date('2023-08-26'),
 });

src/tools/integer-base-converter/index.ts

@@ -1,4 +1,4 @@
-import { ArrowsLeftRight } from '@vicons/tabler';
+import { IconArrowsLeftRight } 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.base-converter.description'),
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
-  icon: ArrowsLeftRight,
+  icon: IconArrowsLeftRight,
 });

src/tools/ipv4-address-converter/index.ts

@@ -1,4 +1,4 @@
-import { Binary } from '@vicons/tabler';
+import { IconBinary } 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.ipv4-address-converter.description'),
   keywords: ['ipv4', 'address', 'converter', 'decimal', 'hexadecimal', 'binary', 'ipv6'],
   component: () => import('./ipv4-address-converter.vue'),
-  icon: Binary,
+  icon: IconBinary,
   createdAt: new Date('2023-04-08'),
 });

src/tools/ipv4-range-expander/index.ts

@@ -1,4 +1,4 @@
-import { UnfoldMoreOutlined } from '@vicons/material';
+import { IconArrowsMoveVertical } 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.ipv4-range-expander.description'),
   keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
   component: () => import('./ipv4-range-expander.vue'),
-  icon: UnfoldMoreOutlined,
+  icon: IconArrowsMoveVertical,
   createdAt: new Date('2023-04-19'),
 });

src/tools/ipv4-range-expander/ipv4-range-expander.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Exchange } from '@vicons/tabler';
+import { IconExchange } from '@tabler/icons-vue';
 import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
 import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
 import { calculateCidr } from './ipv4-range-expander.service';
@@ -111,7 +111,7 @@ function onSwitchStartEndClicked() {
       </div>
 
       <c-button @click="onSwitchStartEndClicked">
-        <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+        <n-icon mr-2 :component="IconExchange" depth="3" size="22" />
         Switch start and end IPv4 address
       </c-button>
     </n-alert>

src/tools/ipv4-subnet-calculator/index.ts

@@ -1,4 +1,4 @@
-import { RouterOutlined } from '@vicons/material';
+import { IconRouter } 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.ipv4-subnet-calculator.description'),
   keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
   component: () => import('./ipv4-subnet-calculator.vue'),
-  icon: RouterOutlined,
+  icon: IconRouter,
 });

src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Netmask } from 'netmask';
 import { useStorage } from '@vueuse/core';
-import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-vue';
 import { getIPClass } from './ipv4-subnet-calculator.models';
 import { withDefaultOnError } from '@/utils/defaults';
 import { isNotThrowing } from '@/utils/boolean';
@@ -111,12 +111,12 @@ function switchToBlock({ count = 1 }: { count?: number }) {
 
       <div mt-3 flex items-center justify-between>
         <c-button @click="switchToBlock({ count: -1 })">
-          <n-icon :component="ArrowLeft" />
+          <IconArrowLeft size="15" />
           Previous block
         </c-button>
         <c-button @click="switchToBlock({ count: 1 })">
           Next block
-          <n-icon :component="ArrowRight" />
+          <IconArrowRight size="15" />
         </c-button>
       </div>
     </div>

src/tools/ipv6-ula-generator/index.ts

@@ -1,4 +1,4 @@
-import { BuildingFactory } from '@vicons/tabler';
+import { IconBuildingFactory } 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.ipv6-ula-generator.description'),
   keywords: ['ipv6', 'ula', 'generator', 'rfc4193', 'network', 'private'],
   component: () => import('./ipv6-ula-generator.vue'),
-  icon: BuildingFactory,
+  icon: IconBuildingFactory,
   createdAt: new Date('2023-04-09'),
 });

src/tools/json-diff/index.ts

@@ -1,4 +1,4 @@
-import { CompareArrowsRound } from '@vicons/material';
+import { IconArrowsDiff } 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.json-diff.description'),
   keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
   component: () => import('./json-diff.vue'),
-  icon: CompareArrowsRound,
+  icon: IconArrowsDiff,
   createdAt: new Date('2023-04-20'),
 });

src/tools/json-minify/index.ts

@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } 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.json-minify.description'),
   keywords: ['json', 'minify', 'format'],
   component: () => import('./json-minify.vue'),
-  icon: Braces,
+  icon: IconBraces,
 });

src/tools/json-to-csv/index.ts

@@ -1,4 +1,4 @@
-import { List } from '@vicons/tabler';
+import { IconList } 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.json-to-csv.description'),
   keywords: ['json', 'to', 'csv', 'convert'],
   component: () => import('./json-to-csv.vue'),
-  icon: List,
+  icon: IconList,
   createdAt: new Date('2023-06-18'),
 });

src/tools/json-to-toml/index.ts

@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } 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.json-to-toml.description'),
   keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
   component: () => import('./json-to-toml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2023-06-23'),
 });

src/tools/json-to-xml/index.ts

@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Convert JSON to XML',
   keywords: ['json', 'xml'],
   component: () => import('./json-to-xml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2024-08-09'),
 });

src/tools/json-to-yaml-converter/index.ts

@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } 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.json-to-yaml-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./json-to-yaml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2023-04-10'),
 });

src/tools/json-viewer/index.ts

@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } 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.json-prettify.description'),
   keywords: ['json', 'viewer', 'prettify', 'format'],
   component: () => import('./json-viewer.vue'),
-  icon: Braces,
+  icon: IconBraces,
   redirectFrom: ['/json-viewer'],
 });

src/tools/jwt-parser/index.ts

@@ -1,4 +1,4 @@
-import { Key } from '@vicons/tabler';
+import { IconKey } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -24,5 +24,5 @@ export const tool = defineTool({
     'token',
   ],
   component: () => import('./jwt-parser.vue'),
-  icon: Key,
+  icon: IconKey,
 });

src/tools/keycode-info/index.ts

@@ -1,4 +1,4 @@
-import { Keyboard } from '@vicons/tabler';
+import { IconKeyboard } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -23,5 +23,5 @@ export const tool = defineTool({
     'shift',
   ],
   component: () => import('./keycode-info.vue'),
-  icon: Keyboard,
+  icon: IconKeyboard,
 });

src/tools/list-converter/index.ts

@@ -1,4 +1,4 @@
-import { List } from '@vicons/tabler';
+import { IconList } 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.list-converter.description'),
   keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
   component: () => import('./list-converter.vue'),
-  icon: List,
+  icon: IconList,
   createdAt: new Date('2023-05-07'),
 });

src/tools/lorem-ipsum-generator/index.ts

@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } 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.lorem-ipsum-generator.description'),
   keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
   component: () => import('./lorem-ipsum-generator.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
 });

src/tools/mac-address-generator/index.ts

@@ -1,4 +1,4 @@
-import { Devices } from '@vicons/tabler';
+import { IconDevices } 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.mac-address-generator.description'),
   keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
   component: () => import('./mac-address-generator.vue'),
-  icon: Devices,
+  icon: IconDevices,
   createdAt: new Date('2023-11-31'),
 });

src/tools/mac-address-lookup/index.ts

@@ -1,4 +1,4 @@
-import { Devices } from '@vicons/tabler';
+import { IconDevices } 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.mac-address-lookup.description'),
   keywords: ['mac', 'address', 'lookup', 'vendor', 'parser', 'manufacturer'],
   component: () => import('./mac-address-lookup.vue'),
-  icon: Devices,
+  icon: IconDevices,
   createdAt: new Date('2023-04-06'),
 });

src/tools/markdown-to-html/index.ts

@@ -1,4 +1,4 @@
-import { Markdown } from '@vicons/tabler';
+import { IconMarkdown } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Convert Markdown to Html and allow to print (as PDF)',
   keywords: ['markdown', 'html', 'converter', 'pdf'],
   component: () => import('./markdown-to-html.vue'),
-  icon: Markdown,
+  icon: IconMarkdown,
   createdAt: new Date('2024-08-25'),
 });

src/tools/math-evaluator/index.ts

@@ -1,4 +1,4 @@
-import { Math } from '@vicons/tabler';
+import { IconMath } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -40,5 +40,5 @@ export const tool = defineTool({
     'tanh',
   ],
   component: () => import('./math-evaluator.vue'),
-  icon: Math,
+  icon: IconMath,
 });

src/tools/meta-tag-generator/index.ts

@@ -1,4 +1,4 @@
-import { Tags } from '@vicons/tabler';
+import { IconTags } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'og',
   ],
   component: () => import('./meta-tag-generator.vue'),
-  icon: Tags,
+  icon: IconTags,
 });

src/tools/mime-types/index.ts

@@ -1,4 +1,4 @@
-import { World } from '@vicons/tabler';
+import { IconWorld } 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.mime-types.description'),
   keywords: ['mime', 'types', 'extension', 'content', 'type'],
   component: () => import('./mime-types.vue'),
-  icon: World,
+  icon: IconWorld,
 });

src/tools/numeronym-generator/numeronym-generator.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconArrowDown } from '@tabler/icons-vue';
 import { generateNumeronym } from './numeronym-generator.service';
 
 const word = ref('');
@@ -10,7 +11,7 @@ const numeronym = computed(() => generateNumeronym(word.value));
   <div flex flex-col items-center gap-4>
     <c-input-text v-model:value="word" placeholder="Enter a word, e.g. 'internationalization'" size="large" clearable test-id="word-input" />
 
-    <icon-mdi-arrow-down text-30px />
+    <IconArrowDown size="35" />
 
     <input-copyable :value="numeronym" size="large" readonly placeholder="Your numeronym will be here, e.g. 'i18n'" test-id="numeronym" />
   </div>

src/tools/otp-code-generator-and-validator/index.ts

@@ -1,4 +1,4 @@
-import { DeviceMobile } from '@vicons/tabler';
+import { IconDeviceMobile } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -24,5 +24,5 @@ export const tool = defineTool({
     'HMAC',
   ],
   component: () => import('./otp-code-generator-and-validator.vue'),
-  icon: DeviceMobile,
+  icon: IconDeviceMobile,
 });

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
+import { IconReload } from '@tabler/icons-vue';
 import { useQRCode } from '../qr-code-generator/useQRCode';
 import { base32toHex, buildKeyUri, generateSecret, generateTOTP, getCounterFromTime } from './otp.service';
 import TokenDisplay from './token-display.vue';
@@ -63,7 +64,7 @@ const secretValidationRules = [
       <template #suffix>
         <c-tooltip tooltip="Generate a new random secret">
           <c-button circle variant="text" size="small" @click="refreshSecret">
-            <icon-mdi-refresh />
+            <IconReload size="15" />
           </c-button>
         </c-tooltip>
       </template>

src/tools/password-strength-analyser/index.ts

@@ -1,6 +1,6 @@
+import { IconForms } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import PasswordIcon from '~icons/mdi/form-textbox-password';
 
 export const tool = defineTool({
   name: translate('tools.password-strength-analyser.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.password-strength-analyser.description'),
   keywords: ['password', 'strength', 'analyser', 'and', 'crack', 'time', 'estimation', 'brute', 'force', 'attack', 'entropy', 'cracking', 'hash', 'hashing', 'algorithm', 'algorithms', 'md5', 'sha1', 'sha256', 'sha512', 'bcrypt', 'scrypt', 'argon2', 'argon2id', 'argon2i', 'argon2d'],
   component: () => import('./password-strength-analyser.vue'),
-  icon: PasswordIcon,
+  icon: IconForms,
   createdAt: new Date('2023-06-24'),
 });

src/tools/pdf-signature-checker/index.ts

@@ -1,6 +1,6 @@
+import { IconFileCertificate } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import FileCertIcon from '~icons/mdi/file-certificate-outline';
 
 export const tool = defineTool({
   name: translate('tools.pdf-signature-checker.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.pdf-signature-checker.description'),
   keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
   component: () => import('./pdf-signature-checker.vue'),
-  icon: FileCertIcon,
+  icon: IconFileCertificate,
   createdAt: new Date('2023-12-09'),
 });

src/tools/percentage-calculator/index.ts

@@ -1,4 +1,4 @@
-import { Percentage } from '@vicons/tabler';
+import { IconPercentage } 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.percentage-calculator.description'),
   keywords: ['percentage', 'calculator', 'calculate', 'value', 'number', '%'],
   component: () => import('./percentage-calculator.vue'),
-  icon: Percentage,
+  icon: IconPercentage,
   createdAt: new Date('2023-06-18'),
 });

src/tools/phone-parser-and-formatter/index.ts

@@ -1,4 +1,4 @@
-import { Phone } from '@vicons/tabler';
+import { IconPhone } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,6 +20,6 @@ export const tool = defineTool({
     'national',
   ],
   component: () => import('./phone-parser-and-formatter.vue'),
-  icon: Phone,
+  icon: IconPhone,
   createdAt: new Date('2023-05-01'),
 });

src/tools/qr-code-generator/index.ts

@@ -1,4 +1,4 @@
-import { Qrcode } from '@vicons/tabler';
+import { IconQrcode } 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.qrcode-generator.description'),
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
-  icon: Qrcode,
+  icon: IconQrcode,
 });

src/tools/random-port-generator/index.ts

@@ -1,4 +1,4 @@
-import { Server } from '@vicons/tabler';
+import { IconServer } 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.random-port-generator.description'),
   keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
-  icon: Server,
+  icon: IconServer,
 });

src/tools/regex-memo/index.ts

@@ -1,4 +1,4 @@
-import { BrandJavascript } from '@vicons/tabler';
+import { IconBrandJavascript } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Javascript Regex/Regular Expression cheatsheet',
   keywords: ['regex', 'regular', 'expression', 'javascript', 'memo', 'cheatsheet'],
   component: () => import('./regex-memo.vue'),
-  icon: BrandJavascript,
+  icon: IconBrandJavascript,
   createdAt: new Date('2024-09-20'),
 });

src/tools/regex-tester/index.ts

@@ -1,4 +1,4 @@
-import { Language } from '@vicons/tabler';
+import { IconLanguage } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Test your regular expressions with sample text.',
   keywords: ['regex', 'tester', 'sample', 'expression'],
   component: () => import('./regex-tester.vue'),
-  icon: Language,
+  icon: IconLanguage,
   createdAt: new Date('2024-09-20'),
 });

src/tools/roman-numeral-converter/index.ts

@@ -1,4 +1,4 @@
-import { LetterX } from '@vicons/tabler';
+import { IconLetterX } 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.roman-numeral-converter.description'),
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
-  icon: LetterX,
+  icon: IconLetterX,
 });

src/tools/rsa-key-pair-generator/index.ts

@@ -1,4 +1,4 @@
-import { Certificate } from '@vicons/tabler';
+import { IconCertificate } 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.rsa-key-pair-generator.description'),
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
-  icon: Certificate,
+  icon: IconCertificate,
 });

src/tools/safelink-decoder/index.ts

@@ -1,4 +1,4 @@
-import { Mailbox } from '@vicons/tabler';
+import { IconMailbox } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Decode Outlook SafeLink links',
   keywords: ['outlook', 'safelink', 'decoder'],
   component: () => import('./safelink-decoder.vue'),
-  icon: Mailbox,
+  icon: IconMailbox,
   createdAt: new Date('2024-03-11'),
 });

src/tools/slugify-string/index.ts

@@ -1,4 +1,4 @@
-import { AbcRound } from '@vicons/material';
+import { IconAbc } 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.slugify-string.description'),
   keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
   component: () => import('./slugify-string.vue'),
-  icon: AbcRound,
+  icon: IconAbc,
 });

src/tools/sql-prettify/index.ts

@@ -1,4 +1,4 @@
-import { Database } from '@vicons/tabler';
+import { IconDatabase } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -23,5 +23,5 @@ export const tool = defineTool({
     'SQL Server Transact-SQL',
   ],
   component: () => import('./sql-prettify.vue'),
-  icon: Database,
+  icon: IconDatabase,
 });

src/tools/string-obfuscator/index.ts

@@ -1,4 +1,4 @@
-import { EyeOff } from '@vicons/tabler';
+import { IconEyeOff } 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.string-obfuscator.description'),
   keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
   component: () => import('./string-obfuscator.vue'),
-  icon: EyeOff,
+  icon: IconEyeOff,
   createdAt: new Date('2023-08-16'),
 });

src/tools/string-obfuscator/string-obfuscator.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconCopy } from '@tabler/icons-vue';
 import { useObfuscateString } from './string-obfuscator.model';
 import { useCopy } from '@/composable/copy';
 
@@ -40,7 +41,7 @@ const { copy } = useCopy({ source: obfuscatedString });
       </div>
 
       <c-button @click="copy()">
-        <icon-mdi:content-copy />
+        <IconCopy size="18" />
       </c-button>
     </c-card>
   </div>

src/tools/svg-placeholder-generator/index.ts

@@ -1,4 +1,4 @@
-import { ImageOutlined } from '@vicons/material';
+import { IconFileTypeSvg } 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.svg-placeholder-generator.description'),
   keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
   component: () => import('./svg-placeholder-generator.vue'),
-  icon: ImageOutlined,
+  icon: IconFileTypeSvg,
 });

src/tools/temperature-converter/index.ts

@@ -1,4 +1,4 @@
-import { Temperature } from '@vicons/tabler';
+import { IconTemperature } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,5 +20,5 @@ export const tool = defineTool({
     'Rømer',
   ],
   component: () => import('./temperature-converter.vue'),
-  icon: Temperature,
+  icon: IconTemperature,
 });

src/tools/text-diff/index.ts

@@ -1,4 +1,4 @@
-import { FileDiff } from '@vicons/tabler';
+import { IconFileDiff } 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.text-diff.description'),
   keywords: ['text', 'diff', 'compare', 'string', 'text diff', 'code'],
   component: () => import('./text-diff.vue'),
-  icon: FileDiff,
+  icon: IconFileDiff,
   createdAt: new Date('2023-08-16'),
 });

src/tools/text-statistics/index.ts

@@ -1,4 +1,4 @@
-import { FileText } from '@vicons/tabler';
+import { IconFileText } 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.text-statistics.description'),
   keywords: ['text', 'statistics', 'length', 'characters', 'count', 'size', 'bytes'],
   component: () => import('./text-statistics.vue'),
-  icon: FileText,
+  icon: IconFileText,
   redirectFrom: ['/text-stats'],
 });

src/tools/text-to-binary/index.ts

@@ -1,4 +1,4 @@
-import { Binary } from '@vicons/tabler';
+import { IconBinary } 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.text-to-binary.description'),
   keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
   component: () => import('./text-to-binary.vue'),
-  icon: Binary,
+  icon: IconBinary,
   createdAt: new Date('2023-10-15'),
 });

src/tools/text-to-nato-alphabet/index.ts

@@ -1,4 +1,4 @@
-import { Speakerphone } from '@vicons/tabler';
+import { IconSpeakerphone } 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.text-to-nato-alphabet.description'),
   keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
   component: () => import('./text-to-nato-alphabet.vue'),
-  icon: Speakerphone,
+  icon: IconSpeakerphone,
 });

src/tools/text-to-unicode/index.ts

@@ -1,4 +1,4 @@
-import { TextWrap } from '@vicons/tabler';
+import { IconTextWrap } 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.text-to-unicode.description'),
   keywords: ['text', 'to', 'unicode'],
   component: () => import('./text-to-unicode.vue'),
-  icon: TextWrap,
+  icon: IconTextWrap,
   createdAt: new Date('2024-01-31'),
 });

src/tools/token-generator/index.ts

@@ -1,4 +1,4 @@
-import { ArrowsShuffle } from '@vicons/tabler';
+import { IconArrowsShuffle } 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.token-generator.description'),
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase', 'password'],
   component: () => import('./token-generator.tool.vue'),
-  icon: ArrowsShuffle,
+  icon: IconArrowsShuffle,
 });

src/tools/toml-to-json/index.ts

@@ -1,14 +1,13 @@
+import { IconBrackets } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
-import BracketIcon from '~icons/mdi/code-brackets';
-
 export const tool = defineTool({
   name: translate('tools.toml-to-json.title'),
   path: '/toml-to-json',
   description: translate('tools.toml-to-json.description'),
   keywords: ['toml', 'json', 'convert', 'online', 'transform', 'parser'],
   component: () => import('./toml-to-json.vue'),
-  icon: BracketIcon,
+  icon: IconBrackets,
   createdAt: new Date('2023-06-23'),
 });

src/tools/toml-to-yaml/index.ts

@@ -1,6 +1,6 @@
+import { IconBrackets } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
   name: translate('tools.toml-to-yaml.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.toml-to-yaml.description'),
   keywords: ['toml', 'yaml', 'convert', 'online', 'transform', 'parse'],
   component: () => import('./toml-to-yaml.vue'),
-  icon: BracketIcon,
+  icon: IconBrackets,
   createdAt: new Date('2023-06-23'),
 });

src/tools/ulid-generator/index.ts

@@ -1,4 +1,4 @@
-import { SortDescendingNumbers } from '@vicons/tabler';
+import { IconSortDescendingNumbers } 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.ulid-generator.description'),
   keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./ulid-generator.vue'),
-  icon: SortDescendingNumbers,
+  icon: IconSortDescendingNumbers,
   createdAt: new Date('2023-09-11'),
 });

src/tools/url-encoder/index.ts

@@ -1,4 +1,4 @@
-import { Link } from '@vicons/tabler';
+import { IconLink } 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.url-encoder.description'),
   keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
   component: () => import('./url-encoder.vue'),
-  icon: Link,
+  icon: IconLink,
 });