module-element-icons

Configure icons on stereotype definitions and custom element types in Intent Architect designers.

23|10|Updated Aug 31, 2017
One-click install
npx skills add https://github.com/IntentArchitect/Intent.Modules --skill module-element-icons-intentarchitect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: module-element-icons
Source: https://github.com/IntentArchitect/Intent.Modules/tree/main/Tests/ModuleBuilderSkills/.opencode/skills/module-element-icons
Command: npx skills add https://github.com/IntentArchitect/Intent.Modules --skill module-element-icons-intentarchitect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting a distinct icon on a stereotype or custom element type in an Intent Architect designer involves two different configuration mechanisms that are easy to confuse, and bespoke SVG icons require base64 payloads that are error-prone to handle by hand. ## Core Features & Use Cases - Stereotype Icons: Set a structural icon (FontAwesome name or data URI) on a stereotype definition, with displayIcon and displayIconFunction controlling when the badge renders. - Element Type Icons: Configure Icon, Expanded Icon, and Icon Function on the Settings stereotype of an Element Settings or Core Type node. - Bespoke SVG Icons: Craft an SVG following the shared house style, encode it to a base64 data URI via script, and apply it through run_designer_script without the payload passing through the AI's context. - Use Case: You define a custom element type in the Module Builder designer and want it to show a distinct icon in the model tree; this Skill sets the Icon property and regenerates the .designer.settings via the Software Factory. ## Quick Start Set a FontAwesome icon on my stereotype definition in the Module Builder designer and run the Software Factory so it appears in the generated designer settings.

Frequently Asked Questions about module-element-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set an icon on a stereotype in Intent Architect?▼

Set the icon directly on the stereotype definition as a type/source pair: a FontAwesome type takes an icon name like "cogs", while a UrlImagePath type takes a base64 data URI. Use displayIcon to control whether the badge renders, and displayIconFunction only for genuinely conditional display.

How do I set an icon on a custom element type in the Module Builder designer?▼

Set the Icon property on the Settings stereotype carried by the Element Settings or Core Type node. Use the static Icon property unless the icon genuinely varies per element, in which case Icon Function returns an icon per element and falls back to the default when it returns null.

What is the difference between module-element-icons and module-svg-icon?▼

module-element-icons sets icons on stereotypes and element types you define in a designer, while module-svg-icon sets the module's own package icon shown in the module registry. The package icon lives in the module's .application.config as a root-level icon/iconType pair, which is a different file and mechanism.

Why does my bespoke SVG icon render blank in the designer?▼

Blank icons usually result from a corrupted base64 payload caused by reading, echoing, or copying the encoded string by hand. Compute the base64 with a shell script and apply it via run_designer_script using includedScriptPaths so the payload never passes through manual transcription.

When should I use Icon Function instead of a static Icon?▼

Use Icon Function only when the icon genuinely varies per element based on its own state, since the function is re-evaluated as the model changes and is harder to reason about. Returning null from the function falls back to the default icon by design.