feat: vite-plugin-icons

src/components/Footer.vue

@@ -1,23 +1,24 @@
 <template>
   <nav class="text-xl mt-6">
     <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
-      <Icon icon="carbon:campsite" class="inline-block" />
+      <carbon-campsite />
     </router-link>
 
-    <a class="icon-btn mx-2" @click="isDark = !isDark" :title="t('button.toggle_dark')">
-      <Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" />
+    <a class="icon-btn mx-2" :title="t('button.toggle_dark')" @click="isDark = !isDark">
+      <carbon-moon v-if="isDark" />
+      <carbon-sun v-else />
     </a>
 
-    <a class="icon-btn mx-2" @click="toggleLocales" :title="t('button.toggle_langs')">
-      <Icon icon="carbon:language" class="inline-block" />
+    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
+      <carbon-language />
     </a>
 
     <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
-      <Icon icon="carbon:dicom-overlay" class="inline-block" />
+      <carbon-dicom-overlay />
     </router-link>
 
     <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
-      <Icon icon="carbon:logo-github" class="inline-block" />
+      <carbon-logo-github />
     </a>
   </nav>
 </template>

src/components/Icon.vue

@@ -1,49 +0,0 @@
-<template>
-  <div ref="el" :class="$attrs.class" style="vertical-align: text-bottom" />
-</template>
-
-<script setup="props" lang="ts">
-import { watch, ref, onMounted, nextTick, defineProps } from 'vue'
-import Iconify from '@purge-icons/generated'
-
-const props = defineProps({
-  icon: {
-    type: String,
-    required: true,
-  },
-})
-
-const el = ref<HTMLElement | null>(null)
-
-const update = async() => {
-  if (el.value) {
-    await nextTick()
-    const svg = Iconify.renderSVG(props.icon, {})
-    if (svg) {
-      el.value.textContent = ''
-      el.value.appendChild(svg)
-    }
-    else {
-      const span = document.createElement('span')
-      span.className = 'iconify'
-      span.dataset.icon = props.icon
-      el.value.textContent = ''
-      el.value.appendChild(span)
-    }
-  }
-}
-
-watch(() => props.icon, update, { flush: 'post' })
-
-onMounted(update)
-</script>
-
-<style>
-span.iconify {
-  background: #5551;
-  border-radius: 100%;
-  min-width: 1em;
-  min-height: 1em;
-  display: block;
-}
-</style>

src/components/README.md

@@ -3,12 +3,8 @@
 Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
 
 
-### `Icon.vue`
+### Icons
 
-You can uses Icons with the following syntax
+You can uses icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
 
-```html
-<Icon icon='mdi:account'/>
-```
-
-The icon id follows the rules in [Iconify](https://iconify.design/) which you can use any icons from the supported icon sets. It will only bundles the icons you use, check out [PurgeIcons](https://github.com/antfu/purge-icons) for more details.
+It will only bundles the icons you use, check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.

src/main.postcss

@@ -42,6 +42,7 @@ html.dark {
   @apply inline-block cursor-pointer select-none
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
+  font-size: 0.9em;
 }
 
 .shiki {

src/pages/about.md

@@ -1,6 +1,6 @@
-<div class="text-4xl text-center">
+<div class="text-4xl text-center -mb-4">
   <!-- You can use Vue components inside markdown -->
-  <Icon class="iconify inline-block" icon="carbon:dicom-overlay" />
+  <carbon-dicom-overlay class="inline-block" />
 </div>
 
 ### About

src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p class="text-4xl">
-      <Icon class="iconify inline-block" icon="carbon:campsite" />
+      <carbon-campsite class="inline-block" />
     </p>
     <p>
       <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
@@ -24,7 +24,7 @@
       style="width: 250px"
       @keydown.enter="go"
     >
-    <label class="hidden" for="input">{{t('intro.whats-your-name')}}</label>
+    <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
 
     <div>
       <button

src/plugins/icons.ts

@@ -1,2 +0,0 @@
-// import icons data generated by PurgeIcons
-import '@purge-icons/generated'

src/plugins/index.ts

@@ -1,6 +1,5 @@
 import { App } from 'vue'
 import installI18n from './i18n'
-import './icons'
 
 export default (app: App) => {
   installI18n(app)