Destiner's notes

Using Vite Plugins in Astro

15 February 2022

Astro uses Vite as a build system, which makes builds hyper-fast. More than that, it allows you to tap into a rich plugin ecosystem. Here, we will learn how to add a Vite plugin to an Astro site.

Let’s start by choosing a plugin to add. avesome-vite repository has a directory of Vite plugins.

For this guide, we will use unplugin-icons to add custom icon support.

I will use the Vue template, but it’s possible to use React, Svelte, and many other frameworks.

First, let’s install the plugin:

bash
npm i -D unplugin-icons

unplugin-icons also requires installing icons. Let’s install Feather icons package:

bash
npm i -D @iconify-json/fe

Enable the plugin by extending your Astro config:

ts
import vue from '@astrojs/vue';
import { defineConfig } from 'astro/config';
import Icons from 'unplugin-icons/vite';
export default defineConfig({
// Your renderer here
integrations: [vue()],
vite: {
plugins: [
// Your compiler here
Icons({ compiler: 'vue3' }),
],
},
});

Now you can use Feather icons inside any component:

html
<template>
<icon-check />
</template>
<script setup lang="ts">
import IconCheck from '~icons/fe/check';
</script>