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).

color base brand

size sm md lg

--- 
import { Icon } from 'fulldev-ui'
---

<Icon
  color="base"
  size="md"
  name={"brand-github"}
/>

Props

Prop	Type	Default
color	base | brand	-
size	sm | md | lg	-
name	string	-
text	string	-
html	string	-
as	HTMLTag	i
HTML Attributes	Polymorphic<as>	-

Examples

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

The size prop cascades: it is inherited from the parent and it is applied to all children.

---
import { Icon } from 'fulldev-ui'
---

<Icon size="sm" name="circle" />
<Icon size="md" name="circle" />
<Icon size="lg" name="circle" />