chore: アイコンの auto-import を追加

Author: wappon28dev

astro.config.mjs

@@ -13,6 +13,9 @@ import rehypeExternalLinks from "rehype-external-links";
 import wikiLinkPlugin from "remark-wiki-link-plus";
 import starlightScrollToTop from "starlight-scroll-to-top";
 import starlightSidebarTopics from "starlight-sidebar-topics";
+import AutoImportAstro from "unplugin-auto-import/astro";
+import AutoImport from "unplugin-auto-import/vite";
+import IconsResolver from "unplugin-icons/resolver";
 import Icons from "unplugin-icons/vite";
 
 // https://astro.build/config
@@ -109,6 +112,14 @@ export default defineConfig({
       ],
     }),
     react(),
+    AutoImportAstro({
+      resolvers: [
+        IconsResolver({
+          prefix: "Icon",
+          extension: "jsx",
+        }),
+      ],
+    }),
   ],
   site: "https://learn.sysken.net",
   image: {
@@ -132,9 +143,19 @@ export default defineConfig({
   },
   vite: {
     plugins: [
+    // NOTE: インポートなしにアイコンを使用できるようにするための設定
+    // ref: https://github.com/unplugin/unplugin-icons/blob/3831eb07d96e94d503df62f45512f3ca3e50cc26/README.md#auto-importing
+      AutoImport({
+        resolvers: [
+          IconsResolver({
+            prefix: "Icon",
+            extension: "jsx",
+          }),
+        ],
+      }),
       Icons({
-        compiler: "jsx",
         autoInstall: true,
+        compiler: "jsx",
         jsx: "react",
       }),
     ],

auto-imports.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const IconMaterialSymbolsBook4Spark: typeof import('~icons/material-symbols/book4-spark.jsx')['default']
+  const IconMaterialSymbolsChecklist: typeof import('~icons/material-symbols/checklist.jsx')['default']
+  const IconMdiBookCheck: typeof import('~icons/mdi/book-check.jsx')['default']
+  const IconMdiBookCheckBookCheck: typeof import('~icons/mdi/book-check-book-check.jsx')['default']
+}

bun.lockb

@@ -52,7 +52,7 @@
     "@css-modules-kit/codegen": "^0.4.1",
     "@css-modules-kit/eslint-plugin": "^0.2.1",
     "@eslint-react/eslint-plugin": "^1.52.2",
-    "@iconify/json": "^2.2.354",
+    "@iconify/json": "^2.2.375",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "cspell": "^9.1.2",
@@ -68,6 +68,7 @@
     "sharp": "^0.34.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.1",
-    "unplugin-icons": "^22.1.0"
+    "unplugin-auto-import": "^20.0.0",
+    "unplugin-icons": "^22.2.0"
   }
 }

package.json

@@ -1,7 +1,3 @@
----
-import Checklist from "~icons/material-symbols/checklist";
----
-
 <script>
 document.addEventListener("DOMContentLoaded", () => {
   const checkpointElems = document.querySelectorAll<HTMLElement>(".comp-checkpoint");
@@ -40,7 +36,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 <div class="container comp-checkpoint">
   <div class="title">
-    <Checklist height="100%" width="100%" />
+    <IconMaterialSymbolsChecklist height="100%" width="100%" />
     <p>チェックポイント！</p>
   </div>
   <slot />

src/components/Checkpoint.astro

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 import { useEffect, useRef, useState } from "react";
-import BookCheck from "~icons/mdi/book-check";
 import { appendReadTextbookId, removeReadTextbookId } from "@/lib/stores/read-textbook-ids";
 import { waitMs } from "@/lib/utils";
 import styles from "./ReadTextbookBadge.module.css";
@@ -33,7 +32,7 @@ export function ReadTextbookBadge({ textbookId }: { textbookId: string }): React
   return (
     <div className={styles.badgeContainer} ref={badgeContainerRef}>
       <div className={styles.badge}>
-        <BookCheck />
+        <IconMdiBookCheck />
         <span>最後まで読み終えました！  えらい！</span>
       </div>
       <button

src/components/ReadTextbookBadge.tsx

@@ -1,7 +1,6 @@
 ---
 import type { ComponentProps } from "astro/types";
 import Default from "@astrojs/starlight/components/PageTitle.astro";
-import Book4Spark from "~icons/material-symbols/book-4-spark";
 
 const { data: { description } } = Astro.locals.starlightRoute.entry;
 
@@ -11,7 +10,7 @@ type Props = ComponentProps<typeof Default>;
 <Default {...Astro.props} />
 {description && (
   <div class="container">
-    <Book4Spark height="100%" width="100%" />
+    <IconMaterialSymbolsBook4Spark height="100%" width="100%" />
     <p>{description}</p>
   </div>
 )}