From fe656731fd70c5dc063aa0199cbded2f0293a005 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Tue, 24 Nov 2020 00:38:52 -0500
Subject: [PATCH] DetailsPanel+README: switch to kebab-case for Vue components

---
 README.md                                | 10 +++++-----
 src/components/IconGrid/DetailsPanel.tsx |  5 ++++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 03754e1..a5be72c 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
 
-- 588 icons and counting
+- 683 icons and counting
 - 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
 - Designed at 16 x 16px to read well small and scale up big
 - Raw stroke information retained to fine-tune the style
@@ -67,9 +67,9 @@ ReactDOM.render(<App />, document.getElementById("root"));
 ```html
 <template>
   <div>
-    <PhHorse />
-    <PhHeart :size="32" color="hotpink" weight="fill" />
-    <PhCube />
+    <ph-horse />
+    <ph-heart :size="32" color="hotpink" weight="fill" />
+    <ph-cube />
   </div>
 </template>
 
@@ -86,7 +86,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
 </script>
 ```
 
-> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions.
+> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
 ## Related Projects
 
diff --git a/src/components/IconGrid/DetailsPanel.tsx b/src/components/IconGrid/DetailsPanel.tsx
index 4713e6d..97c9ec8 100644
--- a/src/components/IconGrid/DetailsPanel.tsx
+++ b/src/components/IconGrid/DetailsPanel.tsx
@@ -82,7 +82,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
     react: `<${Icon.displayName} size={${size}} ${
       color !== "#000000" ? `color="${color}" ` : ""
     }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
-    vue: `<Ph${Icon.displayName} :size="${size}" ${
+    vue: `<ph${Icon.displayName!!.replace(
+      /([a-z0-9]|(?=[A-Z]))([A-Z])/g,
+      "$1-$2"
+    ).toLowerCase()} :size="${size}" ${
       color !== "#000000" ? `color="${color}" ` : ""
     }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
   };