图标自动引入

可前往 👉 icones，随意选择点击进入其中一个图标库

icons-first-step

再点击选择其中一个喜欢的图标

icons-second-step

复制其名称

icons-second-step

在模板中即可通过 class 的方式直接使用，注意加上前缀 i-。

html

<template>
	<div class="i-mdi:account-box-multiple"></div>
</template>

保存后等待自动下载该图标库后，就可以在页面中看到对应图标。

同时推荐你使用 vscode 插件 Iconify IntelliSense。

该插件会在模板中显示图标的预览。

当然图标动态加载也是支持的 👇

html

<script>
	const icon = ref("i-ep:arrow-left")

	// 两秒后换成另一个图标
	setTimeout(() => {
		icon.value = 'i-icon-park-outline:arrow-circle-down'
	}, 2000)
</script>

<template>
	<div :class="icon"></div>
</template>

注意动态图标，请确保在开发环境下所有的图标都测过一遍。

具体可见 👉 unocss/presets/icons

图标自动引入 ​

图标自动引入