安装

使用命令

pnpm add -D unplugin-icons

配置

vite.confi.ts配置:

import Icons from "unplugin-icons/vite";
plugins:[
Icons({
      autoInstall: true,
      compiler: "vue3",
    }),
    ]

支持的配置

Icons({
  scale: 1.2, // Scale of icons against 1em
  defaultStyle: '', // Style apply to icons
  defaultClass: '', // Class names apply to icons
  compiler: null, // 'vue2', 'vue3', 'jsx'
  jsx: 'react' // 'react' or 'preact'
})

使用

在https://icones.netlify.app/网站上找到想使用的图标
点击下图所示的按钮，即可复制图标

直接在vue中使用即可。

<script setup lang="ts">
	import IconoirAddHexagon from "~icons/iconoir/add-hexagon";
</script>
<template>
	<IconoirAddHexagon style="font-size: 12em; color: red" />
</template>

Icon图标自动引入

这里需要配合 unplugin-vue-components组件使用。

地址：https://github.com/antfu/unplugin-vue-components

配置

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'


  plugins: [
    Components({
      resolvers: [
        IconsResolver(),
      ]
    }),
    Icons(),
  ],

使用

选中复制名称即可，例如iconoir:add-pin-alt,直接点击下图所示的地方。

注：使用Icon自动引入,不需要下载图标库，系统会自动按需下载。

前面需要添加前缀i。

<i-iconoir:add-pin-alt style="font-size: 12em; color: red" />

图标引入完成，每天学习一招，又大大提高了开发效率。