github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update icon demo

pull/5361/head
tangjinzhou 2022-03-17 10:21:04 +08:00
parent d929217752
commit 32ffd6bb32
4 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/icon/demo/basic.vue
View File

@ -17,14 +17,14 @@ Import icons from `@ant-design/icons-vue`, component name of icons with differen
</docs> </docs>
<template> <template>
<div class="icons-list"> <a-space>
<home-outlined /> <home-outlined />
<setting-filled /> <setting-filled />
<smile-outlined /> <smile-outlined />
<sync-outlined spin /> <sync-outlined spin />
<smile-outlined :rotate="180" /> <smile-outlined :rotate="180" />
<loading-outlined /> <loading-outlined />
</div> </a-space>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -45,9 +45,3 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style scoped>
.icons-list :deep(.anticon) {
margin-right: 6px;
font-size: 24px;
}
</style>

11
components/icon/demo/custom.vue
View File

@ -17,7 +17,7 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
</docs> </docs>
<template> <template>
<div class="custom-icons-list"> <a-space>
<icon :style="{ color: 'hotpink' }"> <icon :style="{ color: 'hotpink' }">
<template #component> <template #component>
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"> <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
@ -74,14 +74,19 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
</svg> </svg>
</template> </template>
</icon> </icon>
</div> <icon>
<template #component><HomeOutlined /></template>
</icon>
<HomeOutlined />
</a-space>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue'; import Icon, { HomeOutlined } from '@ant-design/icons-vue';
export default defineComponent({ export default defineComponent({
components: { components: {
Icon, Icon,
HomeOutlined,
}, },
}); });
</script> </script>

4
components/icon/demo/iconfont.vue
View File

@ -17,11 +17,11 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo
</docs> </docs>
<template> <template>
<div class="icons-list"> <a-space>
<icon-font type="icon-tuichu" /> <icon-font type="icon-tuichu" />
<icon-font type="icon-facebook" /> <icon-font type="icon-facebook" />
<icon-font type="icon-twitter" /> <icon-font type="icon-twitter" />
</div> </a-space>
</template> </template>
<script> <script>
import { createFromIconfontCN } from '@ant-design/icons-vue'; import { createFromIconfontCN } from '@ant-design/icons-vue';

4
components/icon/demo/two-tone.vue
View File

@ -17,11 +17,11 @@ You can set `two-tone-color` prop to specific primary color for two-tone icons.
</docs> </docs>
<template> <template>
<div class="icons-list"> <a-space>
<smile-two-tone /> <smile-two-tone />
<heart-two-tone two-tone-color="#eb2f96" /> <heart-two-tone two-tone-color="#eb2f96" />
<check-circle-two-tone two-tone-color="#52c41a" /> <check-circle-two-tone two-tone-color="#52c41a" />
</div> </a-space>
</template> </template>
<script> <script>
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue'; import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';