Using Vite Plugins in Astro

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:

npm i -D unplugin-icons

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

npm i -D @iconify-json/fe

Enable the plugin by extending your Astro config:

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:

<template>
  <icon-check />
</template>

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