feat: switch to unplugin incons

pnpm-lock.yaml

@@ -97,9 +97,6 @@ importers:
       '@imput/version-info':
         specifier: workspace:^
         version: link:../packages/version-info
-      '@tabler/icons-svelte':
-        specifier: 3.6.0
-        version: 3.6.0(svelte@4.2.18)
       '@vitejs/plugin-basic-ssl':
         specifier: ^1.1.0
         version: 1.1.0(vite@5.3.5(@types/node@20.14.14))
@@ -119,6 +116,9 @@ importers:
       '@fontsource/redaction-10':
         specifier: ^5.0.2
         version: 5.0.2
+      '@iconify-json/tabler':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@sveltejs/adapter-static':
         specifier: ^3.0.2
         version: 3.0.2(@sveltejs/kit@2.5.19(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))
@@ -170,6 +170,9 @@ importers:
       typescript-eslint:
         specifier: ^7.13.1
         version: 7.18.0(eslint@8.57.0)(typescript@5.5.4)
+      unplugin-icons:
+        specifier: ^0.19.3
+        version: 0.19.3
       vite:
         specifier: ^5.0.3
         version: 5.3.5(@types/node@20.14.14)
@@ -180,6 +183,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
   '@derhuerst/http-basic@8.2.4':
     resolution: {integrity: sha512-F9rL9k9Xjf5blCz8HsJRO4diy111cayL2vkY2XE4r4t3n0yPXVYy3KD3nJ1qbrSn9743UWSXH4IwuCa/HWlGFw==}
     engines: {node: '>=6.0.0'}
@@ -520,6 +529,15 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@iconify-json/tabler@1.2.2':
+    resolution: {integrity: sha512-sdHGvNKWm4TofzGm/rP5UythJBp82DqTOfjSlCLUTnuwCuRSJia5vfoIx2aEVRKq8jINj/V80c+A2k7jAW8Hlg==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.1.32':
+    resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
+
   '@imput/libav.js-remux-cli@5.5.6':
     resolution: {integrity: sha512-XdAab90EZKf6ULtD/x9Y2bnlmNJodXSO6w8aWrn97+N2IRuOS8zv3tAFPRC69SWKa8Utjeu5YTYuTolnX3QprQ==}
 
@@ -681,14 +699,6 @@ packages:
   '@sveltekit-i18n/parser-default@1.1.1':
     resolution: {integrity: sha512-/gtzLlqm/sox7EoPKD56BxGZktK/syGc79EbJAPWY5KVitQD9SM0TP8yJCqDxTVPk7Lk0WJhrBGUE2Nn0f5M1w==}
 
-  '@tabler/icons-svelte@3.6.0':
-    resolution: {integrity: sha512-phI61t81MlWhodATjvQQdqw8vTL0srSW6GsHzJmuhIMJGB4rwFzAXB2Ec4Pkz0vWFzVQgkeSE/AsiOLIUKWkxA==}
-    peerDependencies:
-      svelte: '>=3 <5'
-
-  '@tabler/icons@3.6.0':
-    resolution: {integrity: sha512-Zv0Ofc64RCMpZ2F8CvsWAphrSjerx5hEErt/RMmE+W8r4E5l5Lizi+My9KbbZQ4NyAtrtrOX80OY1oROZrRzEA==}
-
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -936,6 +946,9 @@ packages:
     resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
     engines: {'0': node >= 6.0}
 
+  confbox@0.1.7:
+    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+
   consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1510,6 +1523,9 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1525,6 +1541,10 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -1618,6 +1638,9 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  mlly@1.7.1:
+    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -1701,6 +1724,9 @@ packages:
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
+  package-manager-detector@0.2.0:
+    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1735,6 +1761,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
   periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
 
@@ -1749,6 +1778,9 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  pkg-types@1.2.0:
+    resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
+
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -2085,6 +2117,9 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tinyexec@0.3.0:
+    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2172,6 +2207,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -2186,6 +2224,35 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-icons@0.19.3:
+    resolution: {integrity: sha512-EUegRmsAI6+rrYr0vXjFlIP+lg4fSC4zb62zAZKx8FGXlWAGgEGBCa3JDe27aRAXhistObLPbBPhwa/0jYLFkQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
+  unplugin@1.14.1:
+    resolution: {integrity: sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      webpack-sources: ^3
+    peerDependenciesMeta:
+      webpack-sources:
+        optional: true
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -2246,6 +2313,9 @@ packages:
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
@@ -2286,6 +2356,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.0
+      tinyexec: 0.3.0
+
+  '@antfu/utils@0.7.10': {}
+
   '@derhuerst/http-basic@8.2.4':
     dependencies:
       caseless: 0.12.0
@@ -2482,6 +2559,24 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@iconify-json/tabler@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.1.32':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.6
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@imput/libav.js-remux-cli@5.5.6': {}
 
   '@isaacs/cliui@8.0.2':
@@ -2626,13 +2721,6 @@ snapshots:
 
   '@sveltekit-i18n/parser-default@1.1.1': {}
 
-  '@tabler/icons-svelte@3.6.0(svelte@4.2.18)':
-    dependencies:
-      '@tabler/icons': 3.6.0
-      svelte: 4.2.18
-
-  '@tabler/icons@3.6.0': {}
-
   '@types/cookie@0.6.0': {}
 
   '@types/eslint@9.6.0':
@@ -2907,6 +2995,8 @@ snapshots:
       readable-stream: 3.6.2
       typedarray: 0.0.6
 
+  confbox@0.1.7: {}
+
   consola@3.2.3: {}
 
   content-disposition-header@0.6.0: {}
@@ -3523,6 +3613,8 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  kolorist@1.8.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -3534,6 +3626,11 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
+  local-pkg@0.5.0:
+    dependencies:
+      mlly: 1.7.1
+      pkg-types: 1.2.0
+
   locate-character@3.0.0: {}
 
   locate-path@6.0.0:
@@ -3605,6 +3702,13 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  mlly@1.7.1:
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.2.0
+      ufo: 1.5.4
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -3674,6 +3778,8 @@ snapshots:
 
   package-json-from-dist@1.0.0: {}
 
+  package-manager-detector@0.2.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -3697,6 +3803,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@1.1.2: {}
+
   periscopic@3.1.0:
     dependencies:
       '@types/estree': 1.0.5
@@ -3709,6 +3817,12 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pkg-types@1.2.0:
+    dependencies:
+      confbox: 0.1.7
+      mlly: 1.7.1
+      pathe: 1.1.2
+
   postcss-load-config@6.0.1(postcss@8.4.40):
     dependencies:
       lilconfig: 3.1.2
@@ -4032,6 +4146,8 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tinyexec@0.3.0: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -4111,6 +4227,8 @@ snapshots:
 
   typescript@5.5.4: {}
 
+  ufo@1.5.4: {}
+
   undici-types@5.26.5: {}
 
   undici@5.28.4:
@@ -4123,6 +4241,24 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-icons@0.19.3:
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/utils': 2.1.32
+      debug: 4.3.6
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      unplugin: 1.14.1
+    transitivePeerDependencies:
+      - supports-color
+      - webpack-sources
+
+  unplugin@1.14.1:
+    dependencies:
+      acorn: 8.12.1
+      webpack-virtual-modules: 0.6.2
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -4155,6 +4291,8 @@ snapshots:
 
   webidl-conversions@4.0.2: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-url@7.1.0:
     dependencies:
       lodash.sortby: 4.7.0

web/package.json

@@ -26,6 +26,7 @@
     "devDependencies": {
         "@eslint/js": "^9.5.0",
         "@fontsource/redaction-10": "^5.0.2",
+        "@iconify-json/tabler": "^1.2.2",
         "@sveltejs/adapter-static": "^3.0.2",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -43,6 +44,7 @@
         "turnstile-types": "^1.2.2",
         "typescript": "^5.4.5",
         "typescript-eslint": "^7.13.1",
+        "unplugin-icons": "^0.19.3",
         "vite": "^5.0.3"
     },
     "dependencies": {
@@ -50,7 +52,6 @@
         "@fontsource/ibm-plex-mono": "^5.0.13",
         "@imput/libav.js-remux-cli": "^5.5.6",
         "@imput/version-info": "workspace:^",
-        "@tabler/icons-svelte": "3.6.0",
         "@vitejs/plugin-basic-ssl": "^1.1.0",
         "mime": "^4.0.4",
         "sveltekit-i18n": "^2.4.2",

web/src/components/dialog/PickerDialog.svelte

@@ -11,7 +11,7 @@
     import PickerItem from "$components/dialog/PickerItem.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
     
-    import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte";
+    import IconBoxMultiple from 'virtual:icons/tabler/box-multiple';
 
     export let id: string;
     export let items: Optional<DialogPickerItem[]> = undefined;

web/src/components/dialog/PickerItem.svelte

@@ -6,9 +6,9 @@
 
     import Skeleton from "$components/misc/Skeleton.svelte";
 
-    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMovie from "virtual:icons/tabler/movie";
-    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+    import IconPhoto from "virtual:icons/tabler/photo";
-    import IconGif from "@tabler/icons-svelte/IconGif.svelte";
+    import IconGif from "virtual:icons/tabler/gif";
 
     export let item: DialogPickerItem;
     export let number: number;

web/src/components/dialog/SavingDialog.svelte

@@ -17,9 +17,9 @@
     import SavingTutorial from "$components/dialog/SavingTutorial.svelte";
     import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
 
-    import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
+    import IconShare2 from "virtual:icons/tabler/share-2";
-    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import IconDownload from "virtual:icons/tabler/download";
-    import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
+    import IconFileDownload from "virtual:icons/tabler/file-download";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
     export let id: string;

web/src/components/dialog/SavingTutorial.svelte

@@ -2,9 +2,9 @@
     import { siriShortcuts } from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
-    import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+    import IconPlus from "virtual:icons/tabler/plus";
-    import IconFlower from "@tabler/icons-svelte/IconFlower.svelte";
+    import IconFlower from "virtual:icons/tabler/flower";
-    import IconFolder from "@tabler/icons-svelte/IconFolder.svelte";
+    import IconFolder from "virtual:icons/tabler/folder";
 
     let tutorialExpanded = false;
 </script>

web/src/components/dialog/SmallDialog.svelte

@@ -8,7 +8,7 @@
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
 
-    import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
+    import IconAlertTriangle from "virtual:icons/tabler/alert-triangle";
 
     export let id: string;
     export let meowbalt: Optional<MeowbaltEmotions> = undefined;

web/src/components/donate/DonateAltItem.svelte

@@ -3,7 +3,7 @@
     import { copyURL, openURL } from "$lib/download";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
-    import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";
+    import IconExternalLink from "virtual:icons/tabler/external-link";
 
     export let type: "copy" | "open";
     export let name: string;

web/src/components/donate/DonateBanner.svelte

@@ -6,7 +6,7 @@
     import Imput from "$components/icons/Imput.svelte";
     import Meowbalt from "$components/misc/Meowbalt.svelte";
 
-    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
+    import IconHeart from "virtual:icons/tabler/heart";
 </script>
 
 <header id="banner">

web/src/components/donate/DonateOptionsCard.svelte

@@ -5,21 +5,21 @@
     import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
     import DonationOption from "$components/donate/DonationOption.svelte";
 
-    import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
+    import IconCoin from "virtual:icons/tabler/coin";
-    import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
+    import IconCalendarRepeat from "virtual:icons/tabler/calendar-repeat";
-    import IconCup from "@tabler/icons-svelte/IconCup.svelte";
+    import IconCup from "virtual:icons/tabler/cup";
-    import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
+    import IconPizza from "virtual:icons/tabler/pizza";
-    import IconToolsKitchen2 from "@tabler/icons-svelte/IconToolsKitchen2.svelte";
+    import IconToolsKitchen2 from "virtual:icons/tabler/tools-kitchen-2";
-    import IconPaperBag from "@tabler/icons-svelte/IconPaperBag.svelte";
+    import IconPaperBag from "virtual:icons/tabler/paper-bag";
-    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
+    import IconArrowRight from "virtual:icons/tabler/arrow-right";
-    import IconSoup from "@tabler/icons-svelte/IconSoup.svelte";
+    import IconSoup from "virtual:icons/tabler/soup";
-    import IconFridge from "@tabler/icons-svelte/IconFridge.svelte";
+    import IconFridge from "virtual:icons/tabler/fridge";
-    import IconArmchair from "@tabler/icons-svelte/IconArmchair.svelte";
+    import IconArmchair from "virtual:icons/tabler/armchair";
-    import IconDeviceLaptop from "@tabler/icons-svelte/IconDeviceLaptop.svelte";
+    import IconDeviceLaptop from "virtual:icons/tabler/device-laptop";
-    import IconApple from "@tabler/icons-svelte/IconApple.svelte";
+    import IconApple from "virtual:icons/tabler/apple";
-    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+    import IconPhoto from "virtual:icons/tabler/photo";
-    import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
+    import IconWorldWww from "virtual:icons/tabler/world-www";
-    import IconBath from "@tabler/icons-svelte/IconBath.svelte";
+    import IconBath from "virtual:icons/tabler/bath";
     import OuterLink from "$components/misc/OuterLink.svelte";
 
     let customInput: HTMLInputElement;

web/src/components/donate/DonateShareCard.svelte

@@ -8,10 +8,10 @@
 
     import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
 
-    import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
+    import IconShare2 from "virtual:icons/tabler/share-2";
-    import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
+    import IconBrandGithub from "virtual:icons/tabler/brand-github";
-    import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
+    import IconBrandTwitter from "virtual:icons/tabler/brand-twitter";
-    import IconMoodSmileBeam from "@tabler/icons-svelte/IconMoodSmileBeam.svelte";
+    import IconMoodSmileBeam from "virtual:icons/tabler/mood-smile-beam";
 
     import CobaltQr from "$components/icons/CobaltQR.svelte";
     import CopyIcon from "$components/misc/CopyIcon.svelte";

web/src/components/misc/CopyIcon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import IconLink from "@tabler/icons-svelte/IconLink.svelte";
+    import IconLink from "virtual:icons/tabler/link";
-    import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
+    import IconCopy from "virtual:icons/tabler/copy";
-    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
+    import IconCheck from "virtual:icons/tabler/check";
 
     export let check = false;
     export let regularIcon = false;

web/src/components/misc/FileReceiver.svelte

@@ -2,8 +2,8 @@
     import { t } from "$lib/i18n/translations";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-    import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
+    import IconFileImport from "virtual:icons/tabler/file-import";
-    import IconUpload from "@tabler/icons-svelte/IconUpload.svelte";
+    import IconUpload from "virtual:icons/tabler/upload";
 
     export let file: File | undefined;
     export let draggedOver = false;

web/src/components/misc/UpdateNotification.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
-    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+    import IconComet from "virtual:icons/tabler/comet";
 </script>
 
 <div id="update-notification" role="alert" aria-atomic="true">

web/src/components/save/Omnibox.svelte

@@ -16,8 +16,8 @@
     import type { Optional } from "$lib/types/generic";
     import type { DownloadModeOption } from "$lib/types/settings";
 
-    import IconLink from "@tabler/icons-svelte/IconLink.svelte";
+    import IconLink from "virtual:icons/tabler/link";
-    import IconLoader2 from "@tabler/icons-svelte/IconLoader2.svelte";
+    import IconLoader2 from "virtual:icons/tabler/loader-2";
 
     import ClearButton from "$components/save/buttons/ClearButton.svelte";
     import DownloadButton from "$components/save/buttons/DownloadButton.svelte";

web/src/components/save/SupportedServices.svelte

@@ -3,7 +3,7 @@
     import { getServerInfo, cachedInfo } from "$lib/api/server-info";
 
     import Skeleton from "$components/misc/Skeleton.svelte";
-    import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+    import IconPlus from "virtual:icons/tabler/plus";
 
     let services: string[] = [];
 

web/src/components/save/buttons/ClearButton.svelte

@@ -1,6 +1,6 @@
 <script>
     import { t } from "$lib/i18n/translations";
-    import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconX from "virtual:icons/tabler/x";
 
     export let click;
 </script>

web/src/components/settings/CustomInstanceInput.svelte

@@ -5,8 +5,8 @@
     import settings, { updateSetting } from "$lib/state/settings";
     import { customInstanceWarning } from "$lib/api/safety-warning";
 
-    import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconX from "virtual:icons/tabler/x";
-    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
+    import IconCheck from "virtual:icons/tabler/check";
 
     let inputValue = get(settings).processing.customInstanceURL;
     let inputFocused = false;

web/src/components/settings/FilenamePreview.svelte

@@ -2,8 +2,8 @@
     import settings from "$lib/state/settings";
     import { t } from "$lib/i18n/translations";
 
-    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMovie from "virtual:icons/tabler/movie";
-    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconMusic from "virtual:icons/tabler/music";
 
     let videoFilePreview: string;
     let audioFilePreview: string;

web/src/components/settings/LanguageDropdown.svelte

@@ -5,7 +5,7 @@
     import { t, locales } from "$lib/i18n/translations";
     import settings, { updateSetting } from "$lib/state/settings";
 
-    import IconSelector from "@tabler/icons-svelte/IconSelector.svelte";
+    import IconSelector from "virtual:icons/tabler/selector";
 
     $: currentSetting = $settings.appearance.language;
     $: disabled = $settings.appearance.autoLanguage;

web/src/components/settings/ManageSettings.svelte

@@ -11,8 +11,8 @@
     import ActionButton from "$components/buttons/ActionButton.svelte";
     import ResetSettingsButton from "$components/settings/ResetSettingsButton.svelte";
 
-    import IconFileExport from "@tabler/icons-svelte/IconFileExport.svelte";
+    import IconFileExport from "virtual:icons/tabler/file-export";
-    import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
+    import IconFileImport from "virtual:icons/tabler/file-import";
     
     const updateSettings = (reader: FileReader) => {
         try {

web/src/components/settings/ResetSettingsButton.svelte

@@ -3,7 +3,7 @@
     import { createDialog } from "$lib/dialogs";
     import { resetSettings } from "$lib/state/settings";
 
-    import IconTrash from "@tabler/icons-svelte/IconTrash.svelte";
+    import IconTrash from "virtual:icons/tabler/trash";
 
     const resetDialog = () => {
         createDialog({

web/src/components/sidebar/Sidebar.svelte

@@ -5,14 +5,12 @@
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
-    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import IconDownload from "virtual:icons/tabler/download";
-    import IconSettings from "@tabler/icons-svelte/IconSettings.svelte";
+    import IconSettings from "virtual:icons/tabler/settings";
-
+    import IconRepeat from "virtual:icons/tabler/repeat";
-    import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte";
+    import IconComet from "virtual:icons/tabler/comet";
-
+    import IconHeart from "virtual:icons/tabler/heart";
-    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+    import IconInfoCircle from "virtual:icons/tabler/info-circle";
-    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
-    import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
     
     let screenWidth: number;
     let settingsLink = defaultNavPage("settings");

web/src/components/subnav/PageNav.svelte

@@ -6,7 +6,7 @@
 
     import { t } from "$lib/i18n/translations";
 
-    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+    import IconArrowLeft from "virtual:icons/tabler/arrow-left";
 
     export let pageName: "settings" | "about";
     export let homeNavPath: string;

web/src/components/subnav/PageNavTab.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
-    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
+    import IconChevronRight from "virtual:icons/tabler/chevron-right";
 
     export let tabPath: string;
     export let tabTitle: string;

web/src/routes/about/+layout.svelte

@@ -6,11 +6,11 @@
     import PageNavTab from "$components/subnav/PageNavTab.svelte";
     import PageNavSection from "$components/subnav/PageNavSection.svelte";
 
-    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
+    import IconLock from "virtual:icons/tabler/lock";
-    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+    import IconComet from "virtual:icons/tabler/comet";
-    import IconLicense from "@tabler/icons-svelte/IconLicense.svelte";
+    import IconLicense from "virtual:icons/tabler/license";
-    import IconChecklist from "@tabler/icons-svelte/IconChecklist.svelte";
+    import IconChecklist from "virtual:icons/tabler/checklist";
-    import IconUsersGroup from "@tabler/icons-svelte/IconUsersGroup.svelte";
+    import IconUsersGroup from "virtual:icons/tabler/users-group";
 </script>
 
 <PageNav

web/src/routes/donate/+page.svelte

@@ -9,7 +9,7 @@
     import DonateShareCard from "$components/donate/DonateShareCard.svelte";
     import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
 
-    import IconDiamond from "@tabler/icons-svelte/IconDiamond.svelte";
+    import IconDiamond from "virtual:icons/tabler/diamond";
 </script>
 
 <svelte:head>

web/src/routes/settings/+layout.svelte

@@ -9,16 +9,14 @@
     import PageNavTab from "$components/subnav/PageNavTab.svelte";
     import PageNavSection from "$components/subnav/PageNavSection.svelte";
 
-    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
+    import IconLock from "virtual:icons/tabler/lock";
-    import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
+    import IconSunHigh from "virtual:icons/tabler/sun-high";
-
+    import IconMovie from "virtual:icons/tabler/movie";
-    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMusic from "virtual:icons/tabler/music";
-    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconFileDownload from "virtual:icons/tabler/file-download";
-    import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
+    import IconBug from "virtual:icons/tabler/bug";
-
+    import IconWorld from "virtual:icons/tabler/world";
-    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
+    import IconSettingsBolt from "virtual:icons/tabler/settings-bolt";
-    import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
-    import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
 
     $: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0';
 </script>

web/src/routes/updates/+page.svelte

@@ -9,8 +9,8 @@
 
     import ChangelogEntry from "$components/changelog/ChangelogEntry.svelte";
 
-    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+    import IconArrowLeft from "virtual:icons/tabler/arrow-left";
-    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
+    import IconArrowRight from "virtual:icons/tabler/arrow-right";
 
     const changelogs = getAllChangelogs();
     const versions = Object.keys(changelogs);

web/tsconfig.json

@@ -10,7 +10,7 @@
         "sourceMap": true,
         "strict": true,
         "moduleResolution": "bundler",
-        "types": ["turnstile-types"]
+        "types": ["turnstile-types",  "unplugin-icons/types/svelte"]
     }
     // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
     // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files

web/vite.config.ts

@@ -3,6 +3,8 @@ import { sveltekit } from "@sveltejs/kit/vite";
 import basicSSL from "@vitejs/plugin-basic-ssl";
 import { glob } from "glob";
 import mime from "mime";
+import Icons from 'unplugin-icons/vite'
+
 
 import { cp, readdir, mkdir } from "node:fs/promises";
 import { createReadStream } from "node:fs";
@@ -65,6 +67,7 @@ export default defineConfig({
     plugins: [
         basicSSL(),
         sveltekit(),
+        Icons({ compiler: 'svelte' }),
         enableCOEP,
         exposeLibAV
     ],