instui-markdown 0.0.8 → 0.0.9

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

@@ -442,41 +442,90 @@ function createBlockquoteComponent(options) {
 }
 //#endregion
 //#region src/components/span-component.tsx
+function toPascalCase(str) {
+	return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+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 camel = root.charAt(0).toLowerCase() + root.slice(1);
+	const lower = root.toLowerCase();
+	return Array.from(new Set([
+		iconName,
+		withoutPrefix,
+		root,
+		camel,
+		lower
+	]));
+}
 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 normalizedRoot = toPascalCase(root);
+					const IconComponent = (isSolid ? [`Icon${normalizedRoot}Solid`] : isInstUI ? [`${normalizedRoot}InstUIIcon`] : [
+						`${normalizedRoot}InstUIIcon`,
+						`Icon${normalizedRoot}Line`,
+						`Icon${normalizedRoot}`
+					]).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, {
+								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: normalizedIconColor ? { color: normalizedIconColor } : void 0,
+							children: /* @__PURE__ */ jsxs(InlineSVG, {
+								inline: false,
+								viewBox: simpleIcon.viewBox ?? "0 0 24 24",
+								width: simpleIcon.width ?? "1em",
+								height: simpleIcon.height ?? "1em",
+								role: "img",
+								"aria-label": label,
+								children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("path", {
+									d: simpleIcon.path,
+									fill: "currentColor"
+								})]
+							})
+						});
+					}
 				}
 			}
 		}
@@ -654,11 +703,19 @@ 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;
+	const resolveSimpleIcon = renderOptions.icons?.simpleIcons?.resolve;
 	return {
 		span: createSpanComponent({
 			showColorCodes,
 			showIcons,
-			iconColor
+			iconColor,
+			enableInstuiIcons,
+			enableSimpleIcons,
+			simpleIconColor,
+			resolveSimpleIcon
 		}),
 		a: createLinkComponent({
 			showExternalIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instui-markdown",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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.0.9"
   },
   "devDependencies": {
     "@types/node": "^24",