Icon
A flexible and customizable component for displaying SVG or font-based icons. Supports various sizes, colors, styles, and shape options to fit different UI needs.
Use the <Icon /> component by specifying the icon name via the icon prop. The icon should exist in your project’s SVG folder.
vue
<Icon icon="heart" color="red" size="lg"/>Component API
| Name | Type | Required | Description |
|---|---|---|---|
icon | string | Yes | Array of icon objects to display |
size | string | No | Size of the icon. Can be a number (pixels) or a size keyword (xs, sm, md, lg, xl) |
color | string | No | Color of the icon. Multiple colors can be passed separated by commas; the first is used |
class | string | No | Additional CSS classes for the icon component |
Sizes
The size prop controls the overall dimensions of the icon and its container. Use predefined size keywords: xs, sm, md, lg, xl.
vue
<Icon icon="heart" size="md"/> <!-- xs, sm, md, lg, xl, numbers -->Colors
The color prop sets the icon’s visual theme. It works in combination with the type prop to define appearance, background, and text colors.
vue
<Icon icon="heart" color="red"/> <!-- #ffffff, red, blue, rgb(255 255 255)-->