From fbabea9065e937b186eb9bf2f342602ae329320c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <imsqrtthree@gmail.com>
Date: Tue, 30 Nov 2021 21:08:51 +0800
Subject: [PATCH] docs: name casing in doc (#4944)

* doc: convert the name of icon components to kebab-case

* doc: copy kebab cased icon name
---
 components/icon/demo/basic.vue                   | 12 ++++++------
 components/icon/demo/custom.vue                  |  8 ++++----
 components/icon/demo/two-tone.vue                | 10 +++++-----
 components/icon/index.en-US.md                   |  8 ++++----
 components/icon/index.zh-CN.md                   |  9 ++++-----
 .../theme/template/IconDisplay/CopyableIcon.vue  | 16 ++++++++++++++--
 6 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/components/icon/demo/basic.vue b/components/icon/demo/basic.vue
index 965e3b9ff..e04897e44 100644
--- a/components/icon/demo/basic.vue
+++ b/components/icon/demo/basic.vue
@@ -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">
diff --git a/components/icon/demo/custom.vue b/components/icon/demo/custom.vue
index cb1416bd3..4cda00b20 100644
--- a/components/icon/demo/custom.vue
+++ b/components/icon/demo/custom.vue
@@ -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">
diff --git a/components/icon/demo/two-tone.vue b/components/icon/demo/two-tone.vue
index 2c8305948..189084c2f 100644
--- a/components/icon/demo/two-tone.vue
+++ b/components/icon/demo/two-tone.vue
@@ -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>
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index 8956f0698..c2d2b8fdf 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -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';
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index ce6b82cbb..ebf01e37b 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -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';
diff --git a/site/src/theme/template/IconDisplay/CopyableIcon.vue b/site/src/theme/template/IconDisplay/CopyableIcon.vue
index f9b109ce9..ee63dcf8a 100644
--- a/site/src/theme/template/IconDisplay/CopyableIcon.vue
+++ b/site/src/theme/template/IconDisplay/CopyableIcon.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: {