Feature request: Astro support

[Stephan Sahm]

It would be nice to use unplugin-icons as the go-to icon solution also in astro.

Background: I am using astro as my static site builder and I didn't manage to use icons from unplugin-icons in my astro-files.

[Michael Stramel]

Just for clarity:

Since Astro allows for multiple different UI Framework integrations, you can really pick whichever compiler you would want to use.

For example, if you were to be using the solidjs integration (like in #215), you could use the following config.

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

// https://astro.build/config
export default defineConfig({
	// Enable Solid to support Solid JSX components.
	integrations: [solid()],
	vite: {
		plugins: [
			Icons({
				compiler: 'solid'
			})
		]
	}
});

then use the component like you would with your integration.

Alternatively, for Astro integration without the above compiler, you could utilize the raw compiler like so:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
	vite: {
		plugins: [
			Icons({
				compiler: 'raw'
			})
		]
	}
});

then use the icons using the set:html template directive like so:

---
import AstroLogo from "~icons/logos/astro"; 
---
<Fragment set:html={AstroLogo} />

Once the PR #241 has been merged you should be able to use the following setup for just Astro:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
	vite: {
		plugins: [
			Icons({
				compiler: 'astro'
			})
		]
	}
});

then use the icons using them like Astro components:

---
import AstroLogo from "~icons/logos/astro";
import RawAstroLogo from "~icons/logos/astro?raw";
---
<AstroLogo />
<Fragment set:html={RawAstroLogo} />

[Stephan Sahm]

It turns out unplugin-icons recently added astro support with official documentation in the readme
https://github.com/antfu/unplugin-icons#configuration

[Michael Stramel]

Yep! I just got the Astro support merged 🙂