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

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 图表集

加载本地 svg 图标

prefix 自定义图标集名称
icons 图标json
icons/test 图标名称
icons/test/body svg 图标，取消 svg 标签里的内容
icons/test/width 图标宽

src/icons/index.ts

import { addCollection } from '@iconify/vue'
import type { IconifyJSON } from '@iconify/vue'

export function setupIcons() {
  addCollection({
    prefix: 'xr',
    icons: {
      test: {
        body: '<g stroke="currentColor"><path d="M3.97485 5.97461H19.9748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.97485 11.9746H19.9748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.97485 17.9746H19.9748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>',
        width: 24,
        height: 24
      }
    }
  } satisfies IconifyJSON)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

main.ts

import { setupIcons } from '@/icons/index'
setupIcons()
1
2

使用

import { Icon } from '@iconify/vue'
// 集合:名称
<Icon icon="xr:test" />
1
2
3

下载完整集合

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 使用 需要手动引入

<script lang="ts" setup>
import IconAccountBox from "~icons/mdi/account-box";
</script>

<template>
	<icon-account-box style="font-size: 2em; color: red" />
</template>
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 <i-ri-alipay-line />,修改后  <icon-ri-alipay-line />, 值为 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}

<script lang="ts" setup></script>

<template>
	<i-ri-alipay-line />
	<i-carbon-accessibility />
</template>
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: {
		// 加载该目录下所有 用法： <i-custom-steering-wheel />
		custom: FileSystemIconLoader("./src/assets/custom-a"),
		// 加载单个，写法不同
		inline: {
			// 用法： <i-inline-foo />
			foo: `<svg>....</svg>`,
			// 用法： <i-inline-async />
			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

使用

<template>
	<i-mdi-light-alarm style="font-size: 60px; color: red" />
	<i-inline-foo style="color: red; font-size: 100px" />
	<i-inline-async style="color: red; font-size: 100px" />
	<i-custom-steering-wheel />
	<i-custom-car-a style="color: red; font-size: 100px" />
</template>
1
2
3
4
5
6
7