iconify
下载
pnpm add @iconify/vue -D
使用
import { Icon } from "@iconify/vue";
<template>
<Icon icon="mdi-light:home" style="color: red; font-size: 43px" />
<Icon icon="mdi:home-flood" style="color: red; font-size: 43px" />
</template>;
pnpm add @iconify/json -D
格式:@iconify-json/[collection-id]
pnpm add @iconify-json/mdi -D
unplugin-icons
pnpm add unplugin-icons -D
vite.config.ts 配置
import Icons from "unplugin-icons/vite";
export default defineConfig({
plugins: [
...,
Icons({
/* options */
}),
],
});
.vue 使用 需要手动引入
vite.config.ts 配置
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
export default defineConfig({
plugins: [
Components({
resolvers: [
IconsResolver({
/* options */
// prefix: "icon", // 自定义前缀 默认: i ,修改后 , 值为 false 则不需要前缀
// enabledCollections: ["ri"], // 哪些集合启用规则
}),
],
}),
Icons({
/* options */
// 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'
// autoInstall: true // 自动安装图标库
}),
],
});
组件名规则 {prefix}-{collection}-{icon}
注意加载的目录 ./src ,GitHub 示例中 assets 是根文件
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import { FileSystemIconLoader } from "unplugin-icons/loaders";
import { promises as fs } from "node:fs";
Components({
resolvers: [
IconsResolver({
// 加上集合名称
customCollections: ["custom", "inline"]
})
],
}),
Icons({
compiler: 'vue3',
customCollections: {
// 加载该目录下所有 用法:
custom: FileSystemIconLoader("./src/assets/custom-a"),
// 加载单个,写法不同
inline: {
// 用法:
foo: ``,
// 用法:
async: () => fs.readFile("./src/assets/giftbox.svg", "utf-8"),
},
},
iconCustomizer(collection, icon, props) {
const name = `${collection}:${icon}`;
if (name === "inline:async" || name === "inline:foo" || name === "custom:car-a") {
props.width = "1em";
props.height = "1em";
props.color = "skyblue";
}
},
}),
使用