instui-markdown 0.0.8 → 0.1.0

package/README.md

@@ -120,16 +120,49 @@ Wraps color literals in a visual swatch. Supports `#hex`, `rgb()`, `rgba()`, `hs
 
 ### `icons`
 
-Renders InstUI icons from `:iconName:` tokens. Supports Line, Solid, and Lucide icon variants. You can omit the `Icon` prefix and the `Line`/`Solid` suffix — `:Heart:`, `:HeartLine:`, and `:IconHeartLine:` all resolve to the same icon.
+Renders icon tokens from `:iconName:` syntax. InstUI lookup runs first, then optional SimpleIcons lookup can run as a fallback through an app-provided resolver. You can omit the `Icon` prefix and the `Line`/`Solid` suffix for InstUI names, so `:Heart:`, `:HeartLine:`, and `:IconHeartLine:` all resolve to the same InstUI icon.
 
 Add an optional hex color with a pipe: `:Heart|#F00:`.
 
 Skips icon tokens inside code fences.
 
-| Option    | Type      | Default     | Description                                  |
-| --------- | --------- | ----------- | -------------------------------------------- |
-| `enabled` | `boolean` | `false`     | Renders `:icon:` tokens as InstUI icons      |
-| `color`   | `string`  | `undefined` | Default icon color (hex) for all icon tokens |
+| Option                  | Type                                    | Default     | Description                                                        |
+| ----------------------- | --------------------------------------- | ----------- | ------------------------------------------------------------------ |
+| `enabled`               | `boolean`                               | `false`     | Enables token-based icon rendering                                 |
+| `color`                 | `string`                                | `undefined` | Default color for all icon providers                               |
+| `providers.instui`      | `boolean`                               | `true`      | Enables InstUI lookup (`@instructure/ui-icons`)                    |
+| `providers.simpleIcons` | `boolean`                               | `true`      | Enables SimpleIcons fallback lookup                                |
+| `simpleIcons.color`     | `string`                                | `undefined` | Default color for SimpleIcons output (falls back to `icons.color`) |
+| `simpleIcons.resolve`   | `(code: string) => SimpleIconTokenData` | `undefined` | App-provided resolver for SimpleIcons SVG path data                |
+
+Example with SimpleIcons fallback:
+
+```tsx
+<InstuiMarkdown
+  renderOptions={{
+    icons: {
+      enabled: true,
+      providers: { instui: true, simpleIcons: true },
+      simpleIcons: {
+        resolve: (code) => {
+          if (code.toLowerCase() === "github") {
+            return {
+              title: "GitHub",
+              path: "M12 0C5.37 0 0 5.37 0 12...",
+              viewBox: "0 0 24 24",
+            };
+          }
+          return undefined;
+        },
+      },
+    },
+  }}
+>
+  {":GitHub: and :HeartLine:"}
+</InstuiMarkdown>
+```
+
+If no enabled provider can resolve a token, the original token text is left in place.
 
 ## Peer dependencies
 

package/dist/index.mjs

@@ -5,6 +5,7 @@ import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import { rehypeColorCodes, rehypeInstUIIconTokens, rehypeUnwrapBlockquoteParagraphs } from "rehype-instui-markdown";
+import * as SimpleIcons from "simple-icons";
 import { Text } from "@instructure/ui-text/v11_7";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@instructure/ui-link/v11_7";
@@ -22,6 +23,50 @@ import { Badge } from "@instructure/ui-badge/v11_7";
 import { SourceCodeEditor } from "@instructure/ui-source-code-editor/v11_7";
 import { Alert } from "@instructure/ui-alerts/v11_7";
 import { Table } from "@instructure/ui-table/v11_7";
+//#region src/simple-icons-resolver.ts
+function isSimpleIconLike(value) {
+	return typeof value === "object" && value !== null && "path" in value && "title" in value && typeof value.path === "string";
+}
+function normalizeSimpleIconCode(code) {
+	return code.toLowerCase().replace(/[^a-z0-9]+/g, "");
+}
+function toSimpleIconExportName(code) {
+	return `si${code.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((word) => word.toLowerCase()).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("")}`;
+}
+function buildSimpleIconLookup(iconsRegistry) {
+	const lookup = /* @__PURE__ */ new Map();
+	for (const [exportName, iconCandidate] of Object.entries(iconsRegistry)) {
+		if (!exportName.startsWith("si") || !isSimpleIconLike(iconCandidate)) continue;
+		const slug = iconCandidate.slug ?? exportName.slice(2);
+		lookup.set(normalizeSimpleIconCode(slug), {
+			title: iconCandidate.title,
+			path: iconCandidate.path,
+			viewBox: iconCandidate.viewBox ?? "0 0 24 24"
+		});
+	}
+	return lookup;
+}
+function createSimpleIconsResolver(iconsRegistry) {
+	const lookup = buildSimpleIconLookup(iconsRegistry);
+	return (code) => {
+		const normalizedCode = normalizeSimpleIconCode(code);
+		const normalizedWithoutPrefix = normalizedCode.startsWith("si") ? normalizedCode.slice(2) : normalizedCode;
+		const bySlug = lookup.get(normalizedCode) ?? (normalizedCode.startsWith("si") ? lookup.get(normalizedWithoutPrefix) : void 0);
+		if (bySlug) return bySlug;
+		const exportNameCandidates = [toSimpleIconExportName(code)];
+		if (normalizedCode.startsWith("si")) exportNameCandidates.push(toSimpleIconExportName(normalizedWithoutPrefix));
+		for (const exportName of exportNameCandidates) {
+			const iconCandidate = iconsRegistry[exportName];
+			if (isSimpleIconLike(iconCandidate)) return {
+				title: iconCandidate.title,
+				path: iconCandidate.path,
+				viewBox: iconCandidate.viewBox ?? "0 0 24 24"
+			};
+		}
+	};
+}
+const resolveSimpleIconToken = createSimpleIconsResolver(SimpleIcons);
+//#endregion
 //#region src/components/text-components.tsx
 function createEmComponent() {
 	return ({ children }) => /* @__PURE__ */ jsx(Text, {
@@ -442,41 +487,104 @@ function createBlockquoteComponent(options) {
 }
 //#endregion
 //#region src/components/span-component.tsx
+const INSTUI_ICON_LOOKUP = new Map(Object.entries(InstUIIcons).map(([name, value]) => [name.toLowerCase(), value]));
+function findInstUIIcon(candidates) {
+	for (const candidate of candidates) {
+		const IconComponent = INSTUI_ICON_LOOKUP.get(candidate.toLowerCase());
+		if (IconComponent) return IconComponent;
+	}
+}
+function parseIconTokenName(iconName) {
+	const withoutPrefix = iconName.startsWith("Icon") ? iconName.slice(4) : iconName;
+	const isSolid = withoutPrefix.endsWith("Solid");
+	const isInstUI = withoutPrefix.endsWith("InstUIIcon");
+	let root = withoutPrefix;
+	if (isSolid) root = withoutPrefix.slice(0, -5);
+	else if (isInstUI) root = withoutPrefix.slice(0, -10);
+	else if (withoutPrefix.endsWith("Line")) root = withoutPrefix.slice(0, -4);
+	return {
+		withoutPrefix,
+		isSolid,
+		isInstUI,
+		root
+	};
+}
+function getSimpleIconCodes(iconName, root, withoutPrefix) {
+	const lowerWords = root.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((word) => word.toLowerCase());
+	const compact = lowerWords.join("");
+	const kebab = lowerWords.join("-");
+	const camel = root.charAt(0).toLowerCase() + root.slice(1);
+	const lower = root.toLowerCase();
+	return Array.from(new Set([
+		iconName,
+		withoutPrefix,
+		root,
+		camel,
+		lower,
+		compact,
+		kebab
+	]));
+}
 function createSpanComponent(options) {
 	return ({ children, className, ...props }) => {
 		if (className?.includes("icon-token") && options.showIcons) {
 			const iconName = props["data-icon"];
 			const inlineIconColor = props["data-icon-color"];
 			if (iconName) {
-				const withoutPrefix = iconName.startsWith("Icon") ? iconName.slice(4) : iconName;
-				const isSolid = withoutPrefix.endsWith("Solid");
-				const isInstUI = withoutPrefix.endsWith("InstUIIcon");
-				let root = withoutPrefix;
-				if (isSolid) root = withoutPrefix.slice(0, -5);
-				else if (isInstUI) root = withoutPrefix.slice(0, -10);
-				else if (withoutPrefix.endsWith("Line")) root = withoutPrefix.slice(0, -4);
-				const IconComponent = (isSolid ? [`Icon${root}Solid`] : isInstUI ? [`${root}InstUIIcon`] : [
-					`${root}InstUIIcon`,
-					`Icon${root}Line`,
-					`Icon${root}`
-				]).map((name) => InstUIIcons[name]).find(Boolean);
-				if (IconComponent) {
-					const resolvedColor = inlineIconColor ?? options.iconColor;
-					const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
-					const sizeProps = IconComponent.displayName?.startsWith("InstUIIcon_") ? { size: "x-small" } : {};
-					if (normalizedIconColor) return /* @__PURE__ */ jsx("span", {
-						style: { color: normalizedIconColor },
-						children: /* @__PURE__ */ jsx(IconComponent, {
+				const { withoutPrefix, isSolid, isInstUI, root } = parseIconTokenName(iconName);
+				if (options.enableInstuiIcons) {
+					const IconComponent = findInstUIIcon(isSolid ? [`Icon${root}Solid`] : isInstUI ? [`${root}InstUIIcon`] : [
+						`${root}InstUIIcon`,
+						`Icon${root}Line`,
+						`Icon${root}`
+					]);
+					if (IconComponent) {
+						const resolvedColor = inlineIconColor ?? options.iconColor;
+						const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
+						const sizeProps = IconComponent.displayName?.startsWith("InstUIIcon_") ? { size: "x-small" } : {};
+						if (normalizedIconColor) return /* @__PURE__ */ jsx("span", {
+							style: { color: normalizedIconColor },
+							children: /* @__PURE__ */ jsx(IconComponent, {
+								title: iconName,
+								color: "inherit",
+								...sizeProps
+							})
+						});
+						return /* @__PURE__ */ jsx(IconComponent, {
 							title: iconName,
-							color: "inherit",
+							color: (resolvedColor === "currentColor" ? "inherit" : resolvedColor) ?? "inherit",
 							...sizeProps
-						})
-					});
-					return /* @__PURE__ */ jsx(IconComponent, {
-						title: iconName,
-						color: (resolvedColor === "currentColor" ? "inherit" : resolvedColor) ?? "inherit",
-						...sizeProps
-					});
+						});
+					}
+				}
+				if (options.enableSimpleIcons && options.resolveSimpleIcon) {
+					const simpleIcon = getSimpleIconCodes(iconName, root, withoutPrefix).map((code) => options.resolveSimpleIcon?.(code)).find(Boolean);
+					if (simpleIcon?.path) {
+						const resolvedColor = inlineIconColor ?? options.simpleIconColor ?? options.iconColor;
+						const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
+						const label = simpleIcon.title ?? root;
+						return /* @__PURE__ */ jsx("span", {
+							style: {
+								display: "inline-flex",
+								alignItems: "center",
+								verticalAlign: "middle",
+								lineHeight: 1,
+								...normalizedIconColor ? { color: normalizedIconColor } : {}
+							},
+							children: /* @__PURE__ */ jsxs(InlineSVG, {
+								inline: true,
+								viewBox: simpleIcon.viewBox ?? "0 0 24 24",
+								width: simpleIcon.width ?? "1.125em",
+								height: simpleIcon.height ?? "1.125em",
+								role: "img",
+								"aria-label": label,
+								children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("path", {
+									d: simpleIcon.path,
+									fill: "currentColor"
+								})]
+							})
+						});
+					}
 				}
 			}
 		}
@@ -654,11 +762,18 @@ function createInstuiMarkdownComponents(renderOptions = {}) {
 	const showColorCodes = Boolean(renderOptions.color?.enabled);
 	const showIcons = Boolean(renderOptions.icons?.enabled);
 	const iconColor = renderOptions.icons?.color;
+	const enableInstuiIcons = renderOptions.icons?.providers?.instui ?? true;
+	const enableSimpleIcons = renderOptions.icons?.providers?.simpleIcons ?? true;
+	const simpleIconColor = renderOptions.icons?.simpleIcons?.color;
 	return {
 		span: createSpanComponent({
 			showColorCodes,
 			showIcons,
-			iconColor
+			iconColor,
+			enableInstuiIcons,
+			enableSimpleIcons,
+			simpleIconColor,
+			resolveSimpleIcon: renderOptions.icons?.simpleIcons?.resolve ?? resolveSimpleIconToken
 		}),
 		a: createLinkComponent({
 			showExternalIcon,
@@ -753,4 +868,4 @@ function InstuiMdxProvider({ children, renderOptions }) {
 	});
 }
 //#endregion
-export { InstuiMarkdown, InstuiMdxProvider, createInstuiMarkdownComponents, instuiMarkdownComponents };
+export { InstuiMarkdown, InstuiMdxProvider, createInstuiMarkdownComponents, createSimpleIconsResolver, instuiMarkdownComponents, resolveSimpleIconToken };

package/index.d.mts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 import type { Components } from "react-markdown";
 
+export type SimpleIconResolver = (code: string) => SimpleIconTokenData | undefined;
+export type SimpleIconsRegistry = Record<string, unknown>;
+
 export interface InstuiMarkdownRenderOptions {
   alert?: {
     closeButton?: boolean;
@@ -30,9 +33,25 @@ export interface InstuiMarkdownRenderOptions {
   icons?: {
     enabled?: boolean;
     color?: string;
+    providers?: {
+      instui?: boolean;
+      simpleIcons?: boolean;
+    };
+    simpleIcons?: {
+      color?: string;
+      resolve?: (code: string) => SimpleIconTokenData | undefined;
+    };
   };
 }
 
+export interface SimpleIconTokenData {
+  path: string;
+  title?: string;
+  viewBox?: string;
+  width?: string | number;
+  height?: string | number;
+}
+
 export interface InstuiMarkdownProps {
   children: string;
   renderOptions?: InstuiMarkdownRenderOptions;
@@ -52,3 +71,9 @@ export declare function createInstuiMarkdownComponents(
 export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
 
 export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;
+
+export declare function createSimpleIconsResolver(
+  iconsRegistry: SimpleIconsRegistry,
+): SimpleIconResolver;
+
+export declare const resolveSimpleIconToken: SimpleIconResolver;

package/index.d.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 import type { Components } from "react-markdown";
 
+export type SimpleIconResolver = (code: string) => SimpleIconTokenData | undefined;
+export type SimpleIconsRegistry = Record<string, unknown>;
+
 export interface InstuiMarkdownRenderOptions {
   alert?: {
     closeButton?: boolean;
@@ -30,9 +33,25 @@ export interface InstuiMarkdownRenderOptions {
   icons?: {
     enabled?: boolean;
     color?: string;
+    providers?: {
+      instui?: boolean;
+      simpleIcons?: boolean;
+    };
+    simpleIcons?: {
+      color?: string;
+      resolve?: (code: string) => SimpleIconTokenData | undefined;
+    };
   };
 }
 
+export interface SimpleIconTokenData {
+  path: string;
+  title?: string;
+  viewBox?: string;
+  width?: string | number;
+  height?: string | number;
+}
+
 export interface InstuiMarkdownProps {
   children: string;
   renderOptions?: InstuiMarkdownRenderOptions;
@@ -52,3 +71,9 @@ export declare function createInstuiMarkdownComponents(
 export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
 
 export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;
+
+export declare function createSimpleIconsResolver(
+  iconsRegistry: SimpleIconsRegistry,
+): SimpleIconResolver;
+
+export declare const resolveSimpleIconToken: SimpleIconResolver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instui-markdown",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "InstUI markdown renderer components",
   "license": "MIT",
   "files": [
@@ -21,7 +21,7 @@
     "access": "public"
   },
   "dependencies": {
-    "rehype-instui-markdown": "0.0.7"
+    "rehype-instui-markdown": "0.1.0"
   },
   "devDependencies": {
     "@types/node": "^24",
@@ -51,7 +51,8 @@
     "rehype-autolink-headings": "*",
     "rehype-raw": "*",
     "rehype-slug": "*",
-    "remark-gfm": "*"
+    "remark-gfm": "*",
+    "simple-icons": "*"
   },
   "scripts": {
     "build": "vp pack",