blume 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blume",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Documentation that's fast, AI-ready, and zero-config.",
   "keywords": [
     "astro",
@@ -50,6 +50,7 @@
     "./components": "./src/components/index.ts",
     "./components/*": "./src/components/*",
     "./core/*": "./src/core/*",
+    "./openapi/*": "./src/openapi/*",
     "./sources/*": "./src/core/sources/*",
     "./theme/*": "./src/theme/*",
     "./package.json": "./package.json"
@@ -69,10 +70,19 @@
     "@astrojs/node": "^11.0.0",
     "@astrojs/react": "^6.0.0",
     "@astrojs/vercel": "^11.0.0",
+    "@iconify-json/fa6-brands": "^1.2.6",
+    "@iconify-json/fa6-regular": "^1.2.4",
+    "@iconify-json/fa6-solid": "^1.2.4",
+    "@iconify-json/lucide": "^1.2.115",
+    "@iconify-json/tabler": "^1.2.35",
+    "@iconify/types": "^2.0.0",
+    "@iconify/utils": "^3.1.3",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@orama/orama": "^3.1.18",
     "@pierre/diffs": "^1.2.11",
     "@scalar/astro": "^0.4.5",
+    "@scalar/openapi-parser": "^0.28.8",
+    "@scalar/openapi-types": "^0.9.1",
     "@shikijs/transformers": "^4.2.0",
     "@shikijs/twoslash": "^4.2.0",
     "@tailwindcss/typography": "^0.5.20",

package/src/astro/generate.ts

@@ -36,11 +36,9 @@ import type { ResolvedConfig } from "../core/schema.ts";
 import { resolveTsconfigAliases } from "../core/tsconfig-aliases.ts";
 import type { Navigation } from "../core/types.ts";
 import { buildRssFeeds, renderRssFeed } from "../deploy/rss.ts";
-import {
-  buildReferenceFiles,
-  hasReferences,
-  referenceTabs,
-} from "../openapi/scalar.ts";
+import { hasScalarReferences, referenceTabs } from "../openapi/references.ts";
+import { buildReferenceFiles } from "../openapi/scalar.ts";
+import { isOpenApiSource } from "../openapi/source.ts";
 import { registry } from "../registry/registry.ts";
 import { buildSearchDocuments } from "../search/documents.ts";
 import { searchProviderMeta, servesStaticIndex } from "../search/providers.ts";
@@ -582,8 +580,9 @@ export const buildRuntimeData = (project: BlumeProject): string => {
 
   const { i18n } = config;
 
-  // API reference routes (Scalar) surface as header tabs alongside the
-  // content-derived ones, so the reference stays discoverable in every locale.
+  // API reference routes surface as header tabs alongside the content-derived
+  // ones (Blume-rendered references also own a tab-scoped sidebar of operations),
+  // so the reference stays discoverable in every locale.
   const withReferenceTabs = (nav: Navigation): Navigation => ({
     ...nav,
     repoUrl: config.navigation.repo && repoUrl ? repoUrl : null,
@@ -619,7 +618,6 @@ export const buildRuntimeData = (project: BlumeProject): string => {
               chromeVariants: [],
               selectors: [],
               sidebar: [],
-              sidebarVariants: [],
               tabs: [],
             }
           ),
@@ -650,6 +648,7 @@ export const buildRuntimeData = (project: BlumeProject): string => {
             })),
           }
         : null,
+      icons: config.icons,
       imageZoom: config.markdown.imageZoom,
       logo: resolveLogo(project),
       mcp: config.mcp.enabled
@@ -912,6 +911,7 @@ export const generateRuntime = async (
   const themePath = join(srcDir, "generated", "app.css");
   const searchClientPath = join(srcDir, "generated", "search-client.ts");
   const examplesPath = join(srcDir, "generated", "examples.ts");
+  const openapiPath = join(srcDir, "generated", "openapi.json");
 
   // Record every file this pass writes so orphans (from a now-disabled feature)
   // can be pruned afterwards. `write` wraps the atomic writer and tracks paths.
@@ -987,6 +987,7 @@ export const generateRuntime = async (
         needsReact,
         needsSvelte,
         needsVue,
+        openapiPath,
         pages,
         searchClientPath,
         themePath,
@@ -1235,7 +1236,7 @@ export const generateRuntime = async (
   // React ships with Blume; Vue/Svelte islands need their Astro integration
   // installed by the project. Warn early rather than let Vite fail to resolve it.
   warnings.push(...islandFrameworkWarnings(frameworks, context.root));
-  if (hasReferences(config)) {
+  if (hasScalarReferences(config)) {
     const references = await buildReferenceFiles({
       config,
       contentRoutes: new Set(project.graph.pages.map((page) => page.route)),
@@ -1254,6 +1255,14 @@ export const generateRuntime = async (
     join(srcDir, "generated", "data.json"),
     buildRuntimeData(project)
   );
+  // The parsed OpenAPI specs behind the `blume:openapi` alias. Always written
+  // (even as `{}`) so the alias resolves whether or not a reference is enabled;
+  // the source parsed the specs during the scan, so this is just serialization.
+  const openApiSource = project.sources.find(isOpenApiSource);
+  await write(
+    openapiPath,
+    `${JSON.stringify(openApiSource ? openApiSource.openApiData() : {})}\n`
+  );
   await write(
     join(out, "blume.manifest.json"),
     `${JSON.stringify(project.manifest, null, 2)}\n`

package/src/astro/templates.ts

@@ -7,6 +7,7 @@ import type { AskBackend } from "../ai/ask.ts";
 import { resolveAssetMounts } from "../core/assets.ts";
 import type { ResolvedConfig } from "../core/schema.ts";
 import type { ProjectContext } from "../core/types.ts";
+import { hasScalarReferences } from "../openapi/references.ts";
 import { searchProviderMeta } from "../search/providers.ts";
 import { buildFontEntries } from "../theme/fonts.ts";
 import type { ExampleSpec } from "./examples.ts";
@@ -99,9 +100,10 @@ export const runtimeDependencies = (options: {
   if (needsSvelte) {
     deps.push("@astrojs/svelte");
   }
-  // The Scalar integration is only declared when an API reference is configured,
-  // so projects that don't use it never pull it into the runtime.
-  if (config.openapi.enabled || config.asyncapi.enabled) {
+  // The Scalar integration is only declared for a Scalar-rendered reference
+  // (the `renderer: "scalar"` fallback, or AsyncAPI). Blume-rendered OpenAPI
+  // parses at generate time and needs no runtime Scalar dependency.
+  if (hasScalarReferences(config)) {
     deps.push("@scalar/astro");
   }
   // Only the configured search provider's SDK is declared, so a project pulls in
@@ -178,6 +180,10 @@ const renderUserAliases = (
     )
     .join("");
 
+/** Astro's build output dir: the runtime's own `distDir`, else `<root>/dist`. */
+const astroOutDir = (context: ProjectContext): string =>
+  context.distDir ?? `${context.root}/dist`;
+
 export const astroConfigTemplate = (options: {
   context: ProjectContext;
   config: ResolvedConfig;
@@ -190,6 +196,7 @@ export const astroConfigTemplate = (options: {
   examplesPath: string;
   themePath: string;
   searchClientPath: string;
+  openapiPath: string;
   /** Project tsconfig path aliases (`find` -> absolute dir), e.g. `@` -> src. */
   aliases?: Record<string, string>;
 }): string => {
@@ -199,6 +206,7 @@ export const astroConfigTemplate = (options: {
     examplesPath,
     needsSvelte,
     needsVue,
+    openapiPath,
     searchClientPath,
   } = options;
   const { deployment } = config;
@@ -322,7 +330,7 @@ ${twoslashImport}${reactImport}${vueImport}${svelteImport}${blumeImport}${adapte
 export default defineConfig({
   root: ${JSON.stringify(context.outDir)},
   srcDir: ${JSON.stringify(`${context.outDir}/src`)},
-  outDir: ${JSON.stringify(`${context.root}/dist`)},
+  outDir: ${JSON.stringify(astroOutDir(context))},
   publicDir: ${JSON.stringify(`${context.root}/public`)},
   output: ${JSON.stringify(deployment.output)},${adapterOption}${siteOption}${baseOption}${redirectsOption}${i18nOption}${fontsOption}
   integrations: [${integrations.join(", ")}],
@@ -357,6 +365,7 @@ export default defineConfig({
       alias: {
         "blume:data": ${JSON.stringify(dataPath)},
         "blume:examples": ${JSON.stringify(examplesPath)},
+        "blume:openapi": ${JSON.stringify(openapiPath)},
         "blume:search-client": ${JSON.stringify(searchClientPath)},
         "blume:theme": ${JSON.stringify(themePath)},${userAliasLines}
       },
@@ -913,7 +922,10 @@ import FileTree from "blume/components/content/FileTree.astro";
 import Frame from "blume/components/content/Frame.astro";
 import GithubInfo from "blume/components/content/GithubInfo.astro";
 import Panel from "blume/components/content/Panel.astro";
+import ParamField from "blume/components/content/ParamField.astro";
 import Prompt from "blume/components/content/Prompt.astro";
+import RequestField from "blume/components/content/RequestField.astro";
+import ResponseField from "blume/components/content/ResponseField.astro";
 import Step from "blume/components/content/Step.astro";
 import Steps from "blume/components/content/Steps.astro";
 import Tab from "blume/components/content/Tab.astro";
@@ -927,6 +939,8 @@ import TypeTable from "blume/components/content/TypeTable.astro";
 import Visibility from "blume/components/content/Visibility.astro";
 import YouTube from "blume/components/content/YouTube.astro";
 import Icon from "blume/components/Icon.astro";
+import ApiOverview from "blume/components/openapi/ApiOverview.astro";
+import Operation from "blume/components/openapi/Operation.astro";
 ${mathImport}import { mdxComponents as userMdx, layoutOverrides } from "../generated/components.ts";
 import { islandComponents } from "../generated/islands.ts";
 import data from "../generated/data.json";
@@ -943,6 +957,7 @@ export const prerender = true;
 const components = {
   Accordion,
   AccordionItem,
+  ApiOverview,
   AutoTypeTable,
   Badge,
   Callout,
@@ -960,8 +975,12 @@ const components = {
   Frame,
   GithubInfo,
   Icon,
+  Operation,
   Panel,
+  ParamField,
   Prompt,
+  RequestField,
+  ResponseField,
   Step,
   Steps,
   Tab,
@@ -1448,6 +1467,11 @@ declare module "blume:data" {
   export default data;
 }
 
+declare module "blume:openapi" {
+  const specs: import("blume/openapi/model.ts").OpenApiData;
+  export default specs;
+}
+
 declare module "blume:search-client" {
   export const createSearch: () =>
     | import("blume/components/layout/search/types.ts").SearchFn

package/src/cli/commands/build.ts

@@ -6,6 +6,8 @@ import { defineCommand } from "citty";
 import { join } from "pathe";
 
 import { buildLlmsFiles } from "../../ai/llms.ts";
+import { ensureGitignore } from "../../core/gitignore.ts";
+import type { BlumeProject } from "../../core/project-graph.ts";
 import type { ResolvedConfig } from "../../core/schema.ts";
 import { serverFeatures } from "../../core/server-features.ts";
 import {
@@ -169,6 +171,82 @@ const enforceBudget = async (
   return passed ? "pass" : "fail";
 };
 
+/**
+ * Run every deploy post-step of a real (non-isolated) build: the search index +
+ * hosted-provider sync, llms.txt, sitemap/robots, redirect files, the summary
+ * box, and the optional bundle report / budget gate. Exits non-zero if a budget
+ * is exceeded. Isolated verify builds skip all of this.
+ */
+const publishBuildArtifacts = async (
+  project: BlumeProject,
+  distDir: string,
+  args: { analyze?: boolean; "budget-css"?: string; "budget-js"?: string }
+): Promise<void> => {
+  if (project.config.search.provider === "pagefind") {
+    logger.start("Building search index");
+    const indexed = await buildSearchIndex(distDir);
+    logger.success(`Indexed ${indexed} page(s) for search`);
+  }
+
+  // Upload the index to a hosted provider (Algolia, Orama Cloud, Typesense).
+  // Skipped with a warning when its admin key isn't configured.
+  await syncSearchProvider(project, {
+    start: (message) => logger.start(message),
+    success: (message) => logger.success(message),
+    warn: (message) => logger.warn(message),
+  });
+
+  if (project.config.ai.llmsTxt) {
+    const { index, full } = await buildLlmsFiles(project);
+    await Promise.all([
+      writeFile(join(distDir, "llms.txt"), index, "utf-8"),
+      writeFile(join(distDir, "llms-full.txt"), full, "utf-8"),
+    ]);
+    logger.success("Generated llms.txt and llms-full.txt");
+  }
+
+  // A user's own public/ file (copied into dist by Astro) always wins.
+  const sitemap = buildSitemap(project);
+  if (sitemap && !existsSync(join(distDir, "sitemap.xml"))) {
+    await writeFile(join(distDir, "sitemap.xml"), sitemap, "utf-8");
+    logger.success("Generated sitemap.xml");
+  }
+
+  const robots = buildRobots(project);
+  if (robots && !existsSync(join(distDir, "robots.txt"))) {
+    await writeFile(join(distDir, "robots.txt"), robots, "utf-8");
+    logger.success("Generated robots.txt");
+  }
+
+  await emitRedirectFiles(project.config, distDir);
+
+  const { config } = project;
+  const features = serverFeatures(config);
+  logger.box(
+    [
+      `Output     ${config.deployment.output}`,
+      `Adapter    ${config.deployment.adapter ?? "none"}`,
+      `Site       ${config.deployment.site ?? "not set"}`,
+      `Search     ${config.search.provider}`,
+      `Redirects  ${config.redirects.length}`,
+      `Sitemap    ${sitemap ? "yes" : "no (set deployment.site)"}`,
+      `Robots     ${robots ? "yes" : "no"}`,
+      `LLM files  ${config.ai.llmsTxt ? "yes" : "no"}`,
+      `Server features  ${features.length > 0 ? features.join(", ") : "none"}`,
+    ].join("\n")
+  );
+
+  if (args.analyze) {
+    await reportBundleSizes(distDir);
+  }
+
+  if ((await enforceBudget(distDir, args)) === "fail") {
+    process.exit(1);
+  }
+
+  logger.success(`Built to ${distDir}`);
+};
+
 export const buildCommand = defineCommand({
   args: {
     adapter: {
@@ -191,6 +269,11 @@ export const buildCommand = defineCommand({
       description: "Fail if total client JavaScript exceeds this many kB.",
       type: "string",
     },
+    isolated: {
+      description:
+        "Build into an isolated .blume-verify runtime (and its own dist) so a running dev server and the real dist/ are untouched. For verifying changes while `blume dev` runs.",
+      type: "boolean",
+    },
     output: {
       description: "Output mode: static | server.",
       type: "string",
@@ -207,7 +290,18 @@ export const buildCommand = defineCommand({
   },
   async run({ args }) {
     const root = process.cwd();
-    refuseIfDevRunning(root, "building");
+
+    // `--isolated` (or BLUME_RUNTIME_DIR) relocates the whole runtime to a
+    // sibling dir so this build never touches a live dev server's `.blume/` or
+    // the user's real `dist/`. A non-default runtime dir has no dev lock, so the
+    // refusal below lets it proceed; a plain build still refuses.
+    const runtimeDir = args.isolated
+      ? ".blume-verify"
+      : process.env.BLUME_RUNTIME_DIR;
+    refuseIfDevRunning(root, "building", runtimeDir);
+    if (args.isolated) {
+      await ensureGitignore(root, [".blume-verify/"]);
+    }
 
     if (args.output && args.output !== "static" && args.output !== "server") {
       logger.error(`Invalid --output "${args.output}" (use static | server).`);
@@ -230,6 +324,7 @@ export const buildCommand = defineCommand({
       },
       preview: args.preview,
       root,
+      runtimeDir,
       strict: args.strict,
     });
 
@@ -242,70 +337,19 @@ export const buildCommand = defineCommand({
       root: project.context.outDir,
     });
 
-    const distDir = join(root, "dist");
-
-    if (project.config.search.provider === "pagefind") {
-      logger.start("Building search index");
-      const indexed = await buildSearchIndex(distDir);
-      logger.success(`Indexed ${indexed} page(s) for search`);
-    }
-
-    // Upload the index to a hosted provider (Algolia, Orama Cloud, Typesense).
-    // Skipped with a warning when its admin key isn't configured.
-    await syncSearchProvider(project, {
-      start: (message) => logger.start(message),
-      success: (message) => logger.success(message),
-      warn: (message) => logger.warn(message),
-    });
-
-    if (project.config.ai.llmsTxt) {
-      const { index, full } = await buildLlmsFiles(project);
-      await Promise.all([
-        writeFile(join(distDir, "llms.txt"), index, "utf-8"),
-        writeFile(join(distDir, "llms-full.txt"), full, "utf-8"),
-      ]);
-      logger.success("Generated llms.txt and llms-full.txt");
-    }
+    const distDir = project.context.distDir ?? join(root, "dist");
 
-    // A user's own public/ file (copied into dist by Astro) always wins.
-    const sitemap = buildSitemap(project);
-    if (sitemap && !existsSync(join(distDir, "sitemap.xml"))) {
-      await writeFile(join(distDir, "sitemap.xml"), sitemap, "utf-8");
-      logger.success("Generated sitemap.xml");
-    }
-
-    const robots = buildRobots(project);
-    if (robots && !existsSync(join(distDir, "robots.txt"))) {
-      await writeFile(join(distDir, "robots.txt"), robots, "utf-8");
-      logger.success("Generated robots.txt");
-    }
-
-    await emitRedirectFiles(project.config, distDir);
-
-    const { config } = project;
-    const features = serverFeatures(config);
-    logger.box(
-      [
-        `Output     ${config.deployment.output}`,
-        `Adapter    ${config.deployment.adapter ?? "none"}`,
-        `Site       ${config.deployment.site ?? "not set"}`,
-        `Search     ${config.search.provider}`,
-        `Redirects  ${config.redirects.length}`,
-        `Sitemap    ${sitemap ? "yes" : "no (set deployment.site)"}`,
-        `Robots     ${robots ? "yes" : "no"}`,
-        `LLM files  ${config.ai.llmsTxt ? "yes" : "no"}`,
-        `Server features  ${features.length > 0 ? features.join(", ") : "none"}`,
-      ].join("\n")
-    );
-
-    if (args.analyze) {
-      await reportBundleSizes(distDir);
-    }
-
-    if ((await enforceBudget(distDir, args)) === "fail") {
-      process.exit(1);
+    // An isolated build is a throwaway verify: it only needs to confirm the site
+    // compiles and renders. Skip the network post-steps (search sync) and
+    // deploy artifacts (index/llms/sitemap/robots/redirects) that only matter
+    // for a real publish and would push to hosted providers.
+    if (runtimeDir) {
+      logger.success(
+        `Isolated build OK — output at ${distDir} (not published).`
+      );
+      return;
     }
 
-    logger.success(`Built to ${distDir}`);
+    await publishBuildArtifacts(project, distDir, args);
   },
 });

package/src/cli/commands/check.ts

@@ -5,11 +5,18 @@ import { sync } from "astro";
 import { defineCommand } from "citty";
 import { join } from "pathe";
 
+import { ensureGitignore } from "../../core/gitignore.ts";
+import { refuseIfDevRunning } from "../dev-lock.ts";
 import { logger } from "../log.ts";
 import { prepareProject } from "../prepare.ts";
 
 export const checkCommand = defineCommand({
   args: {
+    isolated: {
+      description:
+        "Type-check in an isolated .blume-verify runtime so a running dev server is untouched. For verifying changes while `blume dev` runs.",
+      type: "boolean",
+    },
     preview: {
       description: "Include drafts and unpublished CMS content.",
       type: "boolean",
@@ -25,10 +32,23 @@ export const checkCommand = defineCommand({
   },
   async run({ args }) {
     const root = process.cwd();
+
+    // `blume check` regenerates `.blume` just like `build`, so it must refuse a
+    // live dev server unless isolated. `--isolated` (or BLUME_RUNTIME_DIR)
+    // relocates the runtime to `.blume-verify`, which dev never locks.
+    const runtimeDir = args.isolated
+      ? ".blume-verify"
+      : process.env.BLUME_RUNTIME_DIR;
+    refuseIfDevRunning(root, "checking", runtimeDir);
+    if (args.isolated) {
+      await ensureGitignore(root, [".blume-verify/"]);
+    }
+
     const project = await prepareProject({
       mode: "build",
       preview: args.preview,
       root,
+      runtimeDir,
       strict: args.strict,
     });
 

package/src/cli/dev-lock.ts

@@ -8,6 +8,7 @@ import {
 
 import { join } from "pathe";
 
+import { resolveRuntimeDir } from "../core/project.ts";
 import { logger } from "./log.ts";
 
 /**
@@ -71,13 +72,20 @@ export const acquireDevLock = (outDir: string): (() => void) => {
 };
 
 /**
- * Exit with an error when a live `blume dev` owns the `.blume` dir under `root`.
- * `action` names the operation being refused (e.g. "building").
+ * Exit with an error when a live `blume dev` owns the runtime dir under `root`.
+ * `action` names the operation being refused (e.g. "building"). `runtimeDir`
+ * relocates the checked dir: an isolated verify (`.blume-verify`) targets a dir
+ * dev never locks, so it proceeds; a default or `--runtime-dir .blume` run still
+ * refuses.
  */
-export const refuseIfDevRunning = (root: string, action: string): void => {
-  if (isDevLocked(join(root, ".blume"))) {
+export const refuseIfDevRunning = (
+  root: string,
+  action: string,
+  runtimeDir?: string
+): void => {
+  if (isDevLocked(resolveRuntimeDir(root, runtimeDir))) {
     logger.error(
-      `A \`blume dev\` server is running against .blume; ${action} would corrupt it. Stop the dev server first.`
+      `A \`blume dev\` server is running against .blume; ${action} would corrupt it. Stop the dev server, or re-run with --isolated to build/verify against .blume-verify without touching it.`
     );
     process.exit(1);
   }

package/src/cli/prepare.ts

@@ -24,6 +24,8 @@ export interface PrepareOptions {
   refresh?: boolean;
   /** CLI config overrides (e.g. `--output`, `--content-dir`). */
   overrides?: ConfigOverrides;
+  /** Relocate the generated runtime (e.g. `.blume-verify` for `--isolated`). */
+  runtimeDir?: string;
 }
 
 /**
@@ -45,6 +47,7 @@ export const prepareProject = async (
       overrides: options.overrides,
       preview: options.preview,
       refresh: options.refresh,
+      runtimeDir: options.runtimeDir,
     });
   } catch (error) {
     if (error instanceof BlumeError) {

package/src/components/BlumePage.astro

@@ -38,7 +38,10 @@ import FileTree from "./content/FileTree.astro";
 import Frame from "./content/Frame.astro";
 import GithubInfo from "./content/GithubInfo.astro";
 import Panel from "./content/Panel.astro";
+import ParamField from "./content/ParamField.astro";
 import Prompt from "./content/Prompt.astro";
+import RequestField from "./content/RequestField.astro";
+import ResponseField from "./content/ResponseField.astro";
 import Step from "./content/Step.astro";
 import Steps from "./content/Steps.astro";
 import Tab from "./content/Tab.astro";
@@ -87,7 +90,10 @@ const components = {
   GithubInfo,
   Icon,
   Panel,
+  ParamField,
   Prompt,
+  RequestField,
+  ResponseField,
   Step,
   Steps,
   Tab,

package/src/components/Icon.astro

@@ -1,10 +1,13 @@
 ---
+import data from "blume:data";
 import { resolveIcon } from "../theme/icons.ts";
 
 interface Props {
   name?: unknown;
   icon?: unknown;
   iconType?: string;
+  /** Icon library for a bare name; defaults to the project's `icons.library`. */
+  library?: string;
   size?: number;
   class?: string;
   className?: string;
@@ -16,6 +19,7 @@ const {
   color,
   icon,
   iconType,
+  library,
   name,
   size = 16,
   class: astroClass,
@@ -37,8 +41,12 @@ const isImageIcon = (value: string): boolean =>
   /\.(?:avif|gif|jpe?g|png|svg|webp)$/iu.test(value);
 const imageSrc = iconName && !rawSvg && isImageIcon(iconName) ? iconName : null;
 const resolvedIcon =
-  iconName && !(imageSrc || rawSvg) ? resolveIcon(iconName, iconType) : null;
-const markup = resolvedIcon?.markup;
+  iconName && !(imageSrc || rawSvg)
+    ? resolveIcon(iconName, {
+        iconType,
+        library: library ?? data.config.icons.library,
+      })
+    : null;
 const resolvedClass = astroClass ?? className;
 const customStyle = `display:inline-flex;width:${size}px;height:${size}px;${
   color ? `color:${color}` : ""
@@ -76,21 +84,16 @@ const style = color ? `color:${color}` : undefined;
       width={size}
     />
   ) : (
-    markup && (
+    resolvedIcon && (
     <svg
       aria-hidden={label ? undefined : "true"}
       aria-label={label}
       class={resolvedClass}
-      fill="none"
       height={size}
       role={label ? "img" : undefined}
-      set:html={markup}
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      set:html={resolvedIcon.body}
       style={style}
-      viewBox="0 0 24 24"
+      viewBox={resolvedIcon.viewBox}
       width={size}
       xmlns="http://www.w3.org/2000/svg"
     />