Skip to content

Commit 32ffd6b

Browse files
committed
doc: update icon demo
1 parent d929217 commit 32ffd6b

File tree

4 files changed

+14
-15
lines changed

4 files changed

+14
-15
lines changed

components/icon/demo/basic.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ Import icons from `@ant-design/icons-vue`, component name of icons with differen
1717
</docs>
1818

1919
<template>
20-
<div class="icons-list">
20+
<a-space>
2121
<home-outlined />
2222
<setting-filled />
2323
<smile-outlined />
2424
<sync-outlined spin />
2525
<smile-outlined :rotate="180" />
2626
<loading-outlined />
27-
</div>
27+
</a-space>
2828
</template>
2929
<script lang="ts">
3030
import { defineComponent } from 'vue';
@@ -45,9 +45,3 @@ export default defineComponent({
4545
},
4646
});
4747
</script>
48-
<style scoped>
49-
.icons-list :deep(.anticon) {
50-
margin-right: 6px;
51-
font-size: 24px;
52-
}
53-
</style>

components/icon/demo/custom.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
1717
</docs>
1818

1919
<template>
20-
<div class="custom-icons-list">
20+
<a-space>
2121
<icon :style="{ color: 'hotpink' }">
2222
<template #component>
2323
<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`
7474
</svg>
7575
</template>
7676
</icon>
77-
</div>
77+
<icon>
78+
<template #component><HomeOutlined /></template>
79+
</icon>
80+
<HomeOutlined />
81+
</a-space>
7882
</template>
7983
<script lang="ts">
8084
import { defineComponent } from 'vue';
81-
import Icon from '@ant-design/icons-vue';
85+
import Icon, { HomeOutlined } from '@ant-design/icons-vue';
8286
export default defineComponent({
8387
components: {
8488
Icon,
89+
HomeOutlined,
8590
},
8691
});
8792
</script>

components/icon/demo/iconfont.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo
1717
</docs>
1818

1919
<template>
20-
<div class="icons-list">
20+
<a-space>
2121
<icon-font type="icon-tuichu" />
2222
<icon-font type="icon-facebook" />
2323
<icon-font type="icon-twitter" />
24-
</div>
24+
</a-space>
2525
</template>
2626
<script>
2727
import { createFromIconfontCN } from '@ant-design/icons-vue';

components/icon/demo/two-tone.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ You can set `two-tone-color` prop to specific primary color for two-tone icons.
1717
</docs>
1818

1919
<template>
20-
<div class="icons-list">
20+
<a-space>
2121
<smile-two-tone />
2222
<heart-two-tone two-tone-color="#eb2f96" />
2323
<check-circle-two-tone two-tone-color="#52c41a" />
24-
</div>
24+
</a-space>
2525
</template>
2626
<script>
2727
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';

0 commit comments

Comments
 (0)