diff --git a/change/@ni-nimble-components-e24ccafe-f3e9-4a34-bd19-7696fb0d00d1.json b/change/@ni-nimble-components-e24ccafe-f3e9-4a34-bd19-7696fb0d00d1.json new file mode 100644 index 0000000000..7142bdd521 --- /dev/null +++ b/change/@ni-nimble-components-e24ccafe-f3e9-4a34-bd19-7696fb0d00d1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "HLD draft for non-nimble icons in the table", + "packageName": "@ni/nimble-components", + "email": "5265744+hellovolcano@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/change/@ni-ok-components-fcf4988c-1c17-46a4-a0c0-381fc8974f5a.json b/change/@ni-ok-components-fcf4988c-1c17-46a4-a0c0-381fc8974f5a.json new file mode 100644 index 0000000000..daca221adc --- /dev/null +++ b/change/@ni-ok-components-fcf4988c-1c17-46a4-a0c0-381fc8974f5a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "HLD draft for non-nimble icons in the table", + "packageName": "@ni/ok-components", + "email": "5265744+hellovolcano@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/ok-components/src/mapping/dynamic-icon/specs/custom-icons-hld.md b/packages/ok-components/src/mapping/dynamic-icon/specs/custom-icons-hld.md new file mode 100644 index 0000000000..ed8bbc245c --- /dev/null +++ b/packages/ok-components/src/mapping/dynamic-icon/specs/custom-icons-hld.md @@ -0,0 +1,62 @@ +# High Level Design: Support for Custom Icons + +## Problem Statement + +The current nimble icon system has the `Icon` class handling both general icon functionality and SVG-specific functionality. This limits extensibility for other icon types, like PNG. + +This design introduces a separation between base icon functionality and SVG-specific icon implementations and can be extended to support custom icon types. It also introduces a new component in Ok to render icons dynamically. + +## Links To Relevant Work Items and Reference Material + +- [GitHub PR #2814: SVGIcon prototype](https://github.com/ni/nimble/pull/2814) + +## Implementation / Design + +### Class Hierarchy Changes + +``` +Icon (base class with severity, etc.) +├── SvgIcon (extends Icon, handles SVG data) - Class for Nimble Icons +└── DynamicIcon (extends Icon, dynamically register custom icons) +``` + +### API Changes + + - Rename `registerIcon()` to `registerSvgIcon()` + - Update type signature to accept `typeof SvgIcon` instead of generic type + +### New Component: Ok Dynamic Icon +A component that enables dynamic registration and usage of custom icons from URLs (data URLs, external URLs, etc.) following the same patterns as standard nimble icons. + +#### API +- **registerDynamicIcon(name: string, src: string)**: Registers a new dynamic icon +- **getDynamicIconTag(name: string)**: Returns the custom element tag name for a registered icon +- **Generated Custom Elements**: Each registered icon creates its own custom element (e.g., ``) + +#### Usage Example +```javascript +// Registration +registerDynamicIcon('rumham', 'data:image/png;base64,...'); + +// Usage in HTML +const tag = getDynamicIconTag('rumham'); // Returns 'ok-dynamic-icon-rumham' +// +``` + +#### Blazor Integration +Provide a Blazor wrapper component that handles JavaScript interop for icon registration and returns the appropriate custom element tag for use in Blazor applications. + +**Usage in Blazor:** +```html + +``` + +The component automatically registers the icon and renders the corresponding custom element (e.g., ``) using the OkDynamicIcon.register method accessed through OkBlazor.module.js. + +## Alternative Implementations / Designs + +1. **Create a new table column mapping in Ok**: Would require significant duplication of nimble table column components, and introduce a circular dependency. + +## Open Issues + +N/A \ No newline at end of file