feat: implement icon directive with relative path fallback

Refactor icon rendering to use a custom `marked-directive` instead of
a global icon prefix. This allows icons to use a CSS-based fallback
chain (searching up to 10 directory levels for an `assets/` folder),
making icon paths more robust and removing the need to pass path
prefixes through the component tree.

src/markdown/icon.ts

@@ -0,0 +1,62 @@
+/**
+ * marked-directive 扩展：支持 :[icon] 和 :[icon.ext] 行内图标语法
+ *
+ * 生成的 CSS 包含从当前目录向上查找的 fallback 链：
+ *   url('./assets/icon.png'),
+ *   url('../assets/icon.png'),
+ *   url('../../assets/icon.png'),
+ *   ...
+ *
+ * 支持的扩展名：.svg, .png, .gif, .jpg, .jpeg, .webp（默认 .png）
+ */
+
+const SUPPORTED_EXTENSIONS = ["svg", "png", "gif", "jpg", "jpeg", "webp"];
+
+/** 生成多层 fallback 路径，向上查找最多 10 级 */
+function buildIconSrc(iconName: string, extension: string): string {
+  const levels = 10;
+  const urls: string[] = [];
+  for (let i = 0; i < levels; i++) {
+    const prefix = i === 0 ? "./" : "../".repeat(i);
+    urls.push(`url('${prefix}assets/${iconName}.${extension}')`);
+  }
+  return urls.join(", ");
+}
+
+export const iconDirective = {
+  level: "inline" as const,
+  marker: ":",
+  renderer(token: any) {
+    // meta.name 非空表示这是一个命名指令（如 :div），不是图标
+    if (token.meta.name) return false;
+
+    const iconText = token.text || "";
+
+    let iconName = iconText;
+    let extension = "png";
+
+    const lastDotIndex = iconName.lastIndexOf(".");
+    if (lastDotIndex > 0) {
+      const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
+      if (SUPPORTED_EXTENSIONS.includes(potentialExt)) {
+        extension = potentialExt;
+        iconName = iconName.slice(0, lastDotIndex);
+      }
+    }
+
+    const label = token.attrs?.label as string | undefined;
+    const inner = label
+      ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>`
+      : "";
+
+    const style = `style="--icon-src: ${buildIconSrc(iconName, extension)}"`;
+    const iconHtml = `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}">${inner}</icon>`;
+
+    const repeat = parseInt(`${token.attrs?.repeat || ""}`);
+    const join = token.attrs?.join || "";
+    const separator = join ? `<${join}></${join}>` : "";
+    if (isNaN(repeat) || repeat < 1) return iconHtml;
+
+    return Array(repeat).fill(iconHtml).join(separator);
+  },
+};

src/markdown/index.ts

@@ -6,14 +6,7 @@ import markedTable from "./table";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 import markedColumns from "./columns";
 import markedCodeBlockYamlTag from "./code-block-yaml-tag";
-
-let globalIconPrefix: string | undefined = undefined;
-function overrideIconPrefix(path?: string) {
-  globalIconPrefix = path;
-  return () => {
-    globalIconPrefix = undefined;
-  };
-}
+import { iconDirective } from "./icon";
 
 // 使用 marked-directive 来支持指令语法
 const marked = new Marked()
@@ -33,73 +26,15 @@ const marked = new Marked()
         marker: ":::::",
         level: "container",
       },
-      {
-        level: "inline",
-        marker: ":",
-        // :[icon] 或 :[icon.ext] 语法
-        // 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
-        // 如果不指定扩展名，默认为 .png
-        renderer(token) {
-          if (!token.meta.name) {
-            const iconText = token.text || "";
-
-            // 已知支持的图片扩展名
-            const supportedExtensions = [
-              "svg",
-              "png",
-              "gif",
-              "jpg",
-              "jpeg",
-              "webp",
-            ];
-
-            // 检查是否包含扩展名（查找最后一个点）
-            let iconName = iconText;
-            let extension = "png"; // 默认扩展名
-
-            const lastDotIndex = iconName.lastIndexOf(".");
-            if (lastDotIndex > 0) {
-              const potentialExt = iconName
-                .slice(lastDotIndex + 1)
-                .toLowerCase();
-              if (supportedExtensions.includes(potentialExt)) {
-                extension = potentialExt;
-                iconName = iconName.slice(0, lastDotIndex);
-              }
-            }
-
-            const label = token.attrs?.label as string | undefined;
-            const inner = label
-              ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>`
-              : "";
-            const style = globalIconPrefix
-              ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"`
-              : "";
-            const iconHtml = `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}">${inner}</icon>`;
-
-            const repeat = parseInt(`${token.attrs?.repeat || ""}`);
-            const join = token.attrs?.join || "";
-            const separator = join ? `<${join}></${join}>` : "";
-            if (isNaN(repeat) || repeat < 1) return iconHtml;
-
-            return Array(repeat).fill(iconHtml).join(separator);
-          }
-          return false;
-        },
-      },
+      iconDirective,
     ]),
     {
       extensions: [...markedColumns()],
     },
   );
 
-export function parseMarkdown(content: string, iconPrefix?: string): string {
-  const restore = overrideIconPrefix(iconPrefix);
-  try {
-    return marked.parse(content.trimStart()) as string;
-  } finally {
-    restore();
-  }
+export function parseMarkdown(content: string): string {
+  return marked.parse(content.trimStart()) as string;
 }
 
 export { marked };