Icon

Inkline comes bundled with a lightweight icon component that provides you with the most commonly used icons.

Basic Example

Here’s an example of the basic icons included with the <i-icon> component.

checkinfowarningdangerchevron-downcaret-downplusminustimescirclesortsort-ascsort-descsearch
<i-icon name="ink-check" />

<i-icon name="ink-info" />

<i-icon name="ink-warning" />

<i-icon name="ink-danger" />

<i-icon name="ink-chevron-down" />

<i-icon name="ink-caret-down" />

<i-icon name="ink-plus" />

<i-icon name="ink-minus" />

<i-icon name="ink-times" />

<i-icon name="ink-circle" />

<i-icon name="ink-sort" />

<i-icon name="ink-sort-asc" />

<i-icon name="ink-sort-desc" />

<i-icon name="ink-search" />

Color Variants

You can use text color utility classes to set the color of Inkline’s icons.

checkcheckcheckcheckcheckcheck
<i-icon name="ink-check" class="_color:primary" />

<i-icon name="ink-check" class="_color:secondary" />

<i-icon name="ink-check" class="_color:info" />

<i-icon name="ink-check" class="_color:success" />

<i-icon name="ink-check" class="_color:warning" />

<i-icon name="ink-check" class="_color:danger" />

Size Variants

You’re able to use the size modifier to control the size of your icon, using one of the available sizes: sm, md, and lg. The default size is set to md.

You can also use text size utility classes to set the size of Inkline’s icons.

checkcheckcheck
<i-icon name="ink-check" size="sm" />

<i-icon name="ink-check" size="md" />

<i-icon name="ink-check" size="lg" />

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    name
    TypeString
    Default''
    Description The icon to be displayed
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the icon

Slots

Use slots to insert custom content into well-defined component locations.

Events

Use events to react to something happening inside the component.

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----size
    Value1rem
    Description The size of the icon component