Icon

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

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

Inline Icons

Reusable MDX components for Astro documentation.

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

Check the setup before continuing.

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

Icon Integration

Register the proseflyComponents() integration when a standalone Astro project needs Iconify scanning and preloading.

import { defineConfig } from 'astro/config';
import proseflyComponents from '@prosefly/astro-components/integration';

export default defineConfig({
  integrations: [
    proseflyComponents({
      icons: {
        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.

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

Props