vue3+vite接入iconify,支持离线
前言
找一个图标太难了。Element-plus Icon
的不够用。阿里巴巴的iconfont
又比较麻烦。如果有自己的UI组件也可以考虑。
为了快速开发,我选择unocss + iconify。
网上的教程太多了,建议大家直接看文档,其实配置步骤只有几步,不多。
文档中也有需要理解的部分,以下是我安装的一个总结,方便下次直接安装总结进行安装。
配置unocss
原文:https://unocss.net/integrations/vite
安装依赖
pnpm add -D unocss
配置vite.comfig.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'export default defineConfig({plugins: [UnoCSS()]
})
创建 uno.config.ts 文件:
import { defineConfig } from 'unocss'export default defineConfig({// ...这里什么也不写,说明走默认配置。注意:引入图标这里的默认配置会被覆盖,需要显示声明
})
将 virtual:uno.css 添加到您的主入口文件:
import 'virtual:uno.css'
引入iconify图标
// 图标集合地址:https://icon-sets.iconify.design/ic/
pnpm add -D @unocss/preset-icons @iconify-json/ic
// pnpm add -D @unocss/preset-icons @iconify-json/[你想要的集合]
import presetIcons from '@unocss/preset-icons'
import { defineConfig, presetAttributify, presetUno } from 'unocss'export default defineConfig({presets: [presetIcons({// 可选-属性预设presetAttributify({}),// 核心-原子化预设presetUno(),// 图标预设presetIcons({})})// ...其他预设]
})
打开图标库,我这里使用的是google图标。https://icon-sets.iconify.design/ic/
将这个html粘贴进项目,页面上会显示图标。
<div class="i-ic:twotone-flaky w-24px h-24px" />
由于是懒加载,动态会不显示。
可以参考这里:https://www.whidy.net/unocss-dynamic-icon-not-show
创建一个单独的文件在src目录下,比如叫做 unocss-icon.ts ,然后再在 main.ts 内引入就好了。这完全取决于你的喜好~
// unocss-icon.ts
// @unocss-include
const iconList = ["i-mdi-poll", "i-mdi-monitor-dashboard", "i-mdi-ballot-recount-outline","i-mdi-application-brackets-outline","i-mdi-apache-kafka", "i-mdi-archive-search-outline", "i-mdi-format-text-wrapping-overflow"
];
// main.js
// 添加一行
import "./unocss-icon";