Mixins / foldkit-mixins-ui

Icon

namespace · packages/mixins-ui/src/icon.ts:1

export * as Icon from './icon.js'

In the guides

Members

Icon.IconSlots

const · packages/mixins-ui/src/icon.ts:11

const IconSlots: Slots.Contract<{
  readonly glyph: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

An icon publishes one slot; it owns no state, messages, or bundles. A label makes it an image. Without one it is decorative and hidden from the accessibility tree. Icons.glyph is the other tool: a mask on an element that already exists.

Icon.IconView

interface · packages/mixins-ui/src/icon.ts:19

interface IconView<Message = never> {
  readonly content: Html
  readonly label?: string | undefined
  readonly style?: NamedStyle<typeof IconSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

An icon in one call: the drawing it holds, the name it has when it means something, a style for its slot, and mixins beside the style.

Icon.view

function · packages/mixins-ui/src/icon.ts:29

function view<Message = never>(
  options: IconView<Message>,
  h: HtmlBuilder<Message>,
): Html