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.

HTML

<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.

HTML

<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.

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