0%

iconify + vue3 结合使用

搭建项目

首先我们使用 vite 建立一个新的项目

1
$ yarn create vite

安装下依赖

1
$ yarn add @iconify/vue

使用

1
2
3
4
5
6
7
<template>
<Icon icon="mdi:home" width="24px" height="24px" />
</template>

<script lang="ts" setup>
import { Icon } from "@iconify/vue";
</script>

这样就可以使用 iconify 了。

添加自定义图标

如果要想添加自定义图标,我们只需要在 main.js 中注册一下就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { disableCache, addIcon } from "@iconify/vue";

// 添加自定义图标
disableCache("all");

const iconData = {
body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
width: 24,
height: 24,
};

let res = addIcon("custom:home", iconData);
// 如果注册成功 res 为 true, 如果数据有问题则返回 false
console.log(res);

进阶

官方提供的 <Icon> 组件接受以下参数 Icon component properties.