@nebutra/icons 0.1.0

package/README.md

@@ -0,0 +1,27 @@
+# @nebutra/icons
+
+541 Geist icons packaged as typed TypeScript React components.
+
+## Design Intent
+
+Icons are scraped from the Vercel Geist design system and generated via an SVGR pipeline (`scripts/generate.ts`). Each icon is an individual TSX component that accepts standard SVG props, enabling tree-shaking at the bundler level — importing one icon does not bundle the other 540.
+
+The generation script handles duplicate CSS-in-JSX style keys present in some Geist SVG sources, producing valid component output without manual post-processing.
+
+See `apps/storybook` (Foundation/Icons story) for the full visual gallery.
+
+## Usage
+
+```tsx
+import { IconGitHub, IconVercel } from "@nebutra/icons";
+
+<IconGitHub width={20} height={20} />
+<IconVercel className="text-foreground" />
+```
+
+## Regenerating Icons
+
+```bash
+pnpm --filter @nebutra/icons generate
+pnpm --filter @nebutra/icons build
+```

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@nebutra/icons",
+  "version": "0.1.0",
+  "description": "Geist icon set (541 icons) packaged as TypeScript React components",
+  "private": false,
+  "license": "AGPL-3.0",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@types/react": ">=18.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/node": "^22.19.15",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "homepage": "https://github.com/Nebutra/Nebutra-Sailor/tree/main/packages/design/icons#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nebutra/Nebutra-Sailor.git",
+    "directory": "packages/design/icons"
+  },
+  "bugs": {
+    "url": "https://github.com/Nebutra/Nebutra-Sailor/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate": "tsx scripts/generate.ts",
+    "build": "tsup src/index.ts --format cjs,esm --out-dir dist && tsc -p tsconfig.build.json",
+    "dev": "tsup src/index.ts --format cjs,esm --out-dir dist --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/scripts/generate.ts

@@ -0,0 +1,160 @@
+/**
+ * Converts every SVG in src/svg/ into a TypeScript React component in src/components/
+ * and generates the barrel src/index.ts.
+ *
+ * Run:  pnpm --filter @nebutra/icons generate
+ */
+
+import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { basename, join } from "node:path";
+import { transform } from "@svgr/core";
+
+const SVG_DIR = join(__dirname, "../src/svg");
+const OUT_DIR = join(__dirname, "../src/components");
+const INDEX_PATH = join(__dirname, "../src/index.ts");
+
+/** "arrow-down" → "ArrowDown" */
+function toPascalCase(kebab: string): string {
+  return kebab
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+const SVGR_CONFIG = {
+  plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+  typescript: true,
+  ref: true,
+  icon: true, // uses 1em for width/height, supports size via font-size
+  svgoConfig: {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeViewBox: false,
+            cleanupIds: false,
+          },
+        },
+      },
+    ],
+  },
+  // Use tpl-based template — jsx is an AST node, NOT a string
+  template: (
+    variables: {
+      imports: unknown;
+      interfaces: unknown;
+      componentName: string;
+      props: unknown;
+      jsx: unknown;
+      exports: unknown;
+    },
+    { tpl }: { tpl: (...args: unknown[]) => unknown },
+  ) => {
+    // Hardcode only the imports we actually use — avoids unused SVGProps/Ref lint errors
+    return tpl`
+import * as React from "react";
+import { forwardRef } from "react";
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+
+const ${variables.componentName} = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    ${variables.jsx}
+  )
+);
+${variables.componentName}.displayName = "${variables.componentName}";
+
+export { ${variables.componentName} };
+export default ${variables.componentName};
+`;
+  },
+  // Props to pass to the root SVG — size controls both width and height
+  svgProps: {
+    width: "{width ?? size}",
+    height: "{height ?? size}",
+    ref: "{ref}",
+  },
+};
+
+/**
+ * Remove duplicate keys from JSX style objects (TS1117 fix).
+ * Some SVGs encode P3 wide-gamut colors as: fill: "#hex"; fill: color(display-p3 ...)
+ * SVGR preserves both, producing duplicate object keys. Keep the last occurrence.
+ */
+function removeDuplicateStyleKeys(code: string): string {
+  const lines = code.split("\n");
+  const result: string[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const next = lines[i + 1];
+    if (next) {
+      const cur = line.match(/^(\s*)(\w+):\s*"[^"]*",\s*$/);
+      const nxt = next.match(/^(\s*)(\w+):\s*/);
+      if (cur && nxt && cur[2] === nxt[2]) {
+        continue; // skip: duplicate key, keep the next line
+      }
+    }
+    result.push(line);
+  }
+  return result.join("\n");
+}
+
+async function main() {
+  await mkdir(OUT_DIR, { recursive: true });
+
+  const svgFiles = (await readdir(SVG_DIR)).filter((f) => f.endsWith(".svg")).sort();
+
+  const exportLines: string[] = [];
+  let skipped = 0;
+
+  for (const file of svgFiles) {
+    const name = basename(file, ".svg");
+    const componentName = toPascalCase(name);
+    const svgContent = await readFile(join(SVG_DIR, file), "utf-8");
+
+    let code: string;
+    try {
+      code = await transform(svgContent, SVGR_CONFIG as Parameters<typeof transform>[1], {
+        componentName,
+        filePath: join(SVG_DIR, file),
+      });
+      code = removeDuplicateStyleKeys(code);
+    } catch (_err) {
+      skipped++;
+      continue;
+    }
+
+    const outFile = join(OUT_DIR, `${componentName}.tsx`);
+    await writeFile(outFile, code, "utf-8");
+    exportLines.push({ name, componentName });
+  }
+
+  // Build barrel index
+  const lines = [
+    "// Auto-generated — do not edit manually.",
+    "// Source: vercel.com/geist/icons  |  Run: pnpm --filter @nebutra/icons generate",
+    "",
+    'export type { IconProps } from "./components/' + exportLines[0].componentName + '";',
+    'export type { Icon } from "./types";',
+    "",
+    ...exportLines.map(
+      ({ componentName }) => `export { ${componentName} } from "./components/${componentName}";`,
+    ),
+    "",
+  ].join("\n");
+
+  await writeFile(INDEX_PATH, lines, "utf-8");
+
+  process.stdout.write(
+    `✅ Generated ${exportLines.length} components (${skipped} skipped) → src/components/\n`,
+  );
+  process.stdout.write(`✅ Wrote src/index.ts with ${exportLines.length} named exports\n`);
+}
+
+main().catch((_e) => {
+  process.exit(1);
+});

package/src/components/Accessibility.tsx

@@ -0,0 +1,30 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const Accessibility = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M8 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M4.671 6A2 2 0 0 1 6.65 8.302L6.43 9.733c-.092.483-.24.954-.43 1.407L4.33 15.2l1.592.688 1.672-3.972c.133-.315.68-.315.812 0l1.672 3.972 1.592-.688L10 11.14a7 7 0 0 1-.43-1.407L9.283 8.43A2 2 0 0 1 11.238 6H14V4.5H2V6z"
+      />
+    </svg>
+  ),
+);
+Accessibility.displayName = "Accessibility";
+
+export { Accessibility };
+export default Accessibility;

package/src/components/AccessibilityUnread.tsx

@@ -0,0 +1,33 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AccessibilityUnread = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      ref={ref}
+      {...props}
+    >
+      <circle cx={13.5} cy={2.5} r={2.5} fill="var(--ds-blue-900)" />
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10.035 4.5H2V6h2.671A2 2 0 0 1 6.65 8.302L6.43 9.733c-.092.483-.24.954-.43 1.407L4.33 15.2l1.592.688 1.672-3.972c.133-.315.68-.315.812 0l1.672 3.972 1.592-.688L10 11.14a7 7 0 0 1-.43-1.407L9.283 8.43A2 2 0 0 1 11.238 6h.325a4 4 0 0 1-1.527-1.5m-.535-3a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AccessibilityUnread.displayName = "AccessibilityUnread";
+
+export { AccessibilityUnread };
+export default AccessibilityUnread;

package/src/components/AcronymApi.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymApi = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 20 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M17.5 2.25h-15c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h15c.69 0 1.25-.56 1.25-1.25v-9c0-.69-.56-1.25-1.25-1.25M2.5 1A2.5 2.5 0 0 0 0 3.5v9A2.5 2.5 0 0 0 2.5 15h15a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 17.5 1zm3 7V6.75a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25V8zm0 1.5V11H4V6.75C4 5.784 4.784 5 5.75 5h.5C7.216 5 8 5.784 8 6.75V11H6.5V9.5zm5.25-.5v2h-1.5V5h2.25c.966 0 1.75.784 1.75 1.75v.5A1.75 1.75 0 0 1 11.5 9zm0-1.5h.75a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.75zM14.5 11H16V5h-1.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymApi.displayName = "AcronymApi";
+
+export { AcronymApi };
+export default AcronymApi;

package/src/components/AcronymCsv.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymCsv = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 21 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 2.25h16c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25h-16c-.69 0-1.25-.56-1.25-1.25v-9c0-.69.56-1.25 1.25-1.25M0 3.5A2.5 2.5 0 0 1 2.5 1h16A2.5 2.5 0 0 1 21 3.5v9a2.5 2.5 0 0 1-2.5 2.5h-16A2.5 2.5 0 0 1 0 12.5zm10.25 3.375c0-.207.168-.375.375-.375H12V5h-1.375a1.875 1.875 0 0 0 0 3.75.375.375 0 0 1 0 .75H9V11h1.625a1.875 1.875 0 0 0 0-3.75.375.375 0 0 1-.375-.375M15.5 5v3.336c0 .066.026.13.073.177l.427.426.427-.426a.25.25 0 0 0 .073-.177V5H18v3.336c0 .464-.184.909-.513 1.237l-.957.957-.53.53-.53-.53-.957-.957A1.75 1.75 0 0 1 14 8.336V5zM5.375 5A2.375 2.375 0 0 0 3 7.375v1.25a2.375 2.375 0 1 0 4.75 0V8.5h-1.5v.125a.875.875 0 1 1-1.75 0v-1.25c0-.483.392-.875.875-.875H5.5a.75.75 0 0 1 .75.75h1.5A2.25 2.25 0 0 0 5.5 5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymCsv.displayName = "AcronymCsv";
+
+export { AcronymCsv };
+export default AcronymCsv;

package/src/components/AcronymGif.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymGif = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 20 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 2.25h15c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25v-9c0-.69.56-1.25 1.25-1.25M0 3.5A2.5 2.5 0 0 1 2.5 1h15A2.5 2.5 0 0 1 20 3.5v9a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 0 12.5zM6 5a2.25 2.25 0 0 0-2.25 2.25v1.5A2.25 2.25 0 0 0 6 11h1.25c.69 0 1.25-.56 1.25-1.25v-.5C8.5 8.56 7.94 8 7.25 8H6.5v1.5H6a.75.75 0 0 1-.75-.75v-1.5A.75.75 0 0 1 6 6.5h.5A.5.5 0 0 1 7 7h1.5a2 2 0 0 0-2-2zm5.25 6h-1.5V5h1.5zm2-6h-.75v6H14V9h2.5V7.5H14v-1h2.5V5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymGif.displayName = "AcronymGif";
+
+export { AcronymGif };
+export default AcronymGif;

package/src/components/AcronymHttp.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymHttp = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 26 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M23.5 2.25h-21c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h21c.69 0 1.25-.56 1.25-1.25v-9c0-.69-.56-1.25-1.25-1.25M2.5 1A2.5 2.5 0 0 0 0 3.5v9A2.5 2.5 0 0 0 2.5 15h21a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 23.5 1zM15 6.5h-1.25V5h4v1.5H16.5V11H15zm-6.5 0h1.25V11h1.5V6.5h1.25V5h-4zM3 11V5h1.5v2.25h1V5H7v6H5.5V8.75h-1V11zm17.5 0V9h.75A1.75 1.75 0 0 0 23 7.25v-.5A1.75 1.75 0 0 0 21.25 5H19v6zm.75-3.5h-.75v-1h.75a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymHttp.displayName = "AcronymHttp";
+
+export { AcronymHttp };
+export default AcronymHttp;

package/src/components/AcronymIsr.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymIsr = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 20 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 2.25h15c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25v-9c0-.69.56-1.25 1.25-1.25M0 3.5A2.5 2.5 0 0 1 2.5 1h15A2.5 2.5 0 0 1 20 3.5v9a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 0 12.5zM13.5 11V9.168c.591.281 1 .884 1 1.582V11H16v-.25c0-.786-.279-1.507-.743-2.068.45-.317.743-.84.743-1.432v-.5A1.75 1.75 0 0 0 14.25 5H12v6zm.75-3.5h-.75v-1h.75a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25M5.5 5v6H4V5zm3 1.875c0-.207.168-.375.375-.375h1.375V5H8.875a1.875 1.875 0 0 0 0 3.75.375.375 0 1 1 0 .75H7.25V11h1.625a1.875 1.875 0 0 0 0-3.75.375.375 0 0 1-.375-.375"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymIsr.displayName = "AcronymIsr";
+
+export { AcronymIsr };
+export default AcronymIsr;

package/src/components/AcronymJpg.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymJpg = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 20 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 2.25h15c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25v-9c0-.69.56-1.25 1.25-1.25M0 3.5A2.5 2.5 0 0 1 2.5 1h15A2.5 2.5 0 0 1 20 3.5v9a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 0 12.5zm5 5.625V5h1.5v4.125a1.875 1.875 0 0 1-3.75 0V8.75h1.5v.375a.375.375 0 1 0 .75 0M9.25 9v2h-1.5V5H10c.966 0 1.75.784 1.75 1.75v.5A1.75 1.75 0 0 1 10 9zm0-1.5H10a.25.25 0 0 0 .25-.25v-.5A.25.25 0 0 0 10 6.5h-.75zm5.5-2.5a2.25 2.25 0 0 0-2.25 2.25v1.5A2.25 2.25 0 0 0 14.75 11H16c.69 0 1.25-.56 1.25-1.25v-.5C17.25 8.56 16.69 8 16 8h-.75v1.5h-.5a.75.75 0 0 1-.75-.75v-1.5a.75.75 0 0 1 .75-.75h.5a.5.5 0 0 1 .5.5h1.5a2 2 0 0 0-2-2z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymJpg.displayName = "AcronymJpg";
+
+export { AcronymJpg };
+export default AcronymJpg;

package/src/components/AcronymJs.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymJs = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M0 2.5A2.5 2.5 0 0 1 2.5 0h11A2.5 2.5 0 0 1 16 2.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 13.5zM7.5 8v4.125a.375.375 0 0 1-.75 0v-.375h-1.5v.375a1.875 1.875 0 0 0 3.75 0V8zm4.25 1.875c0-.207.168-.375.375-.375H13.5V8h-1.375a1.875 1.875 0 0 0 0 3.75.375.375 0 0 1 0 .75H10.5V14h1.625a1.875 1.875 0 0 0 0-3.75.375.375 0 0 1-.375-.375"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymJs.displayName = "AcronymJs";
+
+export { AcronymJs };
+export default AcronymJs;

package/src/components/AcronymJson.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymJson = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 27 14"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24 1.25H3c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h21c.69 0 1.25-.56 1.25-1.25v-9c0-.69-.56-1.25-1.25-1.25M3 0A2.5 2.5 0 0 0 .5 2.5v9A2.5 2.5 0 0 0 3 14h21a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 24 0zm16 4h1.441l.215.386L22 6.806V4h1.5v6h-1.441l-.215-.386-1.344-2.42V10H19V4M5.5 8.125V4H7v4.125a1.875 1.875 0 0 1-3.75 0V7.75h1.5v.375a.375.375 0 1 0 .75 0M13 6a2 2 0 0 1 2-2h.75a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2zm2-.5a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h.75a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5zm-5.25.375c0-.207.168-.375.375-.375H11.5V4h-1.375a1.875 1.875 0 0 0 0 3.75.375.375 0 0 1 0 .75H8.5V10h1.625a1.875 1.875 0 0 0 0-3.75.375.375 0 0 1-.375-.375"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymJson.displayName = "AcronymJson";
+
+export { AcronymJson };
+export default AcronymJson;

package/src/components/AcronymMarkdown.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymMarkdown = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 22 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M19.5 2.25h-17c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h17c.69 0 1.25-.56 1.25-1.25v-9c0-.69-.56-1.25-1.25-1.25M2.5 1A2.5 2.5 0 0 0 0 3.5v9A2.5 2.5 0 0 0 2.5 15h17a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 19.5 1zM3 4.5h1.69l.297.324L7 7.02l2.013-2.196.297-.324H11v7H9V7.798L7.737 9.176 7 9.98l-.737-.804L5 7.798V11.5H3v-7M15 8V4.5h2V8h2.5L17 10.5l-1 1-1-1L12.5 8z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymMarkdown.displayName = "AcronymMarkdown";
+
+export { AcronymMarkdown };
+export default AcronymMarkdown;

package/src/components/AcronymPage.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { forwardRef } from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size in px (default: 16). Overrides width/height props. */
+  size?: number | string;
+}
+const AcronymPage = forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 16, width, height, ...props }, ref) => (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width ?? size}
+      height={height ?? size}
+      fill="none"
+      strokeLinejoin="round"
+      viewBox="0 0 28 16"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 2.25h23c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25h-23c-.69 0-1.25-.56-1.25-1.25v-9c0-.69.56-1.25 1.25-1.25M0 3.5A2.5 2.5 0 0 1 2.5 1h23A2.5 2.5 0 0 1 28 3.5v9a2.5 2.5 0 0 1-2.5 2.5h-23A2.5 2.5 0 0 1 0 12.5zm10.5 3.25V8h1V6.75a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25m0 4.25V9.5h1V11H13V6.75A1.75 1.75 0 0 0 11.25 5h-.5A1.75 1.75 0 0 0 9 6.75V11zm-5 0V9h.75A1.75 1.75 0 0 0 8 7.25v-.5A1.75 1.75 0 0 0 6.25 5H4v6zm.75-3.5H5.5v-1h.75a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25M14 7.25A2.25 2.25 0 0 1 16.25 5h.5a2 2 0 0 1 2 2h-1.5a.5.5 0 0 0-.5-.5h-.5a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h.5V8h.75c.69 0 1.25.56 1.25 1.25v.5c0 .69-.56 1.25-1.25 1.25h-1.25A2.25 2.25 0 0 1 14 8.75zM21.75 5A1.75 1.75 0 0 0 20 6.75v2.5c0 .966.784 1.75 1.75 1.75H24V9.5h-2.25a.25.25 0 0 1-.25-.25v-.515H24v-1.5h-2.5V6.75a.25.25 0 0 1 .25-.25H24V5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+);
+AcronymPage.displayName = "AcronymPage";
+
+export { AcronymPage };
+export default AcronymPage;