feat(icons): allow 3rd party packages to provide icon names for auto completion

jgroth · jgroth · commit fdcc416ff12e · 2026-03-03T10:01:34.000+01:00
fix Lundalogik/crm-client#622
diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
diff --git a/src/components/action-bar/action-bar.types.ts b/src/components/action-bar/action-bar.types.ts
@@ -1,4 +1,4 @@
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
 
 /**
@@ -16,7 +16,7 @@ export type ActionBarItem<T = any> =
  */
 export interface ActionBarItemOnlyIcon<T> extends MenuItem<T> {
     iconOnly: true;
-    icon: string | Icon;
+    icon: IconName | Icon;
 }
 
 /**
diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
@@ -1,4 +1,5 @@
 import { Component, h, Method, Prop, State } from '@stencil/core';
+import { IconName } from '../../global/shared-types/icon.types';
 
 /**
  * @exampleComponent limel-example-banner
@@ -20,7 +21,7 @@ export class Banner {
      * Set icon for the banner
      */
     @Prop({ reflect: true })
-    public icon: string;
+    public icon: IconName;
 
     @State()
     private isOpen = false;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -3,7 +3,7 @@ import {
     makeEnterClickable,
     removeEnterClickable,
 } from '../../util/make-enter-clickable';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { getIconName, getIconTitle } from '../icon/get-icon-props';
 
 /**
@@ -47,7 +47,7 @@ export class Button {
      * Set icon for the button
      */
     @Prop({ reflect: true })
-    public icon: string | Icon;
+    public icon: IconName | Icon;
 
     /**
      * Set to `true` to disable the button.
@@ -149,7 +149,7 @@ export class Button {
         ];
     }
 
-    private renderIcon(icon?: string | Icon) {
+    private renderIcon(icon?: IconName | Icon) {
         const iconName = getIconName(icon);
         if (!iconName) {
             return;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -9,7 +9,7 @@ import {
     State,
 } from '@stencil/core';
 import { Image } from '../../global/shared-types/image.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { isItem } from '../action-bar/is-item';
 import { getIconName } from '../icon/get-icon-props';
 import { ListSeparator } from '../../global/shared-types/separator.types';
@@ -62,7 +62,7 @@ export class Card {
      * An icon, to display along with the heading and subheading.
      */
     @Prop({ reflect: true })
-    public icon?: string | Icon;
+    public icon?: IconName | Icon;
 
     /**
      * The content of the card.
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
@@ -19,6 +19,7 @@ import { getHref, getTarget } from '../../util/link-helper';
 import { isEqual } from 'lodash-es';
 import { LimelChipCustomEvent } from '../../components';
 import { createRandomString } from '../../util/random-string';
+import { IconName } from '../../global/shared-types/icon.types';
 
 /**
  * :::note
@@ -169,7 +170,7 @@ export class ChipSet {
      * Leading icon to show to the far left in the text field
      */
     @Prop({ reflect: true })
-    public leadingIcon: string = null;
+    public leadingIcon: IconName = null;
 
     /**
      * For chip-set of type `input`. Sets delimiters between chips.
diff --git a/src/components/chip-set/chip.types.ts b/src/components/chip-set/chip.types.ts
@@ -1,5 +1,5 @@
 import { Image } from '../../global/shared-types/image.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
 import { ListSeparator } from '../list-item/list-item.types';
 import { Color } from '../../global/shared-types/color.types';
@@ -21,7 +21,7 @@ export interface Chip<T = any> {
     /**
      * Name of the icon to use. Not valid for `filter`.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 
     /**
      * A picture to be displayed instead of the icon on the chip.
diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
@@ -7,7 +7,7 @@ import {
     Host,
     Prop,
 } from '@stencil/core';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { Languages } from '../date-picker/date.types';
 import { Link } from '../../global/shared-types/link.types';
 import { getRel } from '../../util/link-helper';
@@ -106,7 +106,7 @@ export class Chip implements ChipInterface {
      * Icon of the chip.
      */
     @Prop()
-    public icon?: string | Icon;
+    public icon?: IconName | Icon;
 
     /**
      * A picture to be displayed instead of the icon on the chip.
diff --git a/src/components/collapsible-section/collapsible-section.tsx b/src/components/collapsible-section/collapsible-section.tsx
@@ -13,7 +13,7 @@ import {
     removeEnterClickable,
 } from '../../util/make-enter-clickable';
 import { createRandomString } from '../../util/random-string';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import {
     getIconColor,
     getIconName,
@@ -65,7 +65,7 @@ export class CollapsibleSection {
      * Icon to display in the header of the section
      */
     @Prop()
-    public icon?: string | Icon;
+    public icon?: IconName | Icon;
 
     /**
      * `true` if the section is invalid, `false` if valid.
diff --git a/src/components/dialog/dialog.types.ts b/src/components/dialog/dialog.types.ts
@@ -1,4 +1,4 @@
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 
 /**
  * @public
@@ -7,7 +7,7 @@ export interface DialogHeading {
     title: string;
     subtitle?: string;
     supportingText?: string;
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 }
 
 /**
diff --git a/src/components/dock/dock.types.ts b/src/components/dock/dock.types.ts
@@ -1,3 +1,5 @@
+import { IconName } from '../../global/shared-types/icon.types';
+
 /**
  * @public
  */
@@ -15,7 +17,7 @@ export interface DockItem {
     /**
      * Name of the icon to use.
      */
-    icon: string;
+    icon: IconName;
 
     /**
      * Additional helper text for the dock item.
diff --git a/src/components/dynamic-label/dynamic-label.tsx b/src/components/dynamic-label/dynamic-label.tsx
@@ -1,7 +1,7 @@
 import { getIconName } from '../icon/get-icon-props';
 import { Component, Prop, h } from '@stencil/core';
 import { Label, LabelValue } from './label.types';
-import { Icon } from '../../interface';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 
 /**
  * This components displays a different label depending on the current given
@@ -59,7 +59,7 @@ export class DynamicLabel {
         ];
     }
 
-    private renderIcon(icon?: string | Icon) {
+    private renderIcon(icon?: IconName | Icon) {
         const iconName = getIconName(icon);
         if (!iconName) {
             return;
diff --git a/src/components/dynamic-label/label.types.ts b/src/components/dynamic-label/label.types.ts
@@ -1,4 +1,4 @@
-import { Icon } from '../../interface';
+import { IconName, Icon } from '../../interface';
 
 export type LabelValue = string | number | boolean | null | undefined;
 
@@ -22,5 +22,5 @@ export interface Label<T = LabelValue> {
     /**
      * Icon to display when the label is active
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 }
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,5 +1,5 @@
 import { Component, h, Prop, Host } from '@stencil/core';
-import { Icon } from '../../global/shared-types/icon.types';
+import { IconName, Icon } from '../../global/shared-types/icon.types';
 import { getIconName } from '../icon/get-icon-props';
 
 /**
@@ -64,7 +64,7 @@ export class Header {
      * Icon to display
      */
     @Prop()
-    public icon?: string | Icon;
+    public icon?: IconName | Icon;
 
     /**
      * Title to display
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
@@ -4,7 +4,7 @@ import {
     removeEnterClickable,
 } from '../../util/make-enter-clickable';
 import { createRandomString } from '../../util/random-string';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { getIconName, getIconTitle } from '../icon/get-icon-props';
 
 /**
@@ -25,7 +25,7 @@ export class IconButton {
      * The icon to display.
      */
     @Prop()
-    public icon: string | Icon;
+    public icon: IconName | Icon;
 
     /**
      * Set to `true` to give the button our standard "elevated" look, lifting
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
@@ -27,6 +27,7 @@ import { JSXBase } from '@stencil/core/internal';
 import { createRandomString } from '../../util/random-string';
 import { LimelListCustomEvent } from '../../components';
 import { globalConfig } from '../../global/config';
+import { IconName } from '../../global/shared-types/icon.types';
 
 interface LinkProperties {
     href: string;
@@ -134,13 +135,13 @@ export class InputField {
      * Trailing icon to show to the far right in the field.
      */
     @Prop({ reflect: true })
-    public trailingIcon: string;
+    public trailingIcon: IconName;
 
     /**
      * Leading icon to show to the far left in the field.
      */
     @Prop({ reflect: true })
-    public leadingIcon: string;
+    public leadingIcon: IconName;
 
     /**
      * Regular expression that the current value of the input field must match.
diff --git a/src/components/list-item/list-item.types.ts b/src/components/list-item/list-item.types.ts
@@ -1,5 +1,5 @@
 import { ListSeparator } from '../../global/shared-types/separator.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
 import { Image } from '../../global/shared-types/image.types';
 import { Color } from '../../global/shared-types/color.types';
@@ -27,7 +27,7 @@ export interface ListItem<T = any> {
     /**
      * Icon of the list item.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 
     /**
      * Background color of the icon. Overrides `--icon-background-color`.
diff --git a/src/components/menu/menu.types.ts b/src/components/menu/menu.types.ts
@@ -1,5 +1,5 @@
 import { ListSeparator } from '../../global/shared-types/separator.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { Color } from '../../global/shared-types/color.types';
 
 /**
@@ -79,7 +79,7 @@ export interface MenuItem<T = any> {
     /**
      * Name of the icon to use.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 
     /**
      * Background color of the icon. Overrides `--icon-background-color`.
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -23,6 +23,7 @@ import {
 import { getIconFillColor, getIconName } from '../icon/get-icon-props';
 import { PickerValue } from './value.types';
 import { DebouncedFunc, debounce } from 'lodash-es';
+import { IconName } from '../../global/shared-types/icon.types';
 
 const SEARCH_DEBOUNCE = 300;
 const CHIP_SET_TAG_NAME = 'limel-chip-set';
@@ -81,7 +82,7 @@ export class Picker {
      * Leading icon to show to the far left in the text field
      */
     @Prop()
-    public leadingIcon: string;
+    public leadingIcon: IconName;
 
     /**
      * A message to display when the search returned an empty result
diff --git a/src/components/profile-picture/profile-picture.tsx b/src/components/profile-picture/profile-picture.tsx
@@ -10,7 +10,7 @@ import {
 } from '@stencil/core';
 import { FileInfo } from '../../global/shared-types/file.types';
 import { isTypeAccepted } from '../../util/files';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 import { getIconName } from '../icon/get-icon-props';
 import translate from '../../global/translations';
 import { Languages } from '../date-picker/date.types';
@@ -60,7 +60,7 @@ export class ProfilePicture {
      * Placeholder icon of the component, displayed when no image is present.
      */
     @Prop()
-    public icon: string | Icon = 'user';
+    public icon: IconName | Icon = 'user';
 
     /**
      * Helper text shown as a tooltip on hover or focus.
diff --git a/src/components/select/option.types.ts b/src/components/select/option.types.ts
@@ -1,5 +1,5 @@
 import { Color } from '../../global/shared-types/color.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 /**
  * Describes an option for limel-select.
  * @public
@@ -37,7 +37,7 @@ export interface Option<T extends string = string> {
     /**
      * Displays an icon beside the name of the option.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 
     /**
      * Adds a color to the icon.
diff --git a/src/components/shortcut/shortcut.tsx b/src/components/shortcut/shortcut.tsx
@@ -2,6 +2,7 @@ import { Component, Prop, h, Element, Host } from '@stencil/core';
 import { Link } from '../../global/shared-types/link.types';
 import { getRel } from '../../util/link-helper';
 import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
+import { IconName } from '../../global/shared-types/icon.types';
 
 /**
  * This component can be used on places such as a start page or a dashboard.
@@ -28,7 +29,7 @@ export class Shortcut {
      * Name of icon for the shortcut.
      */
     @Prop({ reflect: true })
-    public icon: string;
+    public icon: IconName;
 
     /**
      * The text to show below the shortcut. Long label will be truncated.
diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx
@@ -1,6 +1,7 @@
 import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';
 import { ListSeparator } from '../list-item/list-item.types';
 import { MenuItem } from '../menu/menu.types';
+import { IconName } from '../../global/shared-types/icon.types';
 
 /**
  * A split button is a button with two components:
@@ -41,7 +42,7 @@ export class SplitButton {
      * Set icon for the button
      */
     @Prop({ reflect: true })
-    public icon: string;
+    public icon: IconName;
 
     /**
      * Set to `true` to disable the button.
diff --git a/src/components/tab-bar/tab.types.ts b/src/components/tab-bar/tab.types.ts
@@ -1,5 +1,5 @@
 import { Color } from '../../global/shared-types/color.types';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from '../../global/shared-types/icon.types';
 
 /**
  * Tab interface.
@@ -19,7 +19,7 @@ export interface Tab {
     /**
      * Name of the icon to use.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
 
     /**
      * True if the tab should be selected.
diff --git a/src/global/shared-types/file.types.ts b/src/global/shared-types/file.types.ts
diff --git a/src/global/shared-types/icon.types.ts b/src/global/shared-types/icon.types.ts
