refactor: change icon descriptions, fix header, add card icon styles

src/views/icons/Brands.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="cil-globe-alt"/>Brand icons
+        <CIcon name="cil-basket"/>Brand icons
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -14,7 +14,7 @@
               :key="brandName"
             >
               <CIcon :height="42" :content="brand"/>
-              <div>{{brandName}}</div>
+              <div>{{toKebabCase(brandName)}}</div>
             </CCol>
           </template>
         </CRow>
@@ -27,6 +27,11 @@
 import { brandSet as brands } from '@coreui/icons'
 export default {
   name: 'Brands',
-  brands
+  brands,
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
+  }
 }
 </script>

src/views/icons/CoreUIIcons.vue

@@ -3,7 +3,8 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
+        <CIcon :content="$options.freeSet.cilHandPointDown"/>
+        CoreUI Icons
         <CBadge color="info">New</CBadge>
         <div class="card-header-actions">
           <a
@@ -26,7 +27,7 @@
               :key="iconName"
             >
               <CIcon :height="42" :content="icon"/>
-              <div>{{iconName}}</div>
+              <div>{{toKebabCase(iconName)}}</div>
             </CCol>
           </template>
         </CRow>
@@ -39,6 +40,12 @@
 import { freeSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
-  freeSet
+  freeSet,
+  methods: {
+    toKebabCase (str) {
+      console.log(this.$options.freeSet, this.$options.freeSet.handPointDown)
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
+  }
 }
 </script>

src/views/icons/Flags.vue

@@ -13,15 +13,15 @@
             span. If you want to have a squared version flag then add the class
             flag-icon-squared as well. -->
           </CCol>
-          <template v-for="(flag, key) in displayedFlags">
+          <template v-for="(flag, flagName) in displayedFlags">
             <CCol
               class="mb-5"
               col="3"
               sm="2"
-              :key="key"
+              :key="flagName"
             >
               <CIcon :height="42" :content="flag"/>
-              <div>{{key}}</div>
+              <div>{{toKebabCase(flagName)}}</div>
             </CCol>
           </template>
         </CRow>
@@ -36,11 +36,14 @@ export default {
   name: 'Flags',
   flagSet,
   computed: {
-    // Avoid duplication caused by displaying 1x1 and 4x3 formats
-    // (adding Q to name makes icon quadratic)
     displayedFlags () {
       return this.$options.flagSet
     }
+  },
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
   }
 }
 </script>