unplugin-icons

梗概

• 一个图标组件库

示例

ai: 使用 unplugin-icons/vite 插件的一个示例:

首先，你需要安装这个插件。你可以通过npm或者yarn来安装：

npm install -D unplugin-icons unplugin-vue-icons unplugin-icons/vite
# 或者
yarn add -D unplugin-icons unplugin-vue-icons unplugin-icons/vite

然后，在你的 vite.config.js 文件中添加这个插件：

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { VitePWA } from 'vite-plugin-pwa'
 
export default {
  plugins: [
    Icons(),
    VitePWA()
  ],
  resolve: {
    alias: {
      '@icon': IconsResolver({ component: 'vue3' })
    }
  }
}

最后，你就可以在你的Vue组件中使用图标了：

<template>
  <icon-mdi-account />
</template>
 
<script>
import { MdiAccount } from '@icon'
 
export default {
  components: {
    'icon-mdi-account': MdiAccount
  }
}
</script>

以上代码显示了如何在Vue 3应用中使用Material Design图标。

father:: 前端

father:: 前端