vite2.+vue3.使用iconify上万+图标库

Wish3D

2024-04-27 帮助1人

Iconify支持100多个图标集，上万种图标可随意使用，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus、ant-design等ui库使用，最后感谢antfu大佬提供的vite插件，也感谢众多设计人员设计的图标。

1，安装插件和图标库

注意：@iconify/json(体积≈149M)，包含iconify图标，安装的时候，会全部下载，但实际开发打包完成只会使用你用到的图标。

// 引用工具
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
// plugins部分
Components({
dts: './src/components.d.ts',
extensions: ['vue', 'md'],
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
// imports 指定组件所在位置，默认为 src/components; 有需要也可以加上 view 目录
dirs: ['src/components/'],
//prefix :图标前缀
resolvers: [ElementPlusResolver(), IconsResolver({ prefix: 'icon' }), VueUseComponentsResolver()],
}),
Icons({
compiler: 'vue3',
autoInstall: true,
})

icon是前缀，ant-design是图标库名称前缀，account-book-filled图标名称

查找方法：

如果你想单独安装使用某个图标集合，可以使用此规则：@iconify-json/[图标id]
比如安装 ant Design Icons

pnpm add  @iconify/icons-ant-design --save-dev

参考地址：unplugin-icons

这篇好文章是转载于：学新通技术网

photoshop保存的图片太大微信发不了怎么办