iconfy配置自动引入 Vue3+Vite3

简介

        在前端开发的时候往往需要使用到icon图标来丰富前端界面，Iconify图标库具有丰富的icon图标库（如下图）icon的按需引入在程序开发尤为重要，自动的按需引入对于程序员更加重要，本章将讲述iconfy自动引入的配置方式。

第一步配置unplugin环境

pnpm i -D unplugin-icons // 引入icon图标库
pnpm i -D unplugin-vue-components // 自动导入icon

第二步Vite plugins 配置

import { defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

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

export default () => {
    return defineConfig({
        base: './',
        plugins: [
            vue(), 
            Components({
                resolvers: [
                    // 自动注册图标
                    IconsResolver({
                    // icon的前缀 组件使用{prefix}-{collection}-{icon} eg:i-ep-search
                        prefix: 'i' 
                    // enabledCollections:['ep']  这是可选的，默认启用 Iconify 支持的所有集合，ep指的是element_ui的图标库
                    // alias: { park: 'icon-park' } 集合的别名
                    })
                ]
             }),
            Icons({
                scale: 1, // 缩放比 相对1em
                autoInstall: true, // 自动安装
                compiler: 'vue3' // 编译方式
            })
            
        ],
    })
}

第三步检测

<div style="background-color: red;width: 20px;height: 20px">
        <i-simple-line-icons-frame />
</div>

效果：

 其它：Iconfy的使用

选择其中一个icon模块

复制：

 想要了解其它具体参数信息请访问github：https://github.com/antfu/unplugin-icon 查看官网文档