create-quilltap-theme 2.0.10 → 2.0.11

package/dist/index.js

@@ -123,6 +123,24 @@ async function scaffoldBundle(config) {
     "utf-8"
   );
   success("Created fonts/");
+  const iconsDir = path.join(destPath, "icons");
+  fs.mkdirSync(iconsDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(iconsDir, ".gitkeep"),
+    [
+      "# Place icon override assets here (.svg or .webp) and map them in theme.json:",
+      "#",
+      '#   "icons": {',
+      '#     "settings": "icons/settings.svg",   // .svg keeps currentColor tinting',
+      '#     "brand": "icons/brand.webp"          // .webp bakes in its own color',
+      "#   }",
+      "#",
+      "# Icon names must match Quilltap's built-in icon names. Unmatched names are ignored.",
+      ""
+    ].join("\n"),
+    "utf-8"
+  );
+  success("Created icons/");
   heading("Done! Next steps:");
   log(`  ${colors.dim}# Edit your theme:${colors.reset}`);
   log(`  ${colors.cyan}cd ${config.themeId}${colors.reset}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quilltap-theme",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Scaffold a new Quilltap theme plugin",
   "main": "dist/index.js",
   "bin": {

package/templates/bundle/README.md.template

@@ -14,6 +14,7 @@ This is a `.qtap-theme` bundle — a simple directory (or zip archive) containin
 ├── tokens.json     # Design tokens (colors, typography, spacing, effects)
 ├── styles.css      # CSS overrides (optional)
 ├── fonts/          # Custom font files (optional)
+├── icons/          # Icon override assets (optional)
 └── README.md       # This file
 ```
 
@@ -24,6 +25,29 @@ This is a `.qtap-theme` bundle — a simple directory (or zip archive) containin
 - **Spacing/Radius**: Edit `tokens.json` → `spacing` section
 - **Component styles**: Edit `styles.css` for custom CSS overrides
 - **Custom fonts**: Add `.woff2` files to `fonts/` and reference them in `theme.json`
+- **Custom icons**: Add `.svg` or `.webp` files to `icons/` and map them in `theme.json` (see below)
+
+## Custom icons
+
+Quilltap renders its UI icons through a central registry, so a theme can replace
+any of them. Drop replacement assets into `icons/` and add an `icons` map to
+`theme.json`, keyed by Quilltap's built-in icon name:
+
+```json
+{
+  "icons": {
+    "settings": "icons/settings.svg",
+    "brand": "icons/brand.webp"
+  }
+}
+```
+
+- **`.svg` overrides** are tinted by the current text color, exactly like the
+  built-in icons — good for monochrome glyphs that should follow the theme.
+- **`.webp` overrides** are drawn in full color — good for textured or
+  multi-color marks (the `brand` quill is always drawn in full color).
+- Icon names must match Quilltap's built-in names; unknown names are ignored.
+  Run `quilltap themes validate` to catch typos and bad asset paths.
 
 ## Installing
 

package/templates/stories/Components.stories.tsx.template

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import {
   ColorPalette,
+  Icons,
   Typography,
   Spacing,
   Buttons,
@@ -23,6 +24,12 @@ export const Colors: StoryObj = {
   render: () => <ColorPalette />,
 };
 
+// Icons
+export const IconReference: StoryObj = {
+  name: 'Icons',
+  render: () => <Icons />,
+};
+
 // Typography
 export const Fonts: StoryObj = {
   name: 'Typography',