Icon

---
import { Icon as AstroIcon } from 'astro-icon';

interface Props {
	name: string;
	class?: string;
}

const { name, class: className } = Astro.props;
---

<AstroIcon name={name} class:list={[className]} />

<style>
	svg {
		width: 1em;
		height: 1em;
	}
</style>

This component is available with the Astro Starter Kit.

Supported Icons

This component pulls icons from the src/icons directory. To add more, simply add your icons as individual SVG files to this directory.

Usage

Import the component where you need it. From there, you can pass in the filename (without the extension) of the icon you want to use, like this:

---
import Icon from '@components/Icon.astro';
---

<Icon name="arrow-right" />

Styling

By default, icons are set to be 1em width and height. For one off changes, you can add a class to the icon.

<Icon name="arrow-right" class="w-auto h-6" />

If you want to update the global default, see the component code below. You can update the styles set in the <style> block.