Commit `b3c8d9d`

HPCesia <me@hpcesia.com>

2025-03-03 09:30:08

fix: icon render bug

After update dependencies, iconify will show warning `Invalid icon name: "${icon}"` when building. This commit switch to embed raw svg instead of using iconify tailwindcss plugin to fix the bug.

master

1 parent 09bd2db

Changed files (3)

src

plugins

remark-github-blockquote.ts

styles

global.css

package.json

@@ -1,4 +1,9 @@
 import type { RemarkPlugin } from '@astrojs/markdown-remark';
+import { icons as IC } from '@iconify-json/ic';
+import { icons as MaterialSymbols } from '@iconify-json/material-symbols';
+import { icons as MDI } from '@iconify-json/mdi';
+import type { ExtendedIconifyIcon } from '@iconify/types';
+import { getIconData, iconToHTML, iconToSVG } from '@iconify/utils';
 import type { BlockContent, Data, DefinitionContent } from 'mdast';
 import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
@@ -33,35 +38,41 @@ const defaultConfig: Config = {
   ],
   titleTextMap: (title) => {
     const [type, text] = title.substring(2, title.length - 1).split(':');
-    let icon: string;
+    let iconData: ExtendedIconifyIcon | null;
     switch (type) {
       case 'NOTE':
-        icon = 'material-symbols--info-outline-rounded';
+        iconData = getIconData(MaterialSymbols, 'info-outline-rounded');
         break;
       case 'TIP':
-        icon = 'ic--outline-tips-and-updates';
+        iconData = getIconData(IC, 'outline-tips-and-updates');
         break;
       case 'IMPORTANT':
-        icon = 'material-symbols--chat-info-outline-rounded';
+        iconData = getIconData(MaterialSymbols, 'chat-info-outline-rounded');
         break;
       case 'CAUTION':
-        icon = 'mdi--alert-octagon-outline';
+        iconData = getIconData(MDI, 'alert-octagon-outline');
         break;
       case 'WARNING':
-        icon = 'material-symbols--warning-rounded';
+        iconData = getIconData(MaterialSymbols, 'warning-rounded');
         break;
       default:
-        icon = 'material-symbols--info-outline-rounded';
+        iconData = getIconData(MaterialSymbols, 'info-outline-rounded');
         break;
     }
+    if (!iconData) {
+      console.error(`GitHub blockquote icon not found: ${type}`);
+      return {
+        displayTitle: [text || type],
+        checkedTitle: type,
+      };
+    }
+    const { attributes, body } = iconToSVG(iconData);
+    const icon = {
+      type: 'html',
+      value: iconToHTML(body, attributes),
+    } as Node;
     return {
-      displayTitle: [
-        {
-          type: 'element',
-          data: { hName: 'span', hProperties: { className: `icon-[${icon}]` } },
-        } as Node,
-        text || type,
-      ],
+      displayTitle: [icon, text || type],
       checkedTitle: type,
     };
   },

@@ -6,8 +6,6 @@
     dark --prefersdark;
 }
 
-@plugin "@iconify/tailwind4";
-
 @plugin 'daisyui/theme' {
   name: 'light';

@@ -20,6 +20,7 @@
     "@iconify-json/ic": "^1.2.2",
     "@iconify-json/material-symbols": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
+    "@iconify/utils": "^2.3.0",
     "@shikijs/transformers": "^3.1.0",
     "@swup/head-plugin": "^2.3.1",
     "@swup/parallel-plugin": "^0.4.0",
@@ -61,7 +62,7 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/ts-plugin": "^1.10.4",
     "@eslint/js": "^9.21.0",
-    "@iconify/tailwind4": "^1.0.6",
+    "@iconify/types": "^2.0.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/hast": "^3.0.4",
     "@types/markdown-it": "^14.1.2",

Commit b3c8d9d

Commit `b3c8d9d`