Importing the Component

You can import the FancyList component to use it.

---
import { FancyList } from '@splendidlabz/astro'
---

<FancyList ... />

Using emoji bullets

You can use emoji to create lists with emoji bullets.

<FancyList
  emoji="👏"
  items={['Bullet 1', 'Bullet 2', 'Bullet 3', 'Bullet 4']}
/>

Using SVG Icons

You can use icon to create lists with SVG icons. Please see SVG to understand how icon works.

<FancyList
  icon="ph:check"
  items={['Bullet 1', 'Bullet 2', 'Bullet 3', 'Bullet 4']}
/>

Using different icons or emojis for each item

Pass in an array of objects into items. Each object should take in an emoji or icon property for the bullet and a value property for the text value.

<FancyList
  items={[
    { emoji: '⭐', value: 'Star Emoji' },
    { icon: 'ph:star', value: 'Star Icon' },
  ]}
/>

Markdown Support

FancyList supports Markdown by using the Markdown component. Just pass any valid markdown into items and they will be converted into Markdown content.

<FancyList
  icon="ph:check"
  items={[
    '**Write**',
    '_items_',
    'in',
    '[markdown](https://daringfireball.net/projects/markdown/)',
  ]}
/>

Alternatively, you can also write markdown directly as the slot content. Take note that if you do this, you may need to use prettier-ignore as mentioned on the Markdown component.

<!-- prettier-ignore -->
<FancyList icon="ph:check">
  - **Write**
  - _items_
  - in
  - [markdown](https://daringfireball.net/projects/markdown/)
</FancyList>