docs: add Astro + Vue docs and example (#343)

README.md

@@ -406,6 +406,36 @@ See [the Astro example](examples/astro) for a working example project.
 
 <br></details>
 
+<details>
+<summary>Astro + Vue</summary><br>
+
+Required [@astrojs/vue](https://docs.astro.build/es/guides/integrations-guide/vue/) installed.
+
+```ts
+// astro.config.mjs
+import { defineConfig } from 'astro/config'
+import Vue from '@astrojs/vue'
+import Icons from 'unplugin-icons/vite'
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [
+ Vue(),
+ ],
+ vite: {
+ plugins: [
+ Icons({
+ compiler: 'vue3',
+ }),
+ ],
+ },
+})
+```
+
+See [the Astro + Vue example](examples/astro-vue) for a working example project.
+
+<br></details>
+
 ###### Frameworks
 
 <details>
@@ -618,6 +648,26 @@ See [the Astro example](examples/astro) for a working example project.
 
 <br></details>
 
+<details>
+<summary>Astro + Vue</summary><br>
+
+Only the Vue type declarations are required:
+
+```jsonc
+// tsconfig.json
+{
+ "compilerOptions": {
+ "types": [
+ "unplugin-icons/types/vue",
+ ]
+ }
+}
+```
+
+See [the Astro + Vue example](examples/astro-vue) for a working example project.
+
+<br></details>
+
 <details>
 <summary>Qwik</summary><br>
 

examples/README.md

@@ -5,6 +5,7 @@
 | Example | Source | Playground |
 |-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `Astro` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro) |
+| `Astro + Vue` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro-vue) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro-vue) |
 | `Next` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next) |
 | `Nuxt 3` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt3) |
 | `SvelteKit` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit) |

examples/astro-vue/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+ const filename = './package.json'
+ try {
+ const contents = await fsPromises.readFile(filename, 'utf-8')
+ const updatedContent = contents.replace('workspace:*', 'latest')
+ await fsPromises.writeFile(filename, updatedContent)
+ }
+ catch (err) {
+ console.error(err)
+ }
+}

examples/astro-vue/astro.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'astro/config'
+import Vue from '@astrojs/vue'
+import Icons from 'unplugin-icons/vite'
+
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [
+ Vue()
+ ],
+ vite: {
+ plugins: [
+ Icons({
+ compiler: 'vue3',
+ }),
+ ],
+ },
+})

examples/astro-vue/package.json

@@ -0,0 +1,26 @@
+{
+ "dependencies": {
+ "@astrojs/vue": "^4.0.8",
+ "astro": "^4.2.6"
+ },
+ "description": "unplugin-icons + Astro",
+ "devDependencies": {
+ "@iconify/json": "^2.2.141",
+ "unplugin-icons": "workspace:*"
+ },
+ "name": "astro-example",
+ "private": true,
+ "scripts": {
+ "astro": "astro",
+ "build": "astro build",
+ "dev": "astro dev",
+ "preview": "astro preview",
+ "start": "astro dev"
+ },
+ "stackblitz": {
+ "installDependencies": false,
+ "startCommand": "node .stackblitz.js && npm install && npm run dev"
+ },
+ "type": "module",
+ "version": "0.0.1"
+}

examples/astro-vue/src/components/HomeLink.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import IconParkOutlineHome from '~icons/icon-park-outline/home';
+</script>
+
+<script lang="ts">
+export default {
+ name: 'HomeLink'
+}
+</script>
+
+<template>
+ <a
+ aria-label="Go Home"
+ href="/">
+ <IconParkOutlineHome />
+ </a>
+</template>

examples/astro-vue/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

examples/astro-vue/src/layouts/Layout.astro

@@ -0,0 +1,26 @@
+---
+export interface Props {
+ title: string;
+}
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <meta name="generator" content={Astro.generator} />
+ <title>{title}</title>
+ </head>
+ <body>
+ <slot />
+ <style is:global>
+ html {
+ font-family: system-ui, sans-serif;
+ background-color: #f6f6f6;
+ }
+ </style>
+ </body>
+</html>

examples/astro-vue/src/pages/index.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "../layouts/Layout.astro";
+import IconParkAbnormal from "~icons/icon-park/abnormal";
+
+import HomeLink from "../components/HomeLink.vue";
+---
+
+<Layout title="Welcome to Astro.">
+ <main>
+ <HomeLink />
+ <br />
+ <IconParkAbnormal />
+ </main>
+</Layout>

examples/astro-vue/tsconfig.json

@@ -0,0 +1,6 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "types": ["unplugin-icons/types/vue"]
+ }
+}