搭建项目
首先我们使用 vite 建立一个新的项目
安装下依赖
使用
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);
console.log(res);
|
进阶
官方提供的 <Icon>
组件接受以下参数 Icon component properties.