docs: name casing in doc (#4944)

* doc: convert the name of icon components to kebab-case * doc: copy kebab cased icon name
vueComponent · Nov 30, 2021 · fbabea9 · fbabea9
1 parent 4a80b55
commit fbabea9
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 26 deletions.
diff --git 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
@@ -18,17 +18,17 @@ 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
             d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
           />
         </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
@@ -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
@@ -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
@@ -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
@@ -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: {