fix(#927): tabler-icons-filledのフォントを参照できない問題を修正 (#929)

Author: u1-liquid

packages/backend/src/server/web/views/base.pug

@@ -37,6 +37,7 @@ html
 		link(rel='prefetch' href=notFoundImageUrl)
 		//- https://github.com/misskey-dev/misskey/issues/9842
 		link(rel='stylesheet' href=`/assets/tabler-icons.${version}/dist/tabler-icons-outline.min.css`)
+		link(rel='stylesheet' href=`/assets/tabler-icons.${version}/dist/tabler-icons-filled.min.css`)
 		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
 
 		if !config.clientManifestExists

packages/frontend/.storybook/preview-head.html

@@ -5,7 +5,7 @@
 
 <link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
 <link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
-<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons-outline.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
 <link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
 <style>
 	html {

packages/frontend/src/style.scss

@@ -6,10 +6,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-@use '@tabler/icons-webfont/dist/tabler-icons-filled' with (
-	$ti-prefix: 'ti-filled'
-);
-
 :root {
 	--radius: 12px;
 	--marginFull: 16px;

scripts/build-assets.mjs

@@ -21,6 +21,16 @@ async function copyFrontendFonts() {
 
 async function copyFrontendTablerIcons() {
   await fs.cp('./packages/frontend/node_modules/@tabler/icons-webfont', `./built/_frontend_dist_/tabler-icons.${meta.version}`, { dereference: true, recursive: true });
+  for (const file of [
+    `./built/_frontend_dist_/tabler-icons.${meta.version}/dist/tabler-icons-filled.scss`,
+    `./built/_frontend_dist_/tabler-icons.${meta.version}/dist/tabler-icons-filled.css`,
+    `./built/_frontend_dist_/tabler-icons.${meta.version}/dist/tabler-icons-filled.min.css`,
+  ]) {
+    let source = await fs.readFile(file, { encoding: 'utf-8' });
+    source = source.replaceAll('$ti-prefix: \'ti\'', '$ti-prefix: \'ti-filled\'');
+    source = source.replaceAll('.ti', '.ti-filled');
+    await fs.writeFile(file, source);
+  }
 }
 
 async function copyFrontendLocales() {
@@ -91,13 +101,13 @@ async function build() {
 await build();
 
 if (process.argv.includes("--watch")) {
-	const watcher = fs.watch('./locales');
-	for await (const event of watcher) {
-		const filename = event.filename?.replaceAll('\\', '/');
-		if (/^[a-z]+-[A-Z]+\.yml/.test(filename)) {
-			console.log(`update ${filename} ...`)
-			locales = buildLocales();
-			await copyFrontendLocales()
-		}
-	}
+  const watcher = fs.watch('./locales');
+  for await (const event of watcher) {
+    const filename = event.filename?.replaceAll('\\', '/');
+    if (/^[a-z]+-[A-Z]+\.yml/.test(filename)) {
+      console.log(`update ${filename} ...`)
+      locales = buildLocales();
+      await copyFrontendLocales()
+    }
+  }
 }