以下是ant图标的使用案例:
<template>
<a-space>
<slack-outlined />
<home-outlined />
<setting-filled />
<smile-outlined />
<sync-outlined spin />
<smile-outlined :rotate="180" />
<loading-outlined />
</a-space>
</template>
<script>
import { defineComponent } from 'vue';
import {SlackOutlined, HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
SlackOutlined,
HomeOutlined,
SettingFilled,
SmileOutlined,
SyncOutlined,
LoadingOutlined,
},
});
</script>
使用ant图标分为三步,第一步,引入图标组件:
import {SlackOutlined, HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined } from '@ant-design/icons-vue';
第二部,注册组件:
components: {
SlackOutlined,
HomeOutlined,
SettingFilled,
SmileOutlined,
SyncOutlined,
LoadingOutlined,
},
第三部:使用组件:
<slack-outlined />
<home-outlined />
<setting-filled />
<smile-outlined />