@truenas/ui-components 0.1.47 → 0.1.48

package/README.md

@@ -133,7 +133,8 @@ npm run icons
 ```
 
 This will:
-- Scan your templates for `<tn-icon>` elements
+- Scan your templates for `<tn-icon>` and `<tn-icon-button>` elements
+- Detect icons passed to forwarding components (e.g., `<tn-empty icon="inbox">`)
 - Detect icons marked with `tnIconMarker()` in TypeScript
 - Generate `src/assets/icons/sprite.svg` with only used icons
 - Create `src/assets/icons/sprite-config.json` with manifest
@@ -195,6 +196,32 @@ export class MyComponent {
 }
 ```
 
+### Icon Forwarding Components
+
+Some library components accept icon inputs and forward them to an internal `<tn-icon>`. The sprite generator automatically detects icons passed to these components:
+
+```html
+<!-- These icons are automatically included in the sprite -->
+<tn-empty icon="inbox" iconLibrary="mdi" title="No messages"></tn-empty>
+<tn-input prefixIcon="search" prefixIconLibrary="mdi"></tn-input>
+<tn-chip icon="star"></tn-chip>
+```
+
+No `tnIconMarker()` is needed for static icon attributes on forwarding components.
+
+The library ships a `forwarding-mappings.json` manifest that tells the scanner which components forward icons. If your app has its own forwarding components, you can create a `forwarding-mappings.json` in your source directory:
+
+```json
+[
+  {
+    "selector": "app-status-badge",
+    "iconSlots": [
+      { "iconAttribute": "icon", "libraryAttribute": "iconLibrary", "defaultLibrary": "mdi" }
+    ]
+  }
+]
+```
+
 ### Custom Icons
 
 1. **Create a directory for your custom SVG icons:**

package/assets/tn-icons/forwarding-mappings.json

@@ -0,0 +1,33 @@
+[
+  {
+    "selector": "tn-empty",
+    "iconSlots": [
+      {
+        "iconAttribute": "icon",
+        "libraryAttribute": "iconLibrary",
+        "defaultLibrary": "mdi"
+      }
+    ]
+  },
+  {
+    "selector": "tn-input",
+    "iconSlots": [
+      {
+        "iconAttribute": "prefixIcon",
+        "libraryAttribute": "prefixIconLibrary"
+      },
+      {
+        "iconAttribute": "suffixIcon",
+        "libraryAttribute": "suffixIconLibrary"
+      }
+    ]
+  },
+  {
+    "selector": "tn-chip",
+    "iconSlots": [
+      {
+        "iconAttribute": "icon"
+      }
+    ]
+  }
+]