ant-design-vue/components/icon/demo/basic.vue

38 lines
840 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<docs>
---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
通过 `@ant-design/icons-vue` 引用 Icon 组件不同主题的 Icon 组件名为图标名加主题做为后缀也可以通过设置 `spin` 属性来实现动画旋转效果
## en-US
Import icons from `@ant-design/icons-vue`, component name of icons with different theme is the icon name suffixed by the theme name. Specific the `spin` property to show spinning animation.
</docs>
<template>
<a-space>
<home-outlined />
<setting-filled />
<smile-outlined />
<sync-outlined spin />
<smile-outlined :rotate="180" />
<loading-outlined />
</a-space>
</template>
<script lang="ts" setup>
import {
HomeOutlined,
SettingFilled,
SmileOutlined,
SyncOutlined,
LoadingOutlined,
} from '@ant-design/icons-vue';
</script>