docs: name casing in doc (#4944)
* doc: convert the name of icon components to kebab-case * doc: copy kebab cased icon namepull/4956/head
根号三
GitHub
parent
4a80b556f8
commit
fbabea9065
|
|
@ -18,12 +18,12 @@ Import icons from `@ant-design/icons-vue`, component name of icons with differen
|
|||
|
||||
<template>
|
||||
<div class="icons-list">
|
||||
<HomeOutlined />
|
||||
<SettingFilled />
|
||||
<SmileOutlined />
|
||||
<SyncOutlined spin />
|
||||
<SmileOutlined :rotate="180" />
|
||||
<LoadingOutlined />
|
||||
<home-outlined />
|
||||
<setting-filled />
|
||||
<smile-outlined />
|
||||
<sync-outlined spin />
|
||||
<smile-outlined :rotate="180" />
|
||||
<loading-outlined />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
|
|||
|
||||
<template>
|
||||
<div class="custom-icons-list">
|
||||
<Icon :style="{ color: 'hotpink' }">
|
||||
<icon :style="{ color: 'hotpink' }">
|
||||
<template #component>
|
||||
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
|
||||
<path
|
||||
|
|
@ -26,9 +26,9 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
|
|||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</Icon>
|
||||
</icon>
|
||||
|
||||
<Icon :style="{ fontSize: '32px' }">
|
||||
<icon :style="{ fontSize: '32px' }">
|
||||
<template #component="svgProps">
|
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" v-bind="svgProps">
|
||||
<path
|
||||
|
|
@ -73,7 +73,7 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
|
|||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</Icon>
|
||||
</icon>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -8,19 +8,19 @@ title:
|
|||
|
||||
## zh-CN
|
||||
|
||||
双色图标可以通过 `twoToneColor` 属性设置主题色。
|
||||
双色图标可以通过 `two-tone-color` 属性设置主题色。
|
||||
|
||||
## en-US
|
||||
|
||||
You can set `twoToneColor` prop to specific primary color for two-tone icons.
|
||||
You can set `two-tone-color` prop to specific primary color for two-tone icons.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="icons-list">
|
||||
<SmileTwoTone />
|
||||
<HeartTwoTone two-tone-color="#eb2f96" />
|
||||
<CheckCircleTwoTone two-tone-color="#52c41a" />
|
||||
<smile-two-tone />
|
||||
<heart-two-tone two-tone-color="#eb2f96" />
|
||||
<check-circle-two-tone two-tone-color="#52c41a" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ We still have three different themes for icons, icon component name is the icon
|
|||
```jsx
|
||||
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
|
||||
|
||||
<StarOutlined />
|
||||
<StarFilled />
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
<star-outlined />
|
||||
<star-filled />
|
||||
<star-two-tone two-tone-color="#eb2f96" />
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
|
|
@ -60,7 +60,7 @@ The properties `theme`, `component` and `twoToneColor` were added in `1.2.0`. Th
|
|||
|
||||
```html
|
||||
<template>
|
||||
<MessageOutlined :style="{fontSize: '16px', color: '#08c'}" />
|
||||
<message-outlined :style="{fontSize: '16px', color: '#08c'}" />
|
||||
</template>
|
||||
<script>
|
||||
import { MessageOutlined } from '@ant-design/icons-vue';
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ npm install --save @ant-design/icons-vue
|
|||
|
||||
安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 通用图标
|
||||
|
|
@ -33,9 +32,9 @@ npm install --save @ant-design/icons-vue
|
|||
```jsx
|
||||
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
|
||||
|
||||
<StarOutlined />
|
||||
<StarFilled />
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
<star-outlined />
|
||||
<star-filled />
|
||||
<star-two-tone two-tone-color="#eb2f96" />
|
||||
```
|
||||
|
||||
### 自定义 Icon/Custom Icon
|
||||
|
|
@ -62,7 +61,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
|
|||
|
||||
```html
|
||||
<template>
|
||||
<MessageOutlined :style="{fontSize: '16px', color: '#08c'}" />
|
||||
<message-outlined :style="{fontSize: '16px', color: '#08c'}" />
|
||||
</template>
|
||||
<script>
|
||||
import { MessageOutlined } from '@ant-design/icons-vue';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<component :is="allIcons[name]"></component>
|
||||
<span class="anticon-class">
|
||||
<a-badge :dot="isNew">
|
||||
{{ type }}
|
||||
{{ kebabCasedType }}
|
||||
</a-badge>
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -19,15 +19,27 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const allIcons = AntdIcons;
|
||||
|
||||
const kebabCase = function kebabCase(str) {
|
||||
return str
|
||||
.split(/(?=[A-Z])/)
|
||||
.join('-')
|
||||
.toLowerCase();
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
'a-badge': Badge,
|
||||
},
|
||||
props: ['name', 'type', 'isNew', 'theme', 'justCopied'],
|
||||
data() {
|
||||
const kebabCasedName = kebabCase(this.name);
|
||||
const kebabCasedType = kebabCase(this.type);
|
||||
|
||||
this.allIcons = allIcons;
|
||||
|
||||
return {
|
||||
text: `<${this.name} />`,
|
||||
text: `<${kebabCasedName} />`,
|
||||
kebabCasedType,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue