Icon
We use Tabler Icons under the hood, you can use any of those icons by having the name prop match one of the icon names.
---
import Icon from 'fulldev-ui/components/Icon.astro'
---
<Icon name="code" color="brand" size="lg" />
Props
| Prop | Type | Default |
|---|---|---|
| color | 'base' | 'brand' | undefined | - |
| contrast | boolean | undefined | - |
| name | string | undefined | - |
| as | HTMLTag | i |
| HTML Attributes | Polymorphic<i> | - |
Examples
---
import Icon from 'fulldev-ui/components/Icon.astro'
---
<Icon name="circle" />
<Icon name="arrow-right" />
<Icon name="brand-x" />
<Icon name="brand-github" />
---
import Icon from 'fulldev-ui/components/Icon.astro'
---
<Icon size="sm" name="circle" />
<Icon size="md" name="circle" />
<Icon size="lg" name="circle" />
---
import Icon from 'fulldev-ui/components/Icon.astro'
---
<Icon color="base" name="circle" />
<Icon color="brand" name="circle" />