vue3项目中使用iconify

事情是这样的，我比较喜欢使用Material Design Icons的图标(Material Design Icons - Icon Library - Pictogrammers)。最初我把整个Material Design Icons的css文件下载下来，然后在vue3项目中使用。但是这个css文件的体积比较大，但是我用的也就是那几个icon图标。有没有办法实现图标的按需导入呢？我们可以使用iconify实现icon图标的按需引入。
iconify npm链接：unplugin-icons - npm。
在这里介绍了怎么在vue3项目中实现图标的按需引入：

我下面介绍iconify离线按需加载使用， 也感谢知乎上的这位朋友，他的文章解决了我很多问题：(vue3+vite使用iconify图标 - 知乎)

1.安装iconify

全部数据
pnpm add -D @iconify/json

部分数据(以Material Design Icons为例)
pnpm add -D @iconify-json/mdi

2.安装图标按需加载工具

pnpm add -D unplugin-icons

3.手动按需加载

我们把图标按需加载工具在viete.config.js中配置一下：

import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

import Icons from 'unplugin-icons/vite'  //图标按需加载工具

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Icons(),  //图标按需加载工具
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

在组件中使用：

<script setup>
import IconHome from "~icons/mdi/home" //导入icon
</script>

<template>
  <IconHome/> <!--使用icon-->
</template>

使用什么图标，都需要在组件中导入一下。

4.自动按需导入

需要安装unplugin-vue-components插件：

pnpm add unplugin-vue-components -D

在vite.config.js中进行配置：

import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

//icon按需引入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [
                IconsResolver(),
            ],
        }),
        Icons(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

在组件中使用：

<script setup>
</script>

<template>
  <i-mdi-home /> <! --使用icon-->
</template>

我们可以配置<i-mdi-home />这里的第一个字母： 

在vite.config.js中进行配置：

import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [
                IconsResolver({
                    prefix: 'icon'  // 更改图标前缀
                }),
            ],
        }),
        Icons(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

在组件中使用：        

<script setup>
</script>

<template>
  <icon-mdi-home />
</template>

原文： https://juejin.cn/post/7430732005641502754