Skip to content

Icon

Displays a fully customizable inline svg icon.

While currently only Tabler Icons are supported, this component does not need any integration or setup.

If you want to use more different icons, we advise you to use the awesome astro-icon package (which does require an Astro integration setup though).


---
import { Icon } from 'fulldev-ui'
---
<Icon name="circle" />

Props

name

Type: name?: [TABLER ICON NAME]

For all available icons see https://tablericons.com/.

---
import { Icon } from 'fulldev-ui'
---
<Icon name="circle" />
<Icon name="arrow-right" />
<Icon name="brand-x" />
<Icon name="brand-github" />

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.

---
import { Icon } from 'fulldev-ui'
---
<Icon size="sm" name="circle" />
<Icon size="md" name="circle" />
<Icon size="lg" name="circle" />

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

---
import { Icon } from 'fulldev-ui'
---
<Icon density="compact" size="sm" name="circle" />
<Icon density="compact" size="md" name="circle" />
<Icon density="compact" size="lg" name="circle" />

variant

Type: color?: 'base' | 'muted'

Sets the color variant used for this component and all its children.

---
import { Icon } from 'fulldev-ui'
---
<Icon variant="base" name="circle" />
<Icon variant="muted" name="circle" />

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

as & HTML Attributes

Type: as?: HTMLTag = 'i'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.