Astro + Svelte

[MrAmericanMike]

Anyone has a guide or know what would be the correct way to install and setup unplugin-icons with tabler-icons in an Astro project that uses Svelte integration?

I tried:

import { defineConfig } from "astro/config";
import svelte from "@astrojs/svelte";
import Icons from "unplugin-icons/vite";

// https://astro.build/config
export default defineConfig({
	outDir: "./public",
	publicDir: "./src/public",
	server: ({ command }) => ({
		port: command === "dev" ? 3000 : 8080
	}),
	build: {
		assets: "assets"
	},
	vite: {
		build: {
			minify: false
		},
		plugins: [Icons({ compiler: "svelte" })]
	},
	integrations: [svelte()]
});

And while it works, Typescript isn't happy when I import an icon with:

import IconEar from "~icons/tabler/ear";

In my component.

Cannot find module '~icons/tabler/ear' or its corresponding type declarations.ts(2307)

Not sure what I should do to fix this.

[MrAmericanMike]

Digging around in the different examples provided. I found that adding:

	"compilerOptions": {
		"types": [
			"unplugin-icons/types/svelte"
		]
	}

To the tsconfig.json file does the trick.

Will close this as the main issue was resolved now.