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

Author: woothu

src/assets/scss/style.scss

@@ -6,3 +6,12 @@
 
 // If you want to add something do it here
 @import "custom";
+
+.card-header .c-icon:first-child {
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+  vertical-align: top;
+  width: 1.2rem;
+  height: 1.2rem;
+  font-size: 1.2rem;
+}

src/containers/TheHeader.vue

@@ -16,16 +16,15 @@
       width="97"
       height="46"
       alt="CoreUI Logo"
-      :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">
-        <CHeaderNavLink>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink to="/dashboard">
           Dashboard
         </CHeaderNavLink>
       </CHeaderNavItem>
-      <CHeaderNavItem class="px-3" to="/users" exact>
-        <CHeaderNavLink>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink to="/users" exact>
           Users
         </CHeaderNavLink>
       </CHeaderNavItem>

src/containers/_nav.js

@@ -216,7 +216,8 @@ export default [
         }
       },
       {
-        _name: 'CSidebarNavDivider'
+        _name: 'CSidebarNavDivider',
+        _class: 'm-2'
       },
       {
         _name: 'CSidebarNavTitle',

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>