feat(frontend): tabler-iconsのサブセット化 (#15340)

* feat(frontend): tabler-iconsの使用されていないアイコンを削除するように

* fix

* fix

* fix

* fix

* fix

* Update Changelog

* enhance: tablerのCSSを使用されているクラスのみに限定

* 使用するアイコンパッケージをそろえる

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

* spdx

* typo

* fix: サブセットから除外される書き方をしている部分を修正

* fix: 同じunicodeに複数のアイコンclassが割り当てられている場合に対応

* remove debug code

* Update CHANGELOG.md

* fix merge error

* setup renovate

* fix: woff2ではなくwoffに変換していたのを修正

* update deps

* update changelog

packages/frontend/package.json

@@ -26,7 +26,6 @@
 		"@rollup/pluginutils": "5.1.4",
 		"@sentry/vue": "9.22.0",
 		"@syuilo/aiscript": "0.19.0",
-		"@tabler/icons-webfont": "3.33.0",
 		"@twemoji/parser": "15.1.1",
 		"@vitejs/plugin-vue": "5.2.4",
 		"@vue/compiler-sfc": "3.5.14",
@@ -48,6 +47,7 @@
 		"estree-walker": "3.0.3",
 		"eventemitter3": "5.0.1",
 		"frontend-shared": "workspace:*",
+		"icons-subsetter": "workspace:*",
 		"idb-keyval": "6.2.2",
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
@@ -99,6 +99,7 @@
 		"@storybook/types": "8.6.14",
 		"@storybook/vue3": "8.6.14",
 		"@storybook/vue3-vite": "8.6.14",
+		"@tabler/icons-webfont": "3.33.0",
 		"@testing-library/vue": "8.1.0",
 		"@types/canvas-confetti": "1.9.0",
 		"@types/estree": "1.0.7",

packages/frontend/src/_boot_.ts

@@ -6,7 +6,11 @@
 // https://vitejs.dev/config/build-options.html#build-modulepreload
 import 'vite/modulepreload-polyfill';
 
-import '@tabler/icons-webfont/dist/tabler-icons.scss';
+if (import.meta.env.DEV) {
+	await import('@tabler/icons-webfont/dist/tabler-icons.scss');
+} else {
+	await import('icons-subsetter/built/tabler-icons-frontend.css');
+}
 
 import '@/style.scss';
 import { mainBoot } from '@/boot/main-boot.js';

packages/frontend/src/components/MkDrive.folder.vue

@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ i18n.ts.uploadFolder }}
 	</div>
 	<button v-if="selectMode" class="_button" :class="$style.checkboxWrapper" @click.prevent.stop="checkboxClicked">
-		<div :class="[$style.checkbox, { [$style.checked]: isSelected }]"></div>
+		<div :class="[$style.checkbox, { [$style.checked]: isSelected, 'ti ti-check': isSelected }]"></div>
 	</button>
 </div>
 </template>
@@ -368,16 +368,14 @@ function onContextmenu(ev: MouseEvent) {
 			border-color: var(--MI_THEME-accent);
 			background: var(--MI_THEME-accent);
 
-			&::after {
-				content: "\ea5e";
-				font-family: 'tabler-icons';
+			&::before {
 				position: absolute;
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
 				color: #fff;
 				font-size: 12px;
-				line-height: 22px;
+				line-height: 18px;
 			}
 		}
 	}