Icon

The icon component provides a consistent way to display icons throughout your Astro projects. It includes a set of predefined icons that you can style using CSS.

Import

To use the icon component, first import it into your project:

---
import { Icon } from 'free-astro-components'
---

Usage

Here’s how you can use the icon component in your Astro project:

Basic Usage

To display an icon, you must use a CSS class to define the icon's size and color.

---
import { Icon } from 'free-astro-components'
---

<Icon icon='star' class="icon-class" />

<style>
  .icon-class {
    width: 2rem;
    height: 2rem;
    color: rgb(64, 93, 255);
  }
<style>

In this example, the icon-class should define the desired size and color for the icon.

Customization

Since the icon component relies on CSS for styling, you can use any CSS properties to style the icons. This includes size, color, margin, etc. Here's an example of a CSS class for customization:

---
import { Icon } from 'free-astro-components'
---

<Icon icon='star' class="icon-small" />
<Icon icon='star' class="icon-medium" />
<Icon icon='star' class="icon-large" />

<style>
  .icon-small {
    width: 1.5rem;
    height: 1.5rem;
    color: rgb(64, 93, 255);
  }

  .icon-medium {
    width: 2rem;
    height: 2rem;
    color: rgb(64, 93, 255);
  }

  .icon-large {
    width: 2.5rem;
    height: 2.5rem;
    color: rgb(64, 93, 255);
  }
<style>

Props

Accessibility

• Labeling: Ensure each icon has an appropriate label for screen readers. Use the aria-label attribute to provide a description of the icon's purpose.

Available Icons

To view the list of all available icons that you can use with this component, please visit the Available Icons . There, you'll find a complete list of icons and examples of how to use them.