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.
Color Variants
You can use text color utility classes to set the color of Inkline’s icons.
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