src/components/icon/Icon.ts:
class: Icon, btu-icon
Superclass
| Name | Module | Package |
|---|---|---|
LitElement | lit |
Mixins
| Name | Module | Package |
|---|---|---|
EventEmitterMixin | /src/util/EventEmitterMixin.js | |
ReadyMixin | /src/util/ReadyMixin.js |
Static Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
tagName |
Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the icon. - 'xs': Extra small (0.75rem) - 'sm': Small (1rem) - 'md': Medium (1.25rem, default) - 'lg': Large (1.5rem) - 'xl': Extra large (1.75rem) | ||
symbol | string | 'circle-dashed' | Lucide icon name to display. See https://lucide.dev/icons/ for available icons. | ||
gradient | 'ai' | 'error' | 'gray' | 'primary' | 'purple' | 'rose' | 'success' | 'teal' | 'warning' | undefined | Theme color to use for gradient fill. When set, icon displays with gradient. When undefined, icon inherits parent text color. |
Events
| Name | Type | Description | Inherited From |
|---|---|---|---|
btu-icon-ready | CustomEvent | Fired after first render and initialization |
Attributes
| Name | Field | Inherited From |
|---|---|---|
size | size | |
symbol | symbol | |
gradient | gradient |
CSS Properties
| Name | Default | Description |
|---|---|---|
--Icon-size | Icon size (overrides size default) | |
--Icon-fill | Icon fill color for filled icons (e.g., "currentColor") | |
--Icon-svg | SVG data URI for mask-based rendering |
Exports
| Kind | Name | Declaration | Module | Package |
|---|---|---|---|---|
js | default | Icon | src/components/icon/Icon.ts | |
custom-element-definition | btu-icon | Icon | src/components/icon/Icon.ts |