vuepress-plugin-md-power 1.0.0-rc.147 → 1.0.0-rc.149

package/lib/client/components/VPCodeTree.vue

@@ -118,7 +118,7 @@ onMounted(() => {
   grid-column: span 2 / span 2;
 }
 
-.vp-code-tree .code-panel [class*="language-"] {
+.vp-code-tree .code-panel div[class*="language-"] {
   flex: 1 2;
   margin: 16px 0 0;
   overflow: auto;
@@ -128,7 +128,7 @@ onMounted(() => {
 
 @media (min-width: 768px) {
   .vp-code-tree .code-tree-panel .vp-file-tree,
-  .vp-code-tree .code-panel [class*="language-"] {
+  .vp-code-tree .code-panel div[class*="language-"] {
     overscroll-behavior: contain;
   }
 }

package/lib/client/shim.d.ts

@@ -12,3 +12,12 @@ declare module '@internal/md-power/replEditorData' {
   const res: ReplEditorData
   export default res
 }
+
+declare global {
+
+  const __MD_POWER_INJECT_OPTIONS__: MarkdownPowerPluginOptions
+  const __MD_POWER_DASHJS_INSTALLED__: boolean
+  const __MD_POWER_HLSJS_INSTALLED__: boolean
+  const __MD_POWER_MPEGTSJS_INSTALLED__: boolean
+
+}

package/lib/node/index.d.ts

@@ -98,8 +98,16 @@ interface FileTreeOptions {
 }
 
 //#endregion
-//#region src/shared/icons.d.ts
-interface IconsOptions {
+//#region src/shared/icon.d.ts
+type IconOptions = IconifyProvider | IconFontProvider | FontAwesomeProvider;
+interface IconProviderBase {
+  /**
+  * The provider of the icon
+  *
+  * 图标提供商
+  * @default 'iconify'
+  */
+  provider?: "iconify" | "iconfont" | "fontawesome";
   /**
   * The size of the icon
   * @default '1em'
@@ -111,6 +119,46 @@ interface IconsOptions {
   */
   color?: string;
 }
+interface IconFontProvider extends IconProviderBase {
+  provider?: "iconfont";
+  /**
+  * The prefix of the iconfont
+  * @default 'iconfont icon-'
+  */
+  prefix?: string;
+  /**
+  * The assets of the iconfont
+  */
+  assets?: IconAssetLink | IconAssetLink[];
+}
+interface FontAwesomeProvider extends IconProviderBase {
+  provider?: "fontawesome";
+  /**
+  * The prefix of the fontawesome icon
+  * @default 'fas'
+  */
+  prefix?: LiteralUnion<FontAwesomePrefix>;
+  /**
+  * The assets of the fontawesome
+  * @default 'fontawesome'
+  */
+  assets?: FontAwesomeAssetBuiltIn | IconAssetLink | (IconAssetLink | FontAwesomeAssetBuiltIn)[];
+}
+interface IconifyProvider extends IconProviderBase {
+  provider?: "iconify";
+  /**
+  * The prefix of the icon
+  * @default ''
+  */
+  prefix?: LiteralUnion<IconifyPrefix>;
+}
+type FontAwesomeAssetBuiltIn = "fontawesome" | "fontawesome-with-brands";
+type IconAssetLink = `//${string}` | `//${string}` | `https://${string}` | `http://${string}`;
+type FontAwesomePrefix = "fas" | "s" | "far" | "r" | "fal" | "l" | "fat" | "t" | "fads" | "ds" | "fass" | "ss" | "fasr" | "sr" | "fasl" | "sl" | "fast" | "st" | "fasds" | "sds" | "fab" | "b";
+type IconifyPrefix = "material-symbols" | "material-symbols-light" | "ic" | "mdi" | "mdi-light" | "line-md" | "solar" | "tabler" | "hugeicons" | "mingcute" | "ri" | "mynaui" | "iconamoon" | "iconoir" | "lucide" | "lucide-lab" | "uil" | "tdesign" | "si" | "bx" | "bxs" | "majesticons" | "gg" | "flowbite" | "basil" | "pixelarticons" | "pixel" | "akar-icons" | "ci" | "proicons" | "typcn" | "meteor-icons" | "prime" | "circum" | "fe" | "eos-icons" | "bitcoin-icons" | "humbleicons" | "uim" | "uit" | "uis" | "gridicons" | "mi" | "cuida" | "weui" | "duo-icons" | "svg-spinners" | "lets-icons" | "mage" | "stash" | "lineicons" | "icon-park-outline" | "icon-park-solid" | "icon-park-twotone" | "jam" | "guidance" | "carbon" | "ion" | "famicons" | "ant-design" | "lsicon" | "gravity-ui" | "cil" | "ep" | "charm" | "quill" | "bytesize" | "bi" | "rivet-icons" | "nimbus" | "formkit" | "fluent" | "ph" | "teenyicons" | "clarity" | "ix" | "octicon" | "memory" | "system-uicons" | "radix-icons" | "zondicons" | "uiw" | "maki" | "codex" | "ei" | "heroicons" | "pepicons-pop" | "pepicons-print" | "pepicons-pencil" | "f7" | "pajamas" | "garden" | "streamline" | "fa6-solid" | "fa6-regular" | "picon" | "ooui" | "oui" | "nrk" | "qlementine-icons" | "fluent-color" | "icon-park" | "marketeq" | "vscode-icons" | "codicon" | "material-icon-theme" | "file-icons" | "devicon" | "devicon-plain" | "catppuccin" | "skill-icons" | "unjs" | "simple-icons" | "logos" | "cib" | "fa6-brands" | "bxl" | "nonicons" | "arcticons" | "cbi" | "brandico" | "entypo-social" | "token" | "token-branded" | "cryptocurrency" | "cryptocurrency-color" | "openmoji" | "twemoji" | "noto" | "fluent-emoji" | "fluent-emoji-flat" | "fluent-emoji-high-contrast" | "noto-v1" | "emojione" | "emojione-monotone" | "emojione-v1" | "fxemoji" | "streamline-emojis" | "circle-flags" | "flag" | "flagpack" | "cif" | "gis" | "map" | "geo" | "game-icons" | "fad" | "academicons" | "wi" | "meteocons" | "healthicons" | "medical-icon" | "covid" | "la" | "eva" | "dashicons" | "flat-color-icons" | "entypo" | "foundation" | "raphael" | "icons8" | "iwwa" | "gala" | "heroicons-outline" | "heroicons-solid" | "fa-solid" | "fa-regular" | "fa-brands" | "fa" | "fluent-mdl2" | "fontisto" | "icomoon-free" | "subway" | "oi" | "wpf" | "simple-line-icons" | "et" | "el" | "vaadin" | "grommet-icons" | "whh" | "si-glyph" | "zmdi" | "ls" | "bpmn" | "flat-ui" | "vs" | "topcoat" | "il" | "websymbol" | "fontelico" | "ps" | "feather" | "mono-icons" | "pepicons";
+type LiteralUnion<Union extends Base, Base = string> = Union | (Base & {
+  zz_IGNORE_ME?: never;
+});
 
 //#endregion
 //#region src/shared/jsfiddle.d.ts
@@ -236,13 +284,23 @@ interface MarkdownPowerPluginOptions {
   */
   pdf?: boolean | PDFOptions;
   /**
+  * 是否启用 图标支持
+  * - iconify - `::collect:icon_name::` => `<VPIcon name="collect:icon_name" />`
+  * - iconfont - `::name::` => `<i class="iconfont icon-name"></i>`
+  * - fontawesome - `::fas:name::` => `<i class="fa-solid fa-name"></i>`
+  *
+  * @default false
+  */
+  icon?: IconOptions;
+  /**
   * 是否启用 iconify 图标嵌入语法
   *
   * `::collect:icon_name::`
   *
   * @default false
+  * @deprecated use `icon` instead 该配置已弃用，请使用 `icon` 代替
   */
-  icons?: boolean | IconsOptions;
+  icons?: boolean | IconOptions;
   /**
   * 是否启用 隐秘文本 语法
   *
@@ -478,4 +536,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
 //#endregion
-export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, IconsOptions, JSFiddleTokenMeta, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };
+export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -1,19 +1,19 @@
 import { createRequire } from "node:module";
 import { tab } from "@mdit/plugin-tab";
-import { addViteOptimizeDepsInclude, ensureEndingSlash, isArray, isLinkExternal, isLinkHttp, isPlainObject } from "@vuepress/helper";
+import { addViteOptimizeDepsInclude, ensureEndingSlash, isArray, isLinkAbsolute, isLinkExternal, isLinkHttp, isPlainObject } from "@vuepress/helper";
 import { Buffer } from "node:buffer";
 import http from "node:https";
 import { URL, URLSearchParams } from "node:url";
-import { camelCase, isBoolean, isEmptyObject, isNull, isNumber, isString, isUndefined, kebabCase, withTimeout } from "@pengzhanbo/utils";
+import { camelCase, isBoolean, isEmptyObject, isNull, isNumber, isPlainObject as isPlainObject$1, isString, isUndefined, kebabCase, notNullish, omit, toArray, uniqueBy, withTimeout } from "@pengzhanbo/utils";
 import imageSize from "image-size";
 import { colors, fs, getDirname, logger, path } from "vuepress/utils";
-import { isPackageExists, resolveModule } from "local-pkg";
 import path$1 from "node:path";
 import { globSync } from "tinyglobby";
-import { removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
+import { isLinkHttp as isLinkHttp$1, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
 import fs$1, { promises } from "node:fs";
 import process from "node:process";
 import container from "markdown-it-container";
+import { isPackageExists, resolveModule } from "local-pkg";
 import { LRUCache } from "lru-cache";
 import { watch } from "chokidar";
 import { customAlphabet } from "nanoid";
@@ -917,7 +917,7 @@ const codeTabs = (md, options = {}) => {
 			});
 			const titlesContent = titles.map((title, index$1) => {
 				const icon = getIcon(title);
-				return `<template #title${index$1}="{ value, isActive }">${icon ? `<VPIcon name="${icon}"/>` : ""}<span>${title}</span></template>`;
+				return `<template #title${index$1}="{ value, isActive }">${icon ? `<VPIcon provider="iconify" name="${icon}"/>` : ""}<span>${title}</span></template>`;
 			}).join("");
 			return `<CodeTabs id="${index}" :data='${stringifyProp(tabsData)}'${active === -1 ? "" : ` :active="${active}"`}${meta.id ? ` tab-id="${meta.id}"` : ""}>${titlesContent}`;
 		},
@@ -1379,7 +1379,7 @@ function codeTreePlugin(md, app, options = {}) {
 				filepath: node.filepath
 			};
 			return `<FileTreeNode${stringifyAttrs(props)}>
-  <template #icon><VPIcon name="${getIcon(node.filename, props.type, mode)}" /></template>
+  <template #icon><VPIcon provider="iconify" name="${getIcon(node.filename, props.type, mode)}" /></template>
   ${node.children?.length ? renderFileTree(node.children, mode) : ""}
 </FileTreeNode>`;
 		}).join("\n");
@@ -1473,6 +1473,18 @@ const alignList = [
 ];
 function alignPlugin(md) {
 	for (const name of alignList) createContainerPlugin(md, name, { before: () => `<div style="text-align:${name}">` });
+	createContainerPlugin(md, "flex", { before: (info) => {
+		const { attrs: attrs$1 } = resolveAttrs(info);
+		const styles = ["margin:16px 0;display:flex"];
+		const align = attrs$1.start ? "flex-start" : attrs$1.end ? "flex-end" : attrs$1.center ? "center" : "";
+		const justify = attrs$1.between ? "space-between" : attrs$1.around ? "space-around" : attrs$1.center ? "center" : "";
+		if (align) styles.push(`align-items:${align}`);
+		if (justify) styles.push(`justify-content:${justify}`);
+		if (attrs$1.column) styles.push("flex-direction:column");
+		if (attrs$1.wrap) styles.push("flex-wrap:wrap");
+		styles.push(`gap:${parseRect(attrs$1.gap || "16")}`);
+		return `<div style="${styles.join(";")}">`;
+	} });
 }
 
 //#endregion
@@ -1793,7 +1805,7 @@ function fileTreePlugin(md, options = {}) {
 		});
 		const nodeType = children.length > 0 ? "folder" : type;
 		const renderedComment = comment ? `<template #comment>${md.renderInline(comment.replaceAll("#", "#"))}</template>` : "";
-		const renderedIcon = !isOmit ? `<template #icon><VPIcon name="${getIcon(filename, nodeType, meta.icon)}" /></template>` : "";
+		const renderedIcon = !isOmit ? `<template #icon><VPIcon provider="iconify" name="${getIcon(filename, nodeType, meta.icon)}" /></template>` : "";
 		const props = {
 			expanded: nodeType === "folder" ? expanded : false,
 			focus,
@@ -2313,7 +2325,7 @@ function timelinePlugin(md) {
 		const attrs$1 = token.meta;
 		attrs$1.card ??= void 0;
 		const icon = attrs$1.icon;
-		return `<VPTimelineItem${stringifyAttrs(attrs$1, true)}>${icon ? `<template #icon><VPIcon name="${icon}"/></template>` : ""}`;
+		return `<VPTimelineItem${stringifyAttrs(attrs$1, true)}>${icon ? `<template #icon><VPIcon provider="iconify" name="${icon}"/></template>` : ""}`;
 	};
 	md.renderer.rules.timeline_item_close = () => "</VPTimelineItem>";
 	md.renderer.rules.timeline_item_title_open = () => "<template #title>";
@@ -3508,6 +3520,193 @@ function parseSource(source) {
 	}
 }
 
+//#endregion
+//#region src/node/icon/createIconRule.ts
+function createIconRule([l1, l2, r1, r2], deprecated) {
+	return (state, silent) => {
+		let found = false;
+		const max = state.posMax;
+		const start = state.pos;
+		if (state.src.charCodeAt(start) !== l1 || state.src.charCodeAt(start + 1) !== l2) return false;
+		const next = state.src.charCodeAt(start + 2);
+		if (next === 32 || next === 58) return false;
+		/* istanbul ignore if -- @preserve */
+		if (silent) return false;
+		if (max - start < 5) return false;
+		state.pos = start + 2;
+		while (state.pos < max) {
+			if (state.src.charCodeAt(state.pos) === r1 && state.src.charCodeAt(state.pos + 1) === r2) {
+				found = true;
+				break;
+			}
+			state.md.inline.skipToken(state);
+		}
+		if (!found || start + 2 === state.pos || state.src.charCodeAt(state.pos - 1) === 32) {
+			state.pos = start;
+			return false;
+		}
+		const info = state.src.slice(start + 2, state.pos);
+		state.posMax = state.pos;
+		state.pos = start + 2;
+		const icon = state.push("icon", "i", 0);
+		icon.markup = "::";
+		icon.content = info;
+		icon.meta = { deprecated };
+		state.pos = state.posMax + 2;
+		state.posMax = max;
+		return true;
+	};
+}
+
+//#endregion
+//#region src/node/icon/resolveIcon.ts
+const RE_SIZE = /(?<=\s|^)=(.+?)(?:\s|$)/;
+const RE_COLOR = /(?<=\s|^)\/(.+?)(?:\s|$)/;
+const RE_PROVIDER = /^(iconify|iconfont|fontawesome)\s+/;
+const RE_EXTRA_KEY = /(?:^|-)\d-/g;
+function resolveIcon(content, options) {
+	let size = options.size;
+	let color = options.color;
+	let provider = options.provider || "iconify";
+	content = content.replace(RE_PROVIDER, (_, p) => {
+		provider = p;
+		return "";
+	}).replace(RE_SIZE, (_, s) => {
+		size = s;
+		return "";
+	}).replace(RE_COLOR, (_, c) => {
+		color = c;
+		return "";
+	}).trim();
+	const index = content.indexOf(" ");
+	const name = index === -1 ? content : content.slice(0, index);
+	const extra = index === -1 ? "" : content.slice(index + 1);
+	const props = {
+		provider,
+		size,
+		color,
+		name
+	};
+	if (!extra) return props;
+	const { attrs: attrs$1 } = resolveAttrs(extra);
+	const info = [];
+	const excludes = [];
+	for (const key in attrs$1) if (attrs$1[key] === true) {
+		excludes.push(key);
+		info.push(kebabCase(key).replace(RE_EXTRA_KEY, (m) => `${m.slice(0, -1)}`));
+	}
+	return {
+		...props,
+		extra: info.join(" "),
+		...omit(attrs$1, excludes)
+	};
+}
+
+//#endregion
+//#region src/node/icon/icon.ts
+function iconRender(content, options) {
+	const icon = resolveIcon(content, options);
+	return `<VPIcon${stringifyAttrs(icon)} />`;
+}
+const iconPlugin = (md, options = {}) => {
+	/**
+	* ::collect:icon_name =size /color::
+	*/
+	md.inline.ruler.before(
+		"link",
+		"icon",
+		//               :     :      :      :
+		createIconRule([
+			58,
+			58,
+			58,
+			58
+		])
+);
+	/**
+	* :[collect:icon_name size/color]:
+	* @deprecated
+	*/
+	md.inline.ruler.before(
+		"link",
+		"icon_deprecated",
+		//               :     [      ]      :
+		createIconRule([
+			58,
+			91,
+			93,
+			58
+		], true)
+);
+	md.renderer.rules.icon = (tokens, idx, _, env) => {
+		const { content, meta } = tokens[idx];
+		let icon = content;
+		/* istanbul ignore if -- @preserve */
+		if (meta.deprecated) {
+			const [name, opt = ""] = content.split(" ");
+			const [size, color] = opt.trim().split("/");
+			icon = `${name}${size ? ` =${size}` : ""}${color ? ` /${color}` : ""}`;
+			console.warn(`The icon syntax of \`${colors.yellow(`:[${content}]:`)}\` is deprecated, please use \`${colors.green(`::${icon}::`)}\` instead. (${colors.gray(env.filePathRelative || env.filePath)})`);
+		}
+		return iconRender(icon, options);
+	};
+};
+
+//#endregion
+//#region src/node/icon/prepareIcon.ts
+function getFontAwesomeCDNLink(type) {
+	return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${type}.min.js`;
+}
+function prepareIcon(imports, options = {}) {
+	const setupContent = [];
+	const assets = [];
+	if (options.provider === "iconfont") assets.push(...toArray(options.assets).map((asset) => normalizeAsset(asset)).filter(notNullish));
+	else if (options.provider === "fontawesome") assets.push(...toArray(options.assets || "fontawesome").map((asset) => {
+		if (asset === "fontawesome") return [
+			"solid",
+			"regular",
+			"fontawesome"
+		].map(getFontAwesomeCDNLink).map((asset$1) => normalizeAsset(asset$1, "fontawesome"));
+		if (asset === "fontawesome-with-brands") return normalizeAsset(getFontAwesomeCDNLink("brands"), "fontawesome");
+		return null;
+	}).flat().filter(notNullish));
+	let hasStyle = false;
+	let hasScript = false;
+	for (const asset of uniqueBy(assets, (a, b) => a.link === b.link)) if (asset.type === "style") {
+		hasStyle = true;
+		setupContent.push(`useStyleTag('@import url("${asset.link}");')`);
+	} else if (asset.type === "script") {
+		hasScript = true;
+		setupContent.push(asset.provide === "fontawesome" ? `useScriptTag("${asset.link}", () => {}, { attrs: { "data-auto-replace-svg": "nest" } })` : `useScriptTag("${asset.link}")`);
+	}
+	if (hasScript || hasStyle) {
+		const exports = [];
+		if (hasScript) exports.push("useScriptTag");
+		if (hasStyle) exports.push("useStyleTag");
+		imports.add(`import { ${exports.join(", ")} } from '@vueuse/core'`);
+	}
+	return setupContent.join("\n    ");
+}
+function normalizeAsset(asset, provide) {
+	const link = normalizeLink(asset);
+	if (asset.endsWith(".js")) return {
+		type: "script",
+		link,
+		provide
+	};
+	if (asset.endsWith(".css")) return {
+		type: "style",
+		link,
+		provide
+	};
+	console.error(`[vuepress:icon] Can not recognize icon link: "${asset}"`);
+	return null;
+}
+function normalizeLink(link) {
+	if (isLinkHttp$1(link) || isLinkAbsolute(link)) return link;
+	return `//${link}`;
+}
+
 //#endregion
 //#region src/node/inline/abbr.ts
 const abbrPlugin = (md) => {
@@ -3665,107 +3864,6 @@ const annotationPlugin = (md) => {
 	md.block.ruler.before("reference", "annotation", annotationDef, { alt: ["paragraph", "reference"] });
 };
 
-//#endregion
-//#region src/node/inline/icons.ts
-function createIconRule([l1, l2, r1, r2], deprecated) {
-	return (state, silent) => {
-		let found = false;
-		const max = state.posMax;
-		const start = state.pos;
-		if (state.src.charCodeAt(start) !== l1 || state.src.charCodeAt(start + 1) !== l2) return false;
-		const next = state.src.charCodeAt(start + 2);
-		if (next === 32 || next === 58) return false;
-		/* istanbul ignore if -- @preserve */
-		if (silent) return false;
-		if (max - start < 5) return false;
-		state.pos = start + 2;
-		while (state.pos < max) {
-			if (state.src.charCodeAt(state.pos) === r1 && state.src.charCodeAt(state.pos + 1) === r2) {
-				found = true;
-				break;
-			}
-			state.md.inline.skipToken(state);
-		}
-		if (!found || start + 2 === state.pos || state.src.charCodeAt(state.pos - 1) === 32) {
-			state.pos = start;
-			return false;
-		}
-		const info = state.src.slice(start + 2, state.pos);
-		state.posMax = state.pos;
-		state.pos = start + 2;
-		const icon = state.push("icon", "i", 0);
-		icon.markup = "::";
-		icon.content = info;
-		icon.meta = { deprecated };
-		state.pos = state.posMax + 2;
-		state.posMax = max;
-		return true;
-	};
-}
-const RE_SIZE = /(?<=\s|^)=(.+?)(?:\s|$)/;
-const RE_COLOR = /(?<=\s|^)\/(.+?)(?:\s|$)/;
-function iconRender(content, options) {
-	let size = options.size;
-	let color = options.color;
-	content = content.replace(RE_SIZE, (_, s) => {
-		size = s;
-		return "";
-	}).replace(RE_COLOR, (_, c) => {
-		color = c;
-		return "";
-	}).trim();
-	const [name, ...extra] = content.split(/\s+/);
-	return `<VPIcon${stringifyAttrs({
-		name,
-		size,
-		color,
-		class: extra.length ? extra.join(" ") : void 0
-	})} />`;
-}
-const iconPlugin = (md, options = {}) => {
-	/**
-	* ::collect:icon_name =size /color::
-	*/
-	md.inline.ruler.before(
-		"link",
-		"icon",
-		//               :     :      :      :
-		createIconRule([
-			58,
-			58,
-			58,
-			58
-		])
-);
-	/**
-	* :[collect:icon_name size/color]:
-	* @deprecated
-	*/
-	md.inline.ruler.before(
-		"link",
-		"icon_deprecated",
-		//               :     [      ]      :
-		createIconRule([
-			58,
-			91,
-			93,
-			58
-		], true)
-);
-	md.renderer.rules.icon = (tokens, idx, _, env) => {
-		const { content, meta } = tokens[idx];
-		let icon = content;
-		/* istanbul ignore if -- @preserve */
-		if (meta.deprecated) {
-			const [name, opt = ""] = content.split(" ");
-			const [size, color] = opt.trim().split("/");
-			icon = `${name}${size ? ` =${size}` : ""}${color ? ` /${color}` : ""}`;
-			console.warn(`The icon syntax of \`${colors.yellow(`:[${content}]:`)}\` is deprecated, please use \`${colors.green(`::${icon}::`)}\` instead. (${colors.gray(env.filePathRelative || env.filePath)})`);
-		}
-		return iconRender(icon, options);
-	};
-};
-
 //#endregion
 //#region src/node/inline/plot.ts
 const plotDef = (state, silent) => {
@@ -3831,7 +3929,6 @@ function inlineSyntaxPlugin(md, options) {
 	* [HTML]: A HTML element description
 	*/
 	md.use(abbrPlugin);
-	if (options.icons) md.use(iconPlugin, isPlainObject(options.icons) ? options.icons : {});
 	if (options.plot === true || isPlainObject(options.plot) && options.plot.tag !== false) md.use(plotPlugin);
 }
 
@@ -3934,6 +4031,7 @@ async function prepareConfigFile(app, options) {
 		imports.add(`import VPField from '${CLIENT_FOLDER}components/VPField.vue'`);
 		enhances.add(`app.component('VPField', VPField)`);
 	}
+	const setupIcon = prepareIcon(imports, options.icon);
 	return app.writeTemp("md-power/config.js", `\
 import { defineClientConfig } from 'vuepress/client'
 ${Array.from(imports.values()).join("\n")}
@@ -3943,23 +4041,39 @@ import '${CLIENT_FOLDER}styles/index.css'
 export default defineClientConfig({
   enhance({ router, app }) {
 ${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
+  },
+  setup() {
+    ${setupIcon}
   }
 })
 `);
 }
 
+//#endregion
+//#region src/node/provideData.ts
+function provideData(options) {
+	const mardownOptions = {
+		plot: options.plot,
+		pdf: options.pdf
+	};
+	const icon = options.icon ?? { provider: "iconify" };
+	return {
+		__MD_POWER_INJECT_OPTIONS__: mardownOptions,
+		__MD_POWER_DASHJS_INSTALLED__: isPackageExists("dashjs"),
+		__MD_POWER_HLSJS_INSTALLED__: isPackageExists("hls.js"),
+		__MD_POWER_MPEGTSJS_INSTALLED__: isPackageExists("mpegts.js"),
+		__MD_POWER_ICON_PROVIDER__: icon.provider || "iconify",
+		__MD_POWER_ICON_PREFIX__: icon.prefix || ""
+	};
+}
+
 //#endregion
 //#region src/node/plugin.ts
 function markdownPowerPlugin(options = {}) {
 	return {
 		name: "vuepress-plugin-md-power",
 		clientConfigFile: (app) => prepareConfigFile(app, options),
-		define: {
-			__MD_POWER_INJECT_OPTIONS__: options,
-			__MD_POWER_DASHJS_INSTALLED__: isPackageExists("dashjs"),
-			__MD_POWER_HLSJS_INSTALLED__: isPackageExists("hls.js"),
-			__MD_POWER_MPEGTSJS_INSTALLED__: isPackageExists("mpegts.js")
-		},
+		define: provideData(options),
 		extendsBundlerOptions(bundlerOptions, app) {
 			if (options.repl) addViteOptimizeDepsInclude(bundlerOptions, app, [
 				"shiki/core",
@@ -3977,6 +4091,7 @@ function markdownPowerPlugin(options = {}) {
 			docsTitlePlugin(md);
 			embedSyntaxPlugin(md, options);
 			inlineSyntaxPlugin(md, options);
+			iconPlugin(md, options.icon ?? (isPlainObject$1(options.icons) ? options.icons : {}));
 			if (options.demo) demoPlugin(app, md);
 			await containerPlugin(app, md, options);
 			await imageSizePlugin(app, md, options.imageSize);

package/lib/shared/index.d.ts

@@ -96,8 +96,16 @@ interface FileTreeOptions {
 }
 
 //#endregion
-//#region src/shared/icons.d.ts
-interface IconsOptions {
+//#region src/shared/icon.d.ts
+type IconOptions = IconifyProvider | IconFontProvider | FontAwesomeProvider;
+interface IconProviderBase {
+  /**
+  * The provider of the icon
+  *
+  * 图标提供商
+  * @default 'iconify'
+  */
+  provider?: "iconify" | "iconfont" | "fontawesome";
   /**
   * The size of the icon
   * @default '1em'
@@ -109,6 +117,46 @@ interface IconsOptions {
   */
   color?: string;
 }
+interface IconFontProvider extends IconProviderBase {
+  provider?: "iconfont";
+  /**
+  * The prefix of the iconfont
+  * @default 'iconfont icon-'
+  */
+  prefix?: string;
+  /**
+  * The assets of the iconfont
+  */
+  assets?: IconAssetLink | IconAssetLink[];
+}
+interface FontAwesomeProvider extends IconProviderBase {
+  provider?: "fontawesome";
+  /**
+  * The prefix of the fontawesome icon
+  * @default 'fas'
+  */
+  prefix?: LiteralUnion<FontAwesomePrefix>;
+  /**
+  * The assets of the fontawesome
+  * @default 'fontawesome'
+  */
+  assets?: FontAwesomeAssetBuiltIn | IconAssetLink | (IconAssetLink | FontAwesomeAssetBuiltIn)[];
+}
+interface IconifyProvider extends IconProviderBase {
+  provider?: "iconify";
+  /**
+  * The prefix of the icon
+  * @default ''
+  */
+  prefix?: LiteralUnion<IconifyPrefix>;
+}
+type FontAwesomeAssetBuiltIn = "fontawesome" | "fontawesome-with-brands";
+type IconAssetLink = `//${string}` | `//${string}` | `https://${string}` | `http://${string}`;
+type FontAwesomePrefix = "fas" | "s" | "far" | "r" | "fal" | "l" | "fat" | "t" | "fads" | "ds" | "fass" | "ss" | "fasr" | "sr" | "fasl" | "sl" | "fast" | "st" | "fasds" | "sds" | "fab" | "b";
+type IconifyPrefix = "material-symbols" | "material-symbols-light" | "ic" | "mdi" | "mdi-light" | "line-md" | "solar" | "tabler" | "hugeicons" | "mingcute" | "ri" | "mynaui" | "iconamoon" | "iconoir" | "lucide" | "lucide-lab" | "uil" | "tdesign" | "si" | "bx" | "bxs" | "majesticons" | "gg" | "flowbite" | "basil" | "pixelarticons" | "pixel" | "akar-icons" | "ci" | "proicons" | "typcn" | "meteor-icons" | "prime" | "circum" | "fe" | "eos-icons" | "bitcoin-icons" | "humbleicons" | "uim" | "uit" | "uis" | "gridicons" | "mi" | "cuida" | "weui" | "duo-icons" | "svg-spinners" | "lets-icons" | "mage" | "stash" | "lineicons" | "icon-park-outline" | "icon-park-solid" | "icon-park-twotone" | "jam" | "guidance" | "carbon" | "ion" | "famicons" | "ant-design" | "lsicon" | "gravity-ui" | "cil" | "ep" | "charm" | "quill" | "bytesize" | "bi" | "rivet-icons" | "nimbus" | "formkit" | "fluent" | "ph" | "teenyicons" | "clarity" | "ix" | "octicon" | "memory" | "system-uicons" | "radix-icons" | "zondicons" | "uiw" | "maki" | "codex" | "ei" | "heroicons" | "pepicons-pop" | "pepicons-print" | "pepicons-pencil" | "f7" | "pajamas" | "garden" | "streamline" | "fa6-solid" | "fa6-regular" | "picon" | "ooui" | "oui" | "nrk" | "qlementine-icons" | "fluent-color" | "icon-park" | "marketeq" | "vscode-icons" | "codicon" | "material-icon-theme" | "file-icons" | "devicon" | "devicon-plain" | "catppuccin" | "skill-icons" | "unjs" | "simple-icons" | "logos" | "cib" | "fa6-brands" | "bxl" | "nonicons" | "arcticons" | "cbi" | "brandico" | "entypo-social" | "token" | "token-branded" | "cryptocurrency" | "cryptocurrency-color" | "openmoji" | "twemoji" | "noto" | "fluent-emoji" | "fluent-emoji-flat" | "fluent-emoji-high-contrast" | "noto-v1" | "emojione" | "emojione-monotone" | "emojione-v1" | "fxemoji" | "streamline-emojis" | "circle-flags" | "flag" | "flagpack" | "cif" | "gis" | "map" | "geo" | "game-icons" | "fad" | "academicons" | "wi" | "meteocons" | "healthicons" | "medical-icon" | "covid" | "la" | "eva" | "dashicons" | "flat-color-icons" | "entypo" | "foundation" | "raphael" | "icons8" | "iwwa" | "gala" | "heroicons-outline" | "heroicons-solid" | "fa-solid" | "fa-regular" | "fa-brands" | "fa" | "fluent-mdl2" | "fontisto" | "icomoon-free" | "subway" | "oi" | "wpf" | "simple-line-icons" | "et" | "el" | "vaadin" | "grommet-icons" | "whh" | "si-glyph" | "zmdi" | "ls" | "bpmn" | "flat-ui" | "vs" | "topcoat" | "il" | "websymbol" | "fontelico" | "ps" | "feather" | "mono-icons" | "pepicons";
+type LiteralUnion<Union extends Base, Base = string> = Union | (Base & {
+  zz_IGNORE_ME?: never;
+});
 
 //#endregion
 //#region src/shared/jsfiddle.d.ts
@@ -234,13 +282,23 @@ interface MarkdownPowerPluginOptions {
   */
   pdf?: boolean | PDFOptions;
   /**
+  * 是否启用 图标支持
+  * - iconify - `::collect:icon_name::` => `<VPIcon name="collect:icon_name" />`
+  * - iconfont - `::name::` => `<i class="iconfont icon-name"></i>`
+  * - fontawesome - `::fas:name::` => `<i class="fa-solid fa-name"></i>`
+  *
+  * @default false
+  */
+  icon?: IconOptions;
+  /**
   * 是否启用 iconify 图标嵌入语法
   *
   * `::collect:icon_name::`
   *
   * @default false
+  * @deprecated use `icon` instead 该配置已弃用，请使用 `icon` 代替
   */
-  icons?: boolean | IconsOptions;
+  icons?: boolean | IconOptions;
   /**
   * 是否启用 隐秘文本 语法
   *
@@ -460,4 +518,4 @@ interface ArtPlayerTokenMeta extends SizeOptions {
 }
 
 //#endregion
-export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, IconsOptions, JSFiddleTokenMeta, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };
+export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.147",
+  "version": "1.0.0-rc.149",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -32,16 +32,16 @@
   ],
   "peerDependencies": {
     "artplayer": "^5.2.3",
-    "dashjs": "^5.0.1",
+    "dashjs": "^5.0.2",
     "esbuild": "^0.25.4",
     "hls.js": "^1.6.2",
     "less": "^4.3.0",
     "markdown-it": "^14.1.0",
     "mpegts.js": "^1.7.3",
-    "sass": "^1.88.0",
-    "sass-embedded": "^1.88.0",
+    "sass": "^1.89.0",
+    "sass-embedded": "^1.89.0",
     "stylus": "^0.64.0",
-    "vuepress": "2.0.0-rc.22"
+    "vuepress": "2.0.0-rc.23"
   },
   "peerDependenciesMeta": {
     "artplayer": {
@@ -69,24 +69,24 @@
     "@mdit/plugin-tab": "^0.18.0",
     "@mdit/plugin-tasklist": "^0.18.0",
     "@pengzhanbo/utils": "^2.1.0",
-    "@vuepress/helper": "2.0.0-rc.99",
-    "@vueuse/core": "^13.1.0",
+    "@vuepress/helper": "2.0.0-rc.105",
+    "@vueuse/core": "^13.2.0",
     "chokidar": "3.6.0",
     "image-size": "^2.0.2",
     "local-pkg": "^1.1.1",
     "lru-cache": "^11.1.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.5",
-    "shiki": "^3.4.0",
+    "shiki": "^3.4.2",
     "tinyglobby": "0.2.13",
-    "tm-grammars": "^1.23.18",
+    "tm-grammars": "^1.23.21",
     "tm-themes": "^1.10.6",
-    "vue": "^3.5.13"
+    "vue": "^3.5.14"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "artplayer": "^5.2.3",
-    "dashjs": "^5.0.1",
+    "dashjs": "^5.0.2",
     "hls.js": "^1.6.2",
     "mpegts.js": "1.7.3"
   },