vue3 iconify 图标几种使用 并加载本地 svg 图标

iconify

iconify

与 @iconify/vue 使用

下载

pnpm add @iconify/vue -D
1

使用

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>;
1
2
3
4
5
6

iconify 图表集

下载完整集合

pnpm add @iconify/json -D
1

下载单个图标集

格式：@iconify-json/[collection-id]

pnpm add @iconify-json/mdi -D
1

与 unplugin-icons

unplugin-icons

pnpm add unplugin-icons -D
1

vite.config.ts 配置

import Icons from "unplugin-icons/vite";

export default defineConfig({
	plugins: [
		...,
        Icons({
			/* options */
		}),
	],
});
1
2
3
4
5
6
7
8
9
10

.vue 使用 需要手动引入

1
2
3
4
5
6
7

进阶 与 unplugin-vue-components 一起使用 您可以根据需要使用任何图标，而无需显式导入。只有使用的图标才会被捆绑在一起。

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 // 自动安装图标库
		}),
	],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

组件名规则 {prefix}-{collection}-{icon}

1
2
3
4
5
6

加载本地 svg 图片

注意加载的目录 ./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";
		}
	},
}),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

使用

1
2
3
4
5
6
7