Components
Icon
54 inline SVG stroke icons. They inherit the current text color, so no icon font is needed.
import { IconComponent, iconNames, type IconName } from '@/MigsLab/shared'
Available icons
Click an icon to copy its markup.
Size, color and spin
<IconComponent name="star" :size="24" />
<IconComponent name="heart" :size="24" class="color-red-3" />
<IconComponent name="loader" :size="24" spin />
<ButtonComponent rounded>
<IconComponent name="plus" />
New record
</ButtonComponent>Adding an icon
Add the name to IconName in types/index.ts and its 24×24 path data to components/icon/IconPaths.ts. Use the Circle() helper there for circles.
// types/index.ts
export type IconName = ... | 'phone'
// components/icon/IconPaths.ts
'phone': ['M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'],
'target': [Circle(12, 12, 10), Circle(12, 12, 6), Circle(12, 12, 2)]API
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | IconName | — | Which icon to draw. |
size | number | 16 | Width and height in pixels. |
strokeWidth | number | 2 | SVG stroke width. |
spin | boolean | false | Rotate continuously, e.g. for the loader icon. |