# Icon

Render Iconify icons in Astro and MDX content.

import { Callout, Icon } from '@prosefly/astro-components';

Use `Icon` for small visual cues in content: card icons, inline labels, and
status descriptions. Use the `prefix:name` format from Iconify, such as
`lucide:sparkles` or `simple-icons:github`.

## Import

```mdx
import { Icon } from '@prosefly/astro-components';
```

## Inline Icons

<p><Icon name="lucide:sparkles" /> Reusable MDX components for Astro documentation.</p>

```mdx
<p><Icon name="lucide:sparkles" /> Reusable MDX components for Astro documentation.</p>
```

## Accessible Icons

Decorative icons are hidden from assistive technology by default. Add `title`
when the icon itself carries meaning.

<p><Icon name="lucide:triangle-alert" title="Warning" /> Check the setup before continuing.</p>

```mdx
<p><Icon name="lucide:triangle-alert" title="Warning" /> Check the setup before continuing.</p>
```

## Icon Integration

Use `@prosefly/astro-components/icon` when a project wants Iconify preloading
without [Lotus](https://astro-theme-lotus.prosefly.dev/).

```ts title="astro.config.ts"
import { defineConfig } from 'astro/config';
import proseflyIcon from '@prosefly/astro-components/icon';

export default defineConfig({
  integrations: [
    proseflyIcon({
      preload: ['lucide:sparkles', 'simple-icons:github'],
    }),
  ],
});
```

The integration always includes icons used internally by the package components.
It also scans `src/**/*.astro`, `src/**/*.md`, and `src/**/*.mdx` for static
`name` and `icon` prop values by default. Add dynamic icon names to `preload`,
because the scanner only sees literal strings.

| Option | Type | Default |
| --- | --- | --- |
| `preload` | `string[]` | `[]` |
| `scan` | `boolean` | `true` |
| `apiBase` | `string` | `https://api.iconify.design` |

Set `scan: false` when a site should preload only the icons listed in
`preload`, or set `apiBase` to use an internal Iconify-compatible endpoint.

<Callout type="note" title="Lotus default">
  [Lotus](https://astro-theme-lotus.prosefly.dev/) registers the icon
  integration and scans `src/**/*.astro`, `src/**/*.md`, and `src/**/*.mdx` for
  static icon names.
</Callout>

## Props

| Prop | Type | Default |
| --- | --- | --- |
| `name` | `string` | required |
| `title` | `string` | none |
| `size` | `number \| string` | none |
| `width` | `number \| string` | `size ?? '1em'` |
| `height` | `number \| string` | `size ?? '1em'` |
| `apiBase` | `string` | `https://api.iconify.design` |