Icon Circle
A flexible and customizable Vue 3 component for displaying SVG-based icons from a local set. It supports configurable size, color, rounding, and background style using multiple appearance variants.
Use the IconCircle component by providing an icon name via the icon prop. Optionally, you can customize the appearance using props like type, color, size, or rounded.
<IconCircle icon="heart" type="outline"/>Component API
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | — | Required. Name of the icon (filename without .svg) |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the icon and circle wrapper |
color | 'black' | 'grey' | 'teal' | 'blue' | 'red' | 'white' | 'yellow' | 'blue' | Color scheme used in combination with type prop |
type | 'solid' | 'outline' | 'ghost' | 'soft' | 'soft-outlined' | 'ghost' | Appearance variant: background, borders, or just color |
rounded | 'full' | 'sm' | 'md' | 'lg' | 'full' | Controls how rounded the icon background circle is |
Sizes
Control the icon's size using the size prop. Available values are sm, md, and lg. Each value changes both the icon and the circular container size.
<IconCircle icon="heart" type="outline" size="sm"/> <!-- sm, md, ld-->Colors
he color prop controls the theme color of the icon. It affects text, background, or border depending on the selected type. Dark mode styles are also supported.
<Icon icon="heart" type="outline" color="blue" /> <!--- grey,red,yellow -->WARNING
Type soft not allow rgba color
Types
Customize the visual style of the icon using the type prop. Enum: solid outline ghost soft soft-outlined. Different styles include solid backgrounds, borders, soft fills, or no background at all.
<Icon icon="heart" type="outline"/> <!-- solid, outline, ghost, soft -->Rounded
The rounded prop defines the border-radius of the circle container. Use it to adjust how sharp or round the icon background looks.
<Icon icon="heart" type="outline" rounded="sm"/> <!--- sm, md, lg, full -->