refactor: add prefixes to icons

src/assets/icons/icons.js

@@ -1,151 +1,161 @@
 import {
-  facebook,
-  twitter,
-  linkedin,
-  flickr,
-  tumblr,
-  xing,
-  github,
-  stackOverflow,
-  youtube,
-  dribbble,
-  instagram,
-  pinterest,
-  vk,
-  yahoo,
-  behance,
-  reddit,
-  vimeo,
-  ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackOverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay, 
+  cibCcAmex
 } from '@coreui/icons'
 import {
-  US,
-  BR,
-  IN,
-  FR,
-  ES,
-  PL
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
 } from '@coreui/icons'
 import {
-  arrowRight,
-  ban,
-  basket,
-  bell,
-  calculator,
-  calendar,
-  cloudDownload,
-  chartPie,
-  check,
-  chevronBottom,
-  chevronTop,
-  // circleCheck,
-  commentSquare,
-  cursor,
-  drop,
-  dollar,
-  envelopeClosed,
-  envelopeOpen,
-  euro,
-  globeAlt,
-  file,
-  justifyCenter,
-  laptop,
-  layers,
-  lightbulb,
-  list,
-  locationPin,
-  lockLocked,
-  magnifyingGlass,
-  moon,
-  pencil,
-  people,
-  puzzle,
-  settings,
-  shieldAlt,
-  speech,
-  speedometer,
-  star,
-  task,
-  user,
-  userFemale,
-  userFollow,
-  xCircle
+  cilArrowRight,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronTop,
+  // cilCircleCheck,
+  cilCommentSquare,
+  cilCursor,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilFile,
+  cilJustifyCenter,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMoon,
+  cilPencil,
+  cilPeople,
+  cilPuzzle,
+  cilSettings,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilStar,
+  cilTask,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilXCircle
 
 } from '@coreui/icons'
 
 export const iconsSet = Object.assign(
   {},
   {
-    arrowRight,
-    ban,
-    basket,
-    bell,
-    calculator,
-    calendar,
-    cloudDownload,
-    chartPie,
-    check,
-    chevronBottom,
-    chevronTop,
-    // circleCheck,
-    commentSquare,
-    cursor,
-    drop,
-    dollar,
-    envelopeClosed,
-    envelopeOpen,
-    euro,
-    globeAlt,
-    file,
-    justifyCenter,
-    laptop,
-    layers,
-    lightbulb,
-    list,
-    locationPin,
-    lockLocked,
-    magnifyingGlass,
-    moon,
-    pencil,
-    people,
-    puzzle,
-    settings,
-    shieldAlt,
-    speech,
-    speedometer,
-    star,
-    task,
-    user,
-    userFemale,
-    userFollow,
-    xCircle
+    cilArrowRight,
+    cilBan,
+    cilBasket,
+    cilBell,
+    cilCalculator,
+    cilCalendar,
+    cilCloudDownload,
+    cilChartPie,
+    cilCheck,
+    cilChevronBottom,
+    cilChevronTop,
+    // cilCircleCheck,
+    cilCommentSquare,
+    cilCursor,
+    cilDrop,
+    cilDollar,
+    cilEnvelopeClosed,
+    cilEnvelopeOpen,
+    cilEuro,
+    cilGlobeAlt,
+    cilFile,
+    cilJustifyCenter,
+    cilLaptop,
+    cilLayers,
+    cilLightbulb,
+    cilList,
+    cilLocationPin,
+    cilLockLocked,
+    cilMagnifyingGlass,
+    cilMoon,
+    cilPencil,
+    cilPeople,
+    cilPuzzle,
+    cilSettings,
+    cilShieldAlt,
+    cilSpeech,
+    cilSpeedometer,
+    cilStar,
+    cilTask,
+    cilUser,
+    cilUserFemale,
+    cilUserFollow,
+    cilXCircle
   },
   {
-    US,
-    BR,
-    IN,
-    FR,
-    ES,
-    PL
+    cifUs,
+    cifBr,
+    cifIn,
+    cifFr,
+    cifEs,
+    cifPl
   },
   {
-    facebook,
-    twitter,
-    linkedin,
-    flickr,
-    tumblr,
-    xing,
-    github,
-    stackOverflow,
-    youtube,
-    dribbble,
-    instagram,
-    pinterest,
-    vk,
-    yahoo,
-    behance,
-    reddit,
-    vimeo,
-    ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+    cibFacebook,
+    cibTwitter,
+    cibLinkedin,
+    cibFlickr,
+    cibTumblr,
+    cibXing,
+    cibGithub,
+    cibStackOverflow,
+    cibYoutube,
+    cibDribbble,
+    cibInstagram,
+    cibPinterest,
+    cibVk,
+    cibYahoo,
+    cibBehance,
+    cibReddit,
+    cibVimeo,
+    cibCcMastercard, 
+    cibCcVisa, 
+    cibStripe, 
+    cibPaypal, 
+    cibGooglePay,
+    cibCcAmex
   }
 )

src/containers/TheHeader.vue

@@ -38,17 +38,17 @@
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <CIcon name="bell"/>
+          <CIcon name="cil-bell"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <CIcon name="list"/>
+          <CIcon name="cil-list"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <CIcon name="envelope-open"/>
+          <CIcon name="cil-envelope-open"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>

src/containers/TheHeaderDropdownAccnt.vue

@@ -19,19 +19,19 @@
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <CIcon name="bell"/> Updates
+      <CIcon name="cil-bell"/> Updates
       <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="envelope-open" /> Messages
+      <CIcon name="cil-envelope-open" /> Messages
       <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="task" /> Tasks
+      <CIcon name="cil-task" /> Tasks
       <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="comment-square" /> Comments
+      <CIcon name="cil-comment-square" /> Comments
       <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
@@ -42,25 +42,25 @@
       <strong>Settings</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <CIcon name="user" /> Profile
+      <CIcon name="cil-user" /> Profile
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="settings" /> Settings
+      <CIcon name="cil-settings" /> Settings
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="dollar" /> Payments
+      <CIcon name="cil-dollar" /> Payments
       <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="file" /> Projects
+      <CIcon name="cil-file" /> Projects
       <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>
-      <CIcon name="shield-alt" /> Lock Account
+      <CIcon name="cil-shield-alt" /> Lock Account
     </CDropdownItem>
     <CDropdownItem>
-      <CIcon name="lock-locked" /> Logout
+      <CIcon name="cil-lock-locked" /> Logout
     </CDropdownItem>
   </CDropdown>
 </template>

src/containers/_nav.js

@@ -6,7 +6,7 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Dashboard',
         to: '/dashboard',
-        icon: 'speedometer',
+        icon: 'cil-speedometer',
         badge: {
           color: 'primary',
           text: 'NEW'
@@ -20,13 +20,13 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Colors',
         to: '/theme/colors',
-        icon: 'drop'
+        icon: 'cil-drop'
       },
       {
         _name: 'CSidebarNavItem',
         name: 'Typography',
         to: '/theme/typography',
-        icon: 'pencil'
+        icon: 'cil-pencil'
       },
       {
         _name: 'CSidebarNavTitle',
@@ -36,87 +36,87 @@ export default [
         _name: 'CSidebarNavDropdown',
         name: 'Base',
         route: '/base',
-        icon: 'puzzle',
+        icon: 'cil-puzzle',
         items: [
           {
             name: 'Breadcrumbs',
             to: '/base/breadcrumbs',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Cards',
             to: '/base/cards',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Carousels',
             to: '/base/carousels',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           }, 
           {
             name: 'Collapses',
             to: '/base/collapses',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Forms',
             to: '/base/forms',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Jumbotrons',
             to: '/base/jumbotrons',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'List Groups',
             to: '/base/list-groups',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Navs',
             to: '/base/navs',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Navbars',
             to: '/base/navbars',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Paginations',
             to: '/base/paginations',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Popovers',
             to: '/base/popovers',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Progress Bars',
             to: '/base/progress-bars',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Switches',
             to: '/base/switches',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Tables',
             to: '/base/tables',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Tabs',
             to: '/base/tabs',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           },
           {
             name: 'Tooltips',
             to: '/base/tooltips',
-            icon: 'puzzle'
+            icon: 'cil-puzzle'
           }
         ]
       },
@@ -124,27 +124,27 @@ export default [
         _name: 'CSidebarNavDropdown',
         name: 'Buttons',
         route: '/buttons',
-        icon: 'cursor',
+        icon: 'cil-cursor',
         items: [
           {
             name: 'Buttons',
             to: '/buttons/standard-buttons',
-            icon: 'cursor'
+            icon: 'cil-cursor'
           },
           {
             name: 'Button Dropdowns',
             to: '/buttons/dropdowns',
-            icon: 'cursor'
+            icon: 'cil-cursor'
           },
           {
             name: 'Button Groups',
             to: '/buttons/button-groups',
-            icon: 'cursor'
+            icon: 'cil-cursor'
           },
           {
             name: 'Brand Buttons',
             to: '/buttons/brand-buttons',
-            icon: 'cursor'
+            icon: 'cil-cursor'
           }
         ]
       },
@@ -152,18 +152,18 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Charts',
         to: '/charts',
-        icon: 'chart-pie'
+        icon: 'cil-chart-pie'
       },
       {
         _name: 'CSidebarNavDropdown',
         name: 'Icons',
         route: '/icons',
-        icon: 'star',
+        icon: 'cil-star',
         items: [
           {
             name: 'CoreUI Icons',
             to: '/icons/coreui-icons',
-            icon: 'star',
+            icon: 'cil-star',
             badge: {
               color: 'info',
               text: 'NEW'
@@ -172,12 +172,12 @@ export default [
           {
             name: 'Brands',
             to: '/icons/brands',
-            icon: 'star'
+            icon: 'cil-star'
           },
           {
             name: 'Flags',
             to: '/icons/flags',
-            icon: 'star'
+            icon: 'cil-star'
           }
         ]
       },
@@ -185,22 +185,22 @@ export default [
         _name: 'CSidebarNavDropdown',
         name: 'Notifications',
         route: '/notifications',
-        icon: 'bell',
+        icon: 'cil-bell',
         items: [
           {
             name: 'Alerts',
             to: '/notifications/alerts',
-            icon: 'bell'
+            icon: 'cil-bell'
           },
           {
             name: 'Badges',
             to: '/notifications/badges',
-            icon: 'bell'
+            icon: 'cil-bell'
           },
           {
             name: 'Modals',
             to: '/notifications/modals',
-            icon: 'bell'
+            icon: 'cil-bell'
           }
         ]
       },
@@ -208,7 +208,7 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Widgets',
         to: '/widgets',
-        icon: 'calculator',
+        icon: 'cil-calculator',
         badge: {
           color: 'primary',
           text: 'NEW',
@@ -226,27 +226,27 @@ export default [
         _name: 'CSidebarNavDropdown',
         name: 'Pages',
         route: '/pages',
-        icon: 'star',
+        icon: 'cil-star',
         items: [
           {
             name: 'Login',
             to: '/pages/login',
-            icon: 'star'
+            icon: 'cil-star'
           },
           {
             name: 'Register',
             to: '/pages/register',
-            icon: 'star'
+            icon: 'cil-star'
           },
           {
             name: 'Error 404',
             to: '/pages/404',
-            icon: 'star'
+            icon: 'cil-star'
           },
           {
             name: 'Error 500',
             to: '/pages/500',
-            icon: 'star'
+            icon: 'cil-star'
           }
         ]
       },
@@ -254,7 +254,7 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Download CoreUI',
         href: 'http://coreui.io/vue/',
-        icon: { name: 'cloud-download', class: 'text-warning' },
+        icon: { name: 'cil-cloud-download', class: 'text-warning' },
         _class: 'bg-success text-white',
         target: '_blank'
       },
@@ -262,7 +262,7 @@ export default [
         _name: 'CSidebarNavItem',
         name: 'Try CoreUI PRO',
         href: 'http://coreui.io/pro/vue/',
-        icon: 'layers',
+        icon: 'cil-layers',
         _class: 'bg-danger text-white',
         target: '_blank'
       }

src/views/Dashboard.vue

@@ -10,7 +10,7 @@
           </CCol>
           <CCol sm="7" class="d-none d-md-block">
             <CButton color="primary" class="float-right">
-              <CIcon name="cloud-download"/>
+              <CIcon name="cil-cloud-download"/>
             </CButton>
             <CButtonGroup class="float-right mr-3">
               <CButton
@@ -269,7 +269,7 @@
                 <ul class="horizontal-bars type-2">
                   <div class="progress-group">
                     <div class="progress-group-header">
-                      <CIcon name="user" class="progress-group-icon"/>
+                      <CIcon name="cil-user" class="progress-group-icon"/>
                       <span class="title">Male</span>
                       <span class="ml-auto font-weight-bold">43%</span>
                     </div>
@@ -283,7 +283,7 @@
                   </div>
                   <div class="progress-group mb-5">
                     <div class="progress-group-header">
-                      <CIcon name="user-female" class="progress-group-icon"/>
+                      <CIcon name="cil-user-female" class="progress-group-icon"/>
                       <span class="title">Female</span>
                       <span class="ml-auto font-weight-bold">37%</span>
                     </div>
@@ -297,7 +297,7 @@
                   </div>
                   <div class="progress-group">
                     <div class="progress-group-header">
-                      <CIcon name="globe-alt" class="progress-group-icon"/>
+                      <CIcon name="cil-globe-alt" class="progress-group-icon"/>
                       <span class="title">Organic Search</span>
                       <span class="ml-auto font-weight-bold">
                         191,235<span class="text-muted small">(56%)</span>
@@ -314,7 +314,7 @@
                   <div class="progress-group">
                     <div class="progress-group-header">
                       <CIcon
-                        name="facebook"
+                        name="cib-facebook"
                         height="17"
                         class="progress-group-icon"
                       />
@@ -334,7 +334,7 @@
                   <div class="progress-group">
                     <div class="progress-group-header">
                       <CIcon
-                        name="twitter"
+                        name="cib-twitter"
                         height="17"
                         class="progress-group-icon"
                       />
@@ -354,7 +354,7 @@
                   <div class="progress-group">
                     <div class="progress-group-header">
                       <CIcon
-                        name="linkedin"
+                        name="cib-linkedin"
                         height="17"
                         class="progress-group-icon"
                       />
@@ -373,7 +373,7 @@
                   </div>
                   <div class="divider text-center">
                     <CButton color="link" size="sm" class="text-muted">
-                      <CIcon name="options"/>
+                      <CIcon name="cil-options"/>
                     </CButton>
                   </div>
                 </ul>
@@ -472,49 +472,49 @@ export default {
         {
           avatar: { url: 'img/avatars/1.jpg', status: 'success' },
           user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'USA', flag: 'US' },
+          country: { name: 'USA', flag: 'cif-us' },
           usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'cc-mastercard' },
+          payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
           activity: '10 sec ago'
         },
         {
           avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
           user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
-          country: { name: 'Brazil', flag: 'BR' },
+          country: { name: 'Brazil', flag: 'cif-br' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Visa', icon: 'cc-visa' },
+          payment: { name: 'Visa', icon: 'cib-cc-visa' },
           activity: '5 minutes ago'
         },
         {
           avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
           user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'India', flag: 'IN' },
+          country: { name: 'India', flag: 'cif-in' },
           usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Stripe', icon: 'stripe' },
+          payment: { name: 'Stripe', icon: 'cib-stripe' },
           activity: '1 hour ago'
         },
         {
           avatar: { url: 'img/avatars/4.jpg', status: '' },
           user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'France', flag: 'FR' },
+          country: { name: 'France', flag: 'cif-fr' },
           usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'PayPal', icon: 'paypal' },
+          payment: { name: 'PayPal', icon: 'cib-paypal' },
           activity: 'Last month'
         },
         {
           avatar: { url: 'img/avatars/5.jpg', status: 'success' },
           user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Spain', flag: 'ES' },
+          country: { name: 'Spain', flag: 'cif-es' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Google Wallet', icon: 'google-wallet' },
+          payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
           activity: 'Last week'
         },
         {
           avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
           user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Poland', flag: 'PL' },
+          country: { name: 'Poland', flag: 'cif-pl' },
           usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Amex', icon: 'cc-amex' },
+          payment: { name: 'Amex', icon: 'cib-cc-amex' },
           activity: 'Last week'
         }
       ],

src/views/base/Breadcrumbs.vue

@@ -3,7 +3,7 @@
     <CCol col>
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/><strong> Bootstrap Breadcrumb</strong>
+          <CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
           <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 

src/views/base/Cards.vue

@@ -29,7 +29,7 @@
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
-          <CCardHeader><CIcon name="check"/> Card with icon</CCardHeader>
+          <CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
           <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
@@ -247,13 +247,13 @@
               Card with header actions
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <CIcon name="settings"/>
+                  <CIcon name="cil-settings"/>
                 </CLink>
                 <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <CIcon :name="`chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
+                  <CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
-                  <CIcon name="x-circle"/>
+                  <CIcon name="cil-x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>

src/views/base/Carousels.vue

@@ -3,7 +3,7 @@
     <CCol md="12" lg="7">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Carousel</strong>
           <div class="card-header-actions">
             <a 

src/views/base/Collapses.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Collapse </strong>
           <div class="card-header-actions">
             <a 

src/views/base/Forms.vue

@@ -245,8 +245,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -276,8 +276,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -307,8 +307,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -337,8 +337,8 @@
               />
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
-              <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
@@ -399,8 +399,8 @@
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><CIcon name="user"/> Login</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -427,8 +427,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -489,25 +489,25 @@
           </CCardHeader>
           <CCardBody>
             <CInput placeholder="Username">
-              <template #prepend-content><CIcon name="user"/></template>
+              <template #prepend-content><CIcon name="cil-user"/></template>
             </CInput>
             <CInput
               type="email"
               placeholder="Email"
               autocomplete="email"
             >
-              <template #append-content><CIcon name="envelope-open"/></template>
+              <template #append-content><CIcon name="cil-envelope-open"/></template>
             </CInput>
             <CInput
               placeholder="ex. $1.000.000"
               append=".00"
             >
-              <template #prepend-content><CIcon name="euro"/></template>
+              <template #prepend-content><CIcon name="cil-euro"/></template>
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -520,7 +520,7 @@
             <CInput placeholder="Username">
               <template #prepend>
                 <CButton color="primary">
-                  <CIcon name="magnifying-glass"/> Search
+                  <CIcon name="cil-magnifying-glass"/> Search
                 </CButton>
               </template>
             </CInput>
@@ -539,16 +539,16 @@
               autocomplete="email"
             >
               <template #prepend>
-                <CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cil-facebook" height="14"/></CButton>
               </template>
               <template #append>
-                <CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cil-twitter" height="14"/></CButton>
               </template>
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -620,8 +620,8 @@
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -693,21 +693,21 @@
           <CCardBody>
             <CForm>
               <CInput prepend="Username">
-                <template #append-content><CIcon name="user"/></template>
+                <template #append-content><CIcon name="cil-user"/></template>
               </CInput>
               <CInput
                 type="email"
                 autocomplete="email"
                 prepend="Email"
               >
-                <template #append-content><CIcon name="envelope-closed"/></template>
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
               </CInput>
               <CInput
                 type="password"
                 autocomplete="current-password"
                 prepend="Password"
               >
-                <template #append-content><CIcon name="shield-alt"/></template>
+                <template #append-content><CIcon name="cil-shield-alt"/></template>
               </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="primary">
@@ -726,21 +726,21 @@
           <CCardBody>
             <CForm>
               <CInput placeholder="Username">
-                <template #append-content><CIcon name="user"/></template>
+                <template #append-content><CIcon name="cil-user"/></template>
               </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
               >
-                <template #append-content><CIcon name="envelope-closed"/></template>
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
               </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
               >
-                <template #append-content><CIcon name="shield-alt"/></template>
+                <template #append-content><CIcon name="cil-shield-alt"/></template>
               </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" class="btn btn-sm btn-secondary">
@@ -759,21 +759,21 @@
           <CCardBody>
             <CForm>
               <CInput placeholder="Username">
-                <template #prepend-content><CIcon name="user"/></template>
+                <template #prepend-content><CIcon name="cil-user"/></template>
               </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
               >
-                <template #prepend-content><CIcon name="envelope-closed"/></template>
+                <template #prepend-content><CIcon name="cil-envelope-closed"/></template>
               </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
               >
-                <template #prepend-content><CIcon name="shield-alt"/></template>
+                <template #prepend-content><CIcon name="cil-shield-alt"/></template>
               </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="success">
@@ -790,19 +790,19 @@
         <transition name="fade">
           <CCard v-if="show">
             <CCardHeader>
-              <CIcon name="pencil"/> Form Elements
+              <CIcon name="cil-pencil"/> Form Elements
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <CIcon name="settings"/>
+                  <CIcon name="cil-settings"/>
                 </CLink>
                 <CLink
                   class="card-header-action btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
-                  <CIcon :name="`chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
+                  <CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <CIcon name="x-circle"/>
+                  <CIcon name="cil-x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>

src/views/base/Jumbotrons.vue

@@ -4,7 +4,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Bootstrap Jumbotron </strong>
             <div class="card-header-actions">
               <a 
@@ -30,7 +30,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/> <strong> Jumbotron </strong>
+            <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
             <small>with slots</small>
           </CCardHeader>
           <CCardBody>
@@ -56,7 +56,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/> <strong> Jumbotron </strong>
+            <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
             <small>colors</small>
           </CCardHeader>
           <CCardBody>

src/views/base/ListGroups.vue

@@ -4,7 +4,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Bootstrap list group </strong>
             <div class="card-header-actions">
               <a 
@@ -31,7 +31,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/><strong> List group </strong><small>active items</small>
+            <CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>
@@ -49,7 +49,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>disabled items</small>
           </CCardHeader>
@@ -67,7 +67,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>actionable items</small>
           </CCardHeader>
@@ -86,7 +86,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>buttons</small>
           </CCardHeader>
@@ -103,7 +103,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>with badges</small>
           </CCardHeader>
@@ -136,7 +136,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>colors</small>
           </CCardHeader>
@@ -158,7 +158,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>colors active</small>
           </CCardHeader>
@@ -182,7 +182,7 @@
       <CCol col="12">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>inside cards</small>
           </CCardHeader>
@@ -229,7 +229,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/><strong> List group </strong><small>custom content</small>
+            <CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>

src/views/base/Navbars.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navbar </strong>
         <div class="card-header-actions">
           <a 
@@ -67,7 +67,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>brand</small>
       </CCardHeader>
       <CCardBody>
@@ -82,7 +82,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>text</small>
       </CCardHeader>
       <CCardBody>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>dropdown</small>
       </CCardHeader>
       <CCardBody>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>form</small>
       </CCardHeader>
       <CCardBody>
@@ -153,7 +153,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>input group</small>
       </CCardHeader>
       <CCardBody>

src/views/base/Navs.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/><strong> Bootstrap Navs</strong>
+        <CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
         <div class="card-header-actions">
           <a 
             href="https://coreui.io/vue/docs/3.0/components/Nav" 
@@ -25,14 +25,14 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>icons</small>
       </CCardHeader>
       <CCardBody>
         <CNav>
           <CNavItem active>
-            <CIcon name="basket"/>
+            <CIcon name="cil-basket"/>
           </CNavItem>
           <CNavItem>
             Link
@@ -46,7 +46,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>tab style</small>
       </CCardHeader>
@@ -67,7 +67,7 @@
     </CCard>
     <CCard>
       <CCardHeader @click="item++">
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>pill style</small>
       </CCardHeader>
@@ -82,7 +82,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>fill tabs</small>
       </CCardHeader>
@@ -97,7 +97,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>justified tabs</small>
       </CCardHeader>
@@ -112,7 +112,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>dropdown support</small>
       </CCardHeader>
@@ -137,7 +137,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>vertical variation</small>
       </CCardHeader>

src/views/base/Paginations.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Responsive bootstrap Pagination</strong>
         <div class="card-header-actions">
           <a 
@@ -47,7 +47,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Pagination </strong>
         <small>alignment</small>
       </CCardHeader>

src/views/base/Popovers.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Popovers</strong>
         <div class="card-header-actions">
           <a 
@@ -49,7 +49,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Popovers </strong>
         <small>placement</small>
       </CCardHeader>

src/views/base/ProgressBars.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Progress</strong>
         <div class="card-header-actions">
           <a 
@@ -33,7 +33,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/> <strong> Progress </strong><small>labels</small>
+        <CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
       </CCardHeader>
       <CCardBody>
         <h6>No label</h6>
@@ -50,7 +50,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>width</small>
       </CCardHeader>
@@ -65,7 +65,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>height</small>
       </CCardHeader>
@@ -80,7 +80,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>colors</small>
       </CCardHeader>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>striped</small>
       </CCardHeader>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>animated</small>
       </CCardHeader>
@@ -174,7 +174,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>multiple bars</small>
       </CCardHeader>

src/views/base/Table.vue

@@ -1,7 +1,7 @@
 <template>
   <CCard>
     <CCardHeader>
-      <CIcon name="justify-center"/> {{caption}}
+      <CIcon name="cil-justify-center"/> {{caption}}
     </CCardHeader>
     <CCardBody>
       <CDataTable

src/views/base/Tabs.vue

@@ -84,7 +84,7 @@
             <CTabs>
               <CTab active>
                 <template slot="title">
-                  <CIcon name="calculator"/>
+                  <CIcon name="cil-calculator"/>
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -94,7 +94,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="basket"/>
+                  <CIcon name="cil-basket"/>
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="chart-pie"/>
+                  <CIcon name="cil-chart-pie"/>
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -125,7 +125,7 @@
             <CTabs add-tab-classes="mt-1">
               <CTab active>
                 <template slot="title">
-                  <CIcon name="calculator"/> {{tabs[0]}}
+                  <CIcon name="cil-calculator"/> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -135,7 +135,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="basket"/> {{tabs[1]}}
+                  <CIcon name="cil-basket"/> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="chart-pie"/> {{tabs[2]}}
+                  <CIcon name="cil-chart-pie"/> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -166,7 +166,7 @@
             <CTabs variant="pills" vertical>
               <CTab active>
                 <template slot="title">
-                  <CIcon name="calculator"/> {{tabs[0]}}
+                  <CIcon name="cil-calculator"/> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -176,7 +176,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="basket"/> {{tabs[1]}}
+                  <CIcon name="cil-basket"/> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -186,7 +186,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <CIcon name="chart-pie"/> {{tabs[2]}}
+                  <CIcon name="cil-chart-pie"/> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

src/views/base/Tooltips.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Tooltips </strong>
         <small><code>v-c-tooltip</code> directive</small>
         <div class="card-header-actions">
@@ -43,7 +43,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="justify-center"/>
+        <CIcon name="cil-justify-center"/>
         <strong> Tooltips </strong>
         <small>placement</small>
       </CCardHeader>

src/views/buttons/BrandButtons.vue

@@ -31,7 +31,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon size="sm" :name="brandName"/>
+                <CIcon size="sm" :name="'cib-' + brandName"/>
                 <span>{{brandName}}</span>
               </CButton>
             </template>
@@ -44,7 +44,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon :name="brandName"/>
+                <CIcon :name="'cib-' + brandName"/>
                 <span>{{brandName}}</span>
               </CButton>
             </template>
@@ -58,7 +58,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon size="lg" :name="brandName"/>
+                <CIcon size="lg" :name="'cib-' + brandName"/>
                 <span>{{brandName}}</span>
               </CButton>
             </template>
@@ -84,7 +84,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon size="sm" :name="brandName"/>
+                <CIcon size="sm" :name="'cib-' + brandName"/>
               </CButton>
             </template>
           </p>
@@ -96,7 +96,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon :name="brandName"/>
+                <CIcon :name="'cib-' + brandName"/>
               </CButton>
             </template>
           </p>
@@ -109,7 +109,7 @@
                 :key="key"
                 :color="brandName"
               >
-                <CIcon size="lg" :name="brandName"/>
+                <CIcon size="lg" :name="'cib-' + brandName"/>
               </CButton>
             </template>
           </p>
@@ -132,7 +132,6 @@
           <p>
             <template v-for="(brandName, key) in $options.brands">
               <CButton
-                :name="brandName"
                 size="sm"
                 :key="key"
                 :color="brandName"
@@ -145,7 +144,6 @@
           <p>
             <template v-for="(brandName, key) in $options.brands">
               <CButton
-                :name="brandName"
                 :key="key"
                 :color="brandName"
               >
@@ -157,7 +155,6 @@
           <p>
             <template v-for="(brandName, key) in $options.brands">
               <CButton
-                :name="brandName"
                 size="lg"
                 :key="key"
                 :color="brandName"
@@ -176,8 +173,8 @@
 export default {
   name: 'BrandButtons',
   usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
-  iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
-  textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
+  iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
+  textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
   brands: [
     'facebook',
     'twitter',

src/views/buttons/ButtonGroups.vue

@@ -3,7 +3,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap button group</strong>
           <div class="card-header-actions">
             <a 
@@ -41,7 +41,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Button group </strong>sizing
         </CCardHeader>
         <CCardBody>
@@ -70,7 +70,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/><strong> Button group </strong>dropdown support
+          <CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
         </CCardHeader>
         <CCardBody>
           <div>
@@ -98,7 +98,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Button group </strong>vertical variation
         </CCardHeader>
         <CCardBody>
@@ -115,7 +115,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Button toolbar </strong>
           <small>with button groups</small>
           <!-- <div class="card-header-actions">

src/views/buttons/Dropdowns.vue

@@ -4,7 +4,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Bootstrap Dropdown</strong>
             <div class="card-header-actions">
               <a 
@@ -69,7 +69,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>positioning</small>
           </CCardHeader>
@@ -140,7 +140,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>hidden caret</small>
           </CCardHeader>
@@ -165,7 +165,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>sizing</small>
           </CCardHeader>
@@ -222,7 +222,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>headers and accessibility</small>
           </CCardHeader>
@@ -254,7 +254,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <CIcon name="justify-center"/>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small><code>color</code></small>
           </CCardHeader>

src/views/buttons/StandardButtons.vue

@@ -604,27 +604,27 @@
         <CRow class="align-items-center">
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="primary">
-              <CIcon name="lightbulb"/>&nbsp;Standard Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Standard Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="secondary" variant="outline">
-              <CIcon name="lightbulb"/>&nbsp;Outline Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Outline Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="success">
-              <CIcon name="lightbulb"/>&nbsp;Ghost Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Ghost Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="warning" square>
-              <CIcon name="lightbulb"/>&nbsp;Square Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Square Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="danger" shape="pill">
-              <CIcon name="lightbulb"/>&nbsp;Pill Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Pill Button
             </CButton>
           </CCol>
         </CRow>

src/views/icons/Brands.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="globe-alt"/>Font Awesome brand icons
+        <CIcon name="cil-globe-alt"/>Brand icons
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">

src/views/icons/Flags.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="globe-alt"/> Flags
+        <CIcon name="cil-globe-alt"/> Flags
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">

src/views/notifications/Alerts.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Alert</strong>
           <div class="card-header-actions">
             <a 
@@ -34,7 +34,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Alert
+          <CIcon name="cil-justify-center"/> Alert
           <small> use <code>.alert-link</code> to provide links</small>
         </CCardHeader>
         <CCardBody>
@@ -72,7 +72,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Alerts <small>with additional content</small>
+          <CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
         </CCardHeader>
         <CCardBody>
           <CAlert show color="success">
@@ -93,7 +93,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
           <small>dismissible</small>
         </CCardHeader>
         <CCardBody>
@@ -131,7 +131,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
           <small>auto dismissible</small>
         </CCardHeader>
         <CCardBody>

src/views/notifications/Badges.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Badge</strong>
           <div class="card-header-actions">
             <a 
@@ -34,7 +34,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Badge
+          <CIcon name="cil-justify-center"/> Badge
           <small>contextual variations</small>
         </CCardHeader>
         <CCardBody>
@@ -50,7 +50,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Badge
+          <CIcon name="cil-justify-center"/> Badge
           <small>shape="pill"</small>
         </CCardHeader>
         <CCardBody>
@@ -66,7 +66,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <CIcon name="justify-center"/> Badge
+          <CIcon name="cil-justify-center"/> Badge
           <small>actionable</small>
         </CCardHeader>
         <CCardBody>

src/views/notifications/Modals.vue

@@ -5,7 +5,7 @@
         <CCol col="12">
           <CCard>
             <CCardHeader>
-              <CIcon name="justify-center"/> Bootstrap Modals
+              <CIcon name="cil-justify-center"/> Bootstrap Modals
               <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Modal" 

src/views/pages/Login.vue

@@ -12,14 +12,14 @@
                   placeholder="Username"
                   autocomplete="username email"
                 >
-                  <template #prepend-content><CIcon name="user"/></template>
+                  <template #prepend-content><CIcon name="cil-user"/></template>
                 </CInput>
                 <CInput
                   placeholder="Password"
                   type="password"
                   autocomplete="curent-password"
                 >
-                  <template #prepend-content><CIcon name="lock-locked"/></template>
+                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                 </CInput>
                 <CRow>
                   <CCol col="6">

src/views/pages/Page404.vue

@@ -12,7 +12,7 @@
           class="mb-3"
           placeholder="What are you looking for?"
         >
-          <template #prepend-content><CIcon name="magnifying-glass"/></template>
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Page500.vue

@@ -11,7 +11,7 @@
           class="mb-3"
           placeholder="What are you looking for?"
         >
-          <template #prepend-content><CIcon name="magnifying-glass"/></template>
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Register.vue

@@ -11,7 +11,7 @@
                 placeholder="Username"
                 autocomplete="username"
               >
-                <template #prepend-content><CIcon name="user"/></template>
+                <template #prepend-content><CIcon name="cil-user"/></template>
               </CInput>
               <CInput
                 placeholder="Email"
@@ -23,7 +23,7 @@
                 type="password"
                 autocomplete="new-password"
               >
-                <template #prepend-content><CIcon name="lock-locked"/></template>
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
               </CInput>
               <CInput
                 placeholder="Repeat password"
@@ -31,7 +31,7 @@
                 autocomplete="new-password"
                 class="mb-4"
               >
-                <template #prepend-content><CIcon name="lock-locked"/></template>
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
               </CInput>
               <CButton color="success" block>Create Account</CButton>
             </CForm>

src/views/theme/Colors.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <CIcon name="drop"/> Theme colors
+        <CIcon name="cil-drop"/> Theme colors
       </CCardHeader>
       <CCardBody>
         <CRow>
@@ -21,7 +21,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <CIcon name="drop"/> Grays
+        <CIcon name="cil-drop"/> Grays
       </CCardHeader>
       <CCardBody>
         <CRow>

src/views/widgets/Widgets.vue

@@ -103,7 +103,7 @@
           text="Income"
           color="primary"
         >
-          <CIcon name="settings" width="24"/>
+          <CIcon name="cil-settings" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -112,7 +112,7 @@
           text="Income"
           color="info"
         >
-          <CIcon name="laptop" width="24"/>
+          <CIcon name="cil-laptop" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -121,7 +121,7 @@
           text="Income"
           color="warning"
         >
-          <CIcon name="moon" width="24"/>
+          <CIcon name="cil-moon" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -130,7 +130,7 @@
           text="Income"
           color="danger"
         >
-          <CIcon name="bell" width="24"/>
+          <CIcon name="cil-bell" width="24"/>
         </CWidgetIcon>
       </CCol>
     </CRow>
@@ -142,7 +142,7 @@
           color="primary"
           :icon-padding="false"
         >
-          <CIcon name="settings" width="24"/>
+          <CIcon name="cil-settings" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -152,7 +152,7 @@
           color="info"
           :icon-padding="false"
         >
-          <CIcon name="laptop" width="24"/>
+          <CIcon name="cil-laptop" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -162,7 +162,7 @@
           color="warning"
           :icon-padding="false"
         >
-          <CIcon name="moon" width="24"/>
+          <CIcon name="cil-moon" width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
@@ -172,7 +172,7 @@
           color="danger"
           :icon-padding="false"
         >
-          <CIcon name="bell" width="24"/>
+          <CIcon name="cil-bell" width="24"/>
         </CWidgetIcon>
       </CCol>
     </CRow>
@@ -184,7 +184,7 @@
           color="primary"
           :icon-padding="false"
         >
-          <CIcon name="settings" class="mx-5 " width="24"/>
+          <CIcon name="cil-settings" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
           color="info"
           :icon-padding="false"
         >
-          <CIcon name="laptop" class="mx-5 " width="24"/>
+          <CIcon name="cil-laptop" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -204,7 +204,7 @@
           color="warning"
           :icon-padding="false"
         >
-          <CIcon name="moon" class="mx-5 " width="24"/>
+          <CIcon name="cil-moon" class="mx-5 " width="24"/>
           <template #footer>
             <CCardFooter class="card-footer px-3 py-2">
               <CLink
@@ -212,7 +212,7 @@
                 href="https://coreui.io/"
               >
                 View more
-                <CIcon name="arrowRight" class="float-right" width="16"/>
+                <CIcon name="cil-arrowRight" class="float-right" width="16"/>
               </CLink>
             </CCardFooter>
           </template>
@@ -228,7 +228,7 @@
           :icon-padding="false"
           link="#"
         >
-          <CIcon name="settings" class="mx-5 " width="24"/>
+          <CIcon name="cil-settings" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
           :icon-padding="false"
           link="#"
         >
-          <CIcon name="laptop" class="mx-5 " width="24"/>
+          <CIcon name="cil-laptop" class="mx-5 " width="24"/>
         </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
@@ -250,7 +250,7 @@
           :icon-padding="false"
           link="#"
         >
-          <CIcon name="moon" class="mx-5" width="24"/>
+          <CIcon name="cil-moon" class="mx-5" width="24"/>
         </CWidgetIcon>
       </CCol>
     </CRow> -->
@@ -262,34 +262,34 @@
         text="Visitors"
         color="info"
       >
-        <CIcon name="people" height="36"/>
+        <CIcon name="cil-people" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="385"
         text="New Clients"
         color="success"
       >
-        <CIcon name="userFollow" height="36"/>
+        <CIcon name="cil-userFollow" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="1238"
         text="Products sold"
         color="warning"
       >
-        <CIcon name="basket" height="36"/>
+        <CIcon name="cil-basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
         text="Returning Visitors"
       >
-        <CIcon name="chartPie" height="36"/>
+        <CIcon name="cil-chartPie" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="5:34:11"
         text="Avg. Time"
         color="danger"
       >
-        <CIcon name="speedometer" height="36"/>
+        <CIcon name="cil-speedometer" height="36"/>
       </CWidgetProgressIcon>
     </CCardGroup>
     <CCardGroup class="mb-4">
@@ -299,7 +299,7 @@
         color="info"
         inverse
       >
-        <CIcon name="people" height="36"/>
+        <CIcon name="cil-people" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="385"
@@ -307,7 +307,7 @@
         color="success"
         inverse
       >
-        <CIcon name="userFollow" height="36"/>
+        <CIcon name="cil-userFollow" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="1238"
@@ -315,7 +315,7 @@
         color="warning"
         inverse
       >
-        <CIcon name="basket" height="36"/>
+        <CIcon name="cil-basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
@@ -323,7 +323,7 @@
         color="primary"
         inverse
       >
-        <CIcon name="chartPie" height="36"/>
+        <CIcon name="cil-chartPie" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="5:34:11"
@@ -331,7 +331,7 @@
         color="danger"
         inverse
       >
-        <CIcon name="speedometer" height="36"/>
+        <CIcon name="cil-speedometer" height="36"/>
       </CWidgetProgressIcon>
     </CCardGroup>
     <CRow>
@@ -341,7 +341,7 @@
           text="Visitors"
           color="info"
         >
-          <CIcon name="people" height="36"/>
+          <CIcon name="cil-people" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -350,7 +350,7 @@
           text="New Clients"
           color="success"
         >
-          <CIcon name="userFollow" height="36"/>
+          <CIcon name="cil-userFollow" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -359,7 +359,7 @@
           text="Products sold"
           color="warning"
         >
-          <CIcon name="basket" height="36"/>
+          <CIcon name="cil-basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -368,7 +368,7 @@
           text="Returning Visitors"
           color="primary"
         >
-          <CIcon name="chartPie" height="36"/>
+          <CIcon name="cil-chartPie" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -377,7 +377,7 @@
           text="Avg. Time"
           color="danger"
         >
-          <CIcon name="speedometer" height="36"/>
+          <CIcon name="cil-speedometer" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -386,7 +386,7 @@
           text="comments"
           color="info"
         >
-          <CIcon name="speech" height="36"/>
+          <CIcon name="cil-speech" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
     </CRow>
@@ -398,7 +398,7 @@
           color="info"
           inverse
         >
-          <CIcon name="people" height="36"/>
+          <CIcon name="cil-people" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -408,7 +408,7 @@
           color="success"
           inverse
         >
-          <CIcon name="userFollow" height="36"/>
+          <CIcon name="cil-userFollow" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -418,7 +418,7 @@
           color="warning"
           inverse
         >
-          <CIcon name="basket" height="36"/>
+          <CIcon name="cil-basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -428,7 +428,7 @@
           color="primary"
           inverse
         >
-          <CIcon name="chartPie" height="36"/>
+          <CIcon name="cil-chartPie" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -438,7 +438,7 @@
           color="danger"
           inverse
         >
-          <CIcon name="speedometer" height="36"/>
+          <CIcon name="cil-speedometer" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -448,7 +448,7 @@
           color="info"
           inverse
         >
-          <CIcon name="speech" height="36"/>
+          <CIcon name="cil-speech" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
     </CRow>

src/views/widgets/WidgetsBrand.vue

@@ -10,7 +10,7 @@
           left-footer="feeds"
         >
           <CIcon
-            name="facebook"
+            name="cib-facebook"
             height="52"
             class="my-4"
           />
@@ -32,7 +32,7 @@
           left-footer="tweets"
         >
           <CIcon
-            name="twitter"
+            name="cib-twitter"
             height="52"
             class="my-4"
           />
@@ -54,7 +54,7 @@
           left-footer="feeds"
         >
           <CIcon
-            name="linkedin"
+            name="cib-linkedin"
             height="52"
             class="my-4"
           />
@@ -76,7 +76,7 @@
           color="warning"
         >
           <CIcon
-            name="calendar"
+            name="cil-calendar"
             height="52"
             class="my-4"
           />
@@ -100,7 +100,7 @@
           left-footer="feeds"
         >
           <CIcon
-            name="facebook"
+            name="cib-facebook"
             height="56"
             class="my-4"
           />
@@ -115,7 +115,7 @@
           left-footer="tweets"
         >
           <CIcon
-            name="twitter"
+            name="cib-twitter"
             height="56"
             class="my-4"
           />
@@ -130,7 +130,7 @@
           left-footer="feeds"
         >
           <CIcon
-            name="linkedin"
+            name="cib-linkedin"
             height="56"
             class="my-4"
           />
@@ -145,7 +145,7 @@
           color="warning"
         >
           <CIcon
-            name="calendar"
+            name="cil-calendar"
             height="56"
             class="my-4"
           />

src/views/widgets/WidgetsDropdown.vue

@@ -9,7 +9,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-              <CIcon name="settings"/>
+              <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -40,7 +40,7 @@
             :caret="false"
           >
             <template #toggler-content>
-              <CIcon name="location-pin"/>
+              <CIcon name="cil-location-pin"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -75,7 +75,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-              <CIcon name="settings"/>
+              <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -109,7 +109,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-             <CIcon name="settings"/>
+             <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>

tests/unit/containers/__snapshots__/TheHeader.spec.js.snap

@@ -40,9 +40,7 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         
@@ -60,9 +58,7 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         
@@ -78,9 +74,7 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         
@@ -100,13 +94,11 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         <cicon-stub
-          name="bell"
+          name="cil-bell"
         />
       </cheadernavlink-stub>
     </cheadernavitem-stub>
@@ -118,13 +110,11 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         <cicon-stub
-          name="list"
+          name="cil-list"
         />
       </cheadernavlink-stub>
     </cheadernavitem-stub>
@@ -136,13 +126,11 @@ exports[`TheHeader.vue renders correctly 1`] = `
         activeclass="active"
         event="click"
         exactactiveclass="active"
-        innavitem="true"
         routertag="a"
-        tag="span"
         target="_self"
       >
         <cicon-stub
-          name="envelope-open"
+          name="cil-envelope-open"
         />
       </cheadernavlink-stub>
     </cheadernavitem-stub>

tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap

@@ -29,7 +29,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="bell"
+      name="cil-bell"
     />
      Updates
     
@@ -39,7 +39,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="info"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -56,7 +55,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="envelope-open"
+      name="cil-envelope-open"
     />
      Messages
     
@@ -66,7 +65,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="success"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -83,7 +81,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="task"
+      name="cil-task"
     />
      Tasks
     
@@ -93,7 +91,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="danger"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -110,7 +107,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="comment-square"
+      name="cil-comment-square"
     />
      Comments
     
@@ -120,7 +117,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="warning"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -147,7 +143,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="user"
+      name="cil-user"
     />
      Profile
   
@@ -161,7 +157,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="settings"
+      name="cil-settings"
     />
      Settings
   
@@ -175,7 +171,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="dollar"
+      name="cil-dollar"
     />
      Payments
     
@@ -185,7 +181,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="secondary"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -202,7 +197,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="file"
+      name="cil-file"
     />
      Projects
     
@@ -212,7 +207,6 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
       color="primary"
       event="click"
       exactactiveclass="active"
-      innavitem="true"
       routertag="a"
       tag="span"
       target="_self"
@@ -233,7 +227,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="shield-alt"
+      name="cil-shield-alt"
     />
      Lock Account
   
@@ -247,7 +241,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     target="_self"
   >
     <cicon-stub
-      name="lock-locked"
+      name="cil-lock-locked"
     />
      Logout
   

tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap

@@ -17,7 +17,7 @@ exports[`TheSidebar.vue renders correctly 1`] = `
    
   <crenderfunction-stub
     contenttorender="[object Object]"
-    flat=""
+    flat="true"
   />
    
   <csidebarminimizer-stub

tests/unit/views/__snapshots__/Dashboard.spec.js.snap

@@ -43,7 +43,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
             type="button"
           >
             <cicon-stub
-              name="cloud-download"
+              name="cil-cloud-download"
             />
           </cbutton-stub>
            
@@ -573,7 +573,6 @@ exports[`Dashboard.vue renders correctly 1`] = `
                       color="info"
                       event="click"
                       exactactiveclass="active"
-                      innavitem="true"
                       routertag="a"
                       shape="pill"
                       tag="span"
@@ -592,7 +591,6 @@ exports[`Dashboard.vue renders correctly 1`] = `
                       color="danger"
                       event="click"
                       exactactiveclass="active"
-                      innavitem="true"
                       routertag="a"
                       shape="pill"
                       tag="span"
@@ -676,7 +674,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   >
                     <cicon-stub
                       class="progress-group-icon"
-                      name="user"
+                      name="cil-user"
                     />
                      
                     <span
@@ -713,7 +711,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   >
                     <cicon-stub
                       class="progress-group-icon"
-                      name="user-female"
+                      name="cil-user-female"
                     />
                      
                     <span
@@ -750,7 +748,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   >
                     <cicon-stub
                       class="progress-group-icon"
-                      name="globe-alt"
+                      name="cil-globe-alt"
                     />
                      
                     <span
@@ -794,7 +792,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     <cicon-stub
                       class="progress-group-icon"
                       height="17"
-                      name="facebook"
+                      name="cib-facebook"
                     />
                      
                     <span
@@ -838,7 +836,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     <cicon-stub
                       class="progress-group-icon"
                       height="17"
-                      name="twitter"
+                      name="cib-twitter"
                     />
                      
                     <span
@@ -882,7 +880,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     <cicon-stub
                       class="progress-group-icon"
                       height="17"
-                      name="linkedin"
+                      name="cib-linkedin"
                     />
                      
                     <span
@@ -932,7 +930,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     type="button"
                   >
                     <cicon-stub
-                      name="options"
+                      name="cil-options"
                     />
                   </cbutton-stub>
                 </div>

tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap

@@ -10,7 +10,6 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -167,7 +166,6 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
           </li>
         </ol>
       </div>
-      <!---->
     </div>
   </div>
 </div>

tests/unit/views/base/__snapshots__/Cards.spec.js.snap

@@ -11,7 +11,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -43,7 +42,6 @@ exports[`Cards.vue renders correctly 1`] = `
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
         </div>
-        <!---->
       </div>
     </div>
      
@@ -53,7 +51,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -65,7 +62,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Card Footer
         </footer>
-        <!---->
       </div>
     </div>
      
@@ -75,7 +71,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -92,7 +87,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -102,7 +96,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -117,7 +110,6 @@ exports[`Cards.vue renders correctly 1`] = `
               data-off="Off"
               data-on="On"
               type="checkbox"
-              value=""
             />
             <span
               class="c-switch-slider"
@@ -132,7 +124,6 @@ exports[`Cards.vue renders correctly 1`] = `
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
         </div>
-        <!---->
       </div>
     </div>
      
@@ -142,7 +133,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -163,7 +153,6 @@ exports[`Cards.vue renders correctly 1`] = `
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
         </div>
-        <!---->
       </div>
     </div>
      
@@ -173,7 +162,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -194,7 +182,6 @@ exports[`Cards.vue renders correctly 1`] = `
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -208,7 +195,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-primary"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -220,7 +206,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -230,7 +215,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-secondary"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -242,7 +226,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -252,7 +235,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-success"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -264,7 +246,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -274,7 +255,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-info"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -286,7 +266,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -296,7 +275,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-warning"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -308,7 +286,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -318,7 +295,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card border-danger"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -330,7 +306,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -344,7 +319,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-primary"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -356,7 +330,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -366,7 +339,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-secondary"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -378,7 +350,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -388,7 +359,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-success"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -400,7 +370,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -410,7 +379,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-info"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -422,7 +390,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -432,7 +399,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-info"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -444,7 +410,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
      
@@ -454,7 +419,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card card-accent-danger"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -466,7 +430,6 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -480,7 +443,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-primary"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -502,7 +464,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -512,7 +473,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-success"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -534,7 +494,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -544,7 +503,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-info"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -566,7 +524,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -576,7 +533,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-warning"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -598,7 +554,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -608,7 +563,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-danger"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -630,7 +584,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -640,7 +593,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card text-center bg-secondary"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -662,7 +614,6 @@ exports[`Cards.vue renders correctly 1`] = `
             </footer>
           </blockquote>
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -676,7 +627,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card bg-primary"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -684,7 +634,6 @@ exports[`Cards.vue renders correctly 1`] = `
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
         </div>
-        <!---->
       </div>
     </div>
      
@@ -694,7 +643,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card bg-success"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -702,7 +650,6 @@ exports[`Cards.vue renders correctly 1`] = `
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
         </div>
-        <!---->
       </div>
     </div>
      
@@ -712,7 +659,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card bg-info"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -720,7 +666,6 @@ exports[`Cards.vue renders correctly 1`] = `
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
         </div>
-        <!---->
       </div>
     </div>
      
@@ -730,7 +675,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card bg-warning"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -738,7 +682,6 @@ exports[`Cards.vue renders correctly 1`] = `
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
         </div>
-        <!---->
       </div>
     </div>
      
@@ -748,7 +691,6 @@ exports[`Cards.vue renders correctly 1`] = `
       <div
         class="card bg-danger"
       >
-        <!---->
         <div
           class="card-body"
         >
@@ -756,7 +698,6 @@ exports[`Cards.vue renders correctly 1`] = `
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
         </div>
-        <!---->
       </div>
     </div>
      
@@ -767,7 +708,6 @@ exports[`Cards.vue renders correctly 1`] = `
         class="card bg-secondary"
         name="fade"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -826,7 +766,6 @@ exports[`Cards.vue renders correctly 1`] = `
             
           </div>
         </div>
-        <!---->
       </div>
     </div>
   </div>

tests/unit/views/base/__snapshots__/Carousels.spec.js.snap

@@ -10,7 +10,6 @@ exports[`Carousels.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -131,7 +130,6 @@ exports[`Carousels.vue renders correctly 1`] = `
           </a>
         </div>
       </div>
-      <!---->
     </div>
   </div>
 </div>

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -10,7 +10,6 @@ exports[`Collapses.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -61,7 +60,6 @@ exports[`Collapses.vue renders correctly 1`] = `
           <div
             class="card"
           >
-            <!---->
             <div
               class="card-body"
             >
@@ -87,21 +85,17 @@ exports[`Collapses.vue renders correctly 1`] = `
                 <div
                   class="card"
                 >
-                  <!---->
                   <div
                     class="card-body"
                   >
                     Hello!
                   </div>
-                  <!---->
                 </div>
               </div>
             </div>
-            <!---->
           </div>
         </div>
       </div>
-      <!---->
     </div>
   </div>
 </div>

tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap

@@ -11,7 +11,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -79,7 +79,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -163,7 +163,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>

tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap

@@ -12,7 +12,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -107,7 +107,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
           <strong>
              List group 
@@ -192,7 +192,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -276,7 +276,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -357,7 +357,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -429,7 +429,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -462,7 +462,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                innavitem="true"
                 routertag="a"
                 shape="pill"
                 tag="span"
@@ -489,7 +488,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                innavitem="true"
                 routertag="a"
                 shape="pill"
                 tag="span"
@@ -516,7 +514,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                innavitem="true"
                 routertag="a"
                 shape="pill"
                 tag="span"
@@ -541,7 +538,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -675,7 +672,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -822,7 +819,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
            
           <strong>
@@ -972,7 +969,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
       <ccard-stub>
         <ccardheader-stub>
           <cicon-stub
-            name="justify-center"
+            name="cil-justify-center"
           />
           <strong>
              List group 

tests/unit/views/base/__snapshots__/Navbars.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -65,9 +65,7 @@ exports[`Navbars.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               href="#"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Link
@@ -79,9 +77,7 @@ exports[`Navbars.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               href="#"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Disabled
@@ -204,7 +200,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -246,7 +242,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -302,7 +298,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -338,9 +334,7 @@ exports[`Navbars.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               href="#"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Home
@@ -351,9 +345,7 @@ exports[`Navbars.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               href="#"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Link
@@ -443,7 +435,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -492,7 +484,7 @@ exports[`Navbars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>

tests/unit/views/base/__snapshots__/Navs.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
       <strong>
          Bootstrap Navs
@@ -36,9 +36,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Active
@@ -48,9 +46,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
           title="Link"
         />
@@ -59,9 +55,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Another Link
@@ -72,9 +66,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -86,7 +78,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -105,13 +97,11 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           <cicon-stub
-            name="basket"
+            name="cil-basket"
           />
         </cnavitem-stub>
          
@@ -119,9 +109,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           
@@ -133,9 +121,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           
@@ -148,9 +134,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -162,7 +146,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -183,9 +167,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           
@@ -197,9 +179,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           
@@ -211,9 +191,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           
@@ -226,9 +204,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -240,7 +216,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -261,9 +237,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Active
@@ -273,9 +247,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link
@@ -285,9 +257,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Another Link
@@ -298,9 +268,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -312,7 +280,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -334,9 +302,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Active
@@ -346,9 +312,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link
@@ -358,9 +322,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link with a long name 
@@ -371,9 +333,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -385,7 +345,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -407,9 +367,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Active
@@ -419,9 +377,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link
@@ -431,9 +387,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link with a long name 
@@ -444,9 +398,7 @@ exports[`Navs.vue renders correctly 1`] = `
           disabled="true"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Disabled
@@ -458,7 +410,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -479,9 +431,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Active
@@ -491,9 +441,7 @@ exports[`Navs.vue renders correctly 1`] = `
           activeclass="active"
           event="click"
           exactactiveclass="active"
-          innavitem="true"
           routertag="a"
-          tag="span"
           target="_self"
         >
           Link
@@ -549,7 +497,7 @@ exports[`Navs.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -579,9 +527,7 @@ exports[`Navs.vue renders correctly 1`] = `
               activeclass="active"
               event="click"
               exactactiveclass="active"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Active
@@ -591,9 +537,7 @@ exports[`Navs.vue renders correctly 1`] = `
               activeclass="active"
               event="click"
               exactactiveclass="active"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Link
@@ -603,9 +547,7 @@ exports[`Navs.vue renders correctly 1`] = `
               activeclass="active"
               event="click"
               exactactiveclass="active"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Another Link
@@ -616,9 +558,7 @@ exports[`Navs.vue renders correctly 1`] = `
               disabled="true"
               event="click"
               exactactiveclass="active"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               Disabled

tests/unit/views/base/__snapshots__/Paginations.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Paginations.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -41,12 +41,8 @@ exports[`Paginations.vue renders correctly 1`] = `
         arrows="true"
         dots="true"
         doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
         limit="5"
-        nextbuttonhtml="&rsaquo;"
         pages="10"
-        previousbuttonhtml="&lsaquo;"
         responsive=""
       />
        
@@ -62,12 +58,8 @@ exports[`Paginations.vue renders correctly 1`] = `
         arrows="true"
         dots="true"
         doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
         limit="5"
-        nextbuttonhtml="&rsaquo;"
         pages="10"
-        previousbuttonhtml="&lsaquo;"
         size="sm"
       />
        
@@ -84,12 +76,8 @@ exports[`Paginations.vue renders correctly 1`] = `
           arrows="true"
           dots="true"
           doublearrows="true"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
           limit="5"
-          nextbuttonhtml="&rsaquo;"
           pages="10"
-          previousbuttonhtml="&lsaquo;"
           responsive=""
           size="lg"
         />
@@ -106,7 +94,7 @@ exports[`Paginations.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -129,12 +117,8 @@ exports[`Paginations.vue renders correctly 1`] = `
         arrows="true"
         dots="true"
         doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
         limit="5"
-        nextbuttonhtml="&rsaquo;"
         pages="10"
-        previousbuttonhtml="&lsaquo;"
       />
        
       <br />
@@ -149,12 +133,8 @@ exports[`Paginations.vue renders correctly 1`] = `
         arrows="true"
         dots="true"
         doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
         limit="5"
-        nextbuttonhtml="&rsaquo;"
         pages="10"
-        previousbuttonhtml="&lsaquo;"
       />
        
       <br />
@@ -169,12 +149,8 @@ exports[`Paginations.vue renders correctly 1`] = `
         arrows="true"
         dots="true"
         doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
         limit="5"
-        nextbuttonhtml="&rsaquo;"
         pages="10"
-        previousbuttonhtml="&lsaquo;"
       />
        
       <br />

tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap

@@ -5,7 +5,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -88,7 +88,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -164,7 +164,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -218,7 +218,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -277,7 +277,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -436,7 +436,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -504,7 +504,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -575,7 +575,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>

tests/unit/views/base/__snapshots__/Switches.spec.js.snap

@@ -21,7 +21,6 @@ exports[`Switches.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            innavitem="true"
             routertag="a"
             tag="span"
             target="_self"
@@ -152,7 +151,6 @@ exports[`Switches.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            innavitem="true"
             routertag="a"
             tag="span"
             target="_self"

tests/unit/views/base/__snapshots__/Table.spec.js.snap

@@ -1,16 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table.vue renders correctly 1`] = `
-<ccard-stub
-  bodywrapper="true"
-  header="Table"
->
-  <cdatatable-stub
-    defaultsorter="[object Object]"
-    fields="username,registered,role,status"
-    itemsperpage="5"
-    pagination="true"
-    responsive="true"
-  />
+<ccard-stub>
+  <ccardheader-stub>
+    <cicon-stub
+      name="cil-justify-center"
+    />
+     Table
+  
+  </ccardheader-stub>
+   
+  <ccardbody-stub>
+    <cdatatable-stub
+      fields="username,registered,role,status"
+      itemsperpage="5"
+      pagination="true"
+      responsive="true"
+      sortervalue="[object Object]"
+    />
+  </ccardbody-stub>
 </ccard-stub>
 `;

tests/unit/views/base/__snapshots__/Tabs.spec.js.snap

@@ -161,7 +161,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             >
               <template>
                 <cicon-stub
-                  name="calculator"
+                  name="cil-calculator"
                 />
               </template>
               
@@ -176,7 +176,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="basket"
+                  name="cil-basket"
                 />
               </template>
               
@@ -191,7 +191,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="chart-pie"
+                  name="cil-chart-pie"
                 />
               </template>
               
@@ -230,7 +230,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             >
               <template>
                 <cicon-stub
-                  name="calculator"
+                  name="cil-calculator"
                 />
                  Calculator
               
@@ -247,7 +247,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="basket"
+                  name="cil-basket"
                 />
                  Shopping cart
               
@@ -264,7 +264,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="chart-pie"
+                  name="cil-chart-pie"
                 />
                  Charts
               
@@ -305,7 +305,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             >
               <template>
                 <cicon-stub
-                  name="calculator"
+                  name="cil-calculator"
                 />
                  Calculator
               
@@ -322,7 +322,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="basket"
+                  name="cil-basket"
                 />
                  Shopping cart
               
@@ -339,7 +339,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             <ctab-stub>
               <template>
                 <cicon-stub
-                  name="chart-pie"
+                  name="cil-chart-pie"
                 />
                  Charts
               

tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Tooltips.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>
@@ -93,7 +93,7 @@ exports[`Tooltips.vue renders correctly 1`] = `
   <ccard-stub>
     <ccardheader-stub>
       <cicon-stub
-        name="justify-center"
+        name="cil-justify-center"
       />
        
       <strong>

tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap

@@ -10,7 +10,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -849,7 +848,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
         </p>
       </div>
-      <!---->
     </div>
   </div>
    
@@ -859,7 +857,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -880,7 +877,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
         </small>
          
         <code>
-          &lt;CButton color="facebook"&gt;&lt;CIcon name="facebook"/&gt;&lt;/CButton&gt;
+          &lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;/CButton&gt;
         </code>
          
         <hr />
@@ -1479,7 +1476,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
         </p>
       </div>
-      <!---->
     </div>
   </div>
    
@@ -1489,7 +1485,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -1511,7 +1506,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <code>
           
-          &lt;CButton color="facebook"&gt;&lt;CIcon name="facebook"/&gt;&lt;/CButton&gt;
+          &lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;/CButton&gt;
         
         </code>
          
@@ -1530,7 +1525,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
         <p>
           <button
             class="btn btn-facebook btn-sm"
-            name="facebook"
             type="button"
           >
             <span>
@@ -1539,7 +1533,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-twitter btn-sm"
-            name="twitter"
             type="button"
           >
             <span>
@@ -1548,7 +1541,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-linkedin btn-sm"
-            name="linkedin"
             type="button"
           >
             <span>
@@ -1557,7 +1549,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-flickr btn-sm"
-            name="flickr"
             type="button"
           >
             <span>
@@ -1566,7 +1557,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-tumblr btn-sm"
-            name="tumblr"
             type="button"
           >
             <span>
@@ -1575,7 +1565,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-xing btn-sm"
-            name="xing"
             type="button"
           >
             <span>
@@ -1584,7 +1573,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-github btn-sm"
-            name="github"
             type="button"
           >
             <span>
@@ -1593,7 +1581,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-stack-overflow btn-sm"
-            name="stack-overflow"
             type="button"
           >
             <span>
@@ -1602,7 +1589,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-youtube btn-sm"
-            name="youtube"
             type="button"
           >
             <span>
@@ -1611,7 +1597,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-dribbble btn-sm"
-            name="dribbble"
             type="button"
           >
             <span>
@@ -1620,7 +1605,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-instagram btn-sm"
-            name="instagram"
             type="button"
           >
             <span>
@@ -1629,7 +1613,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-pinterest btn-sm"
-            name="pinterest"
             type="button"
           >
             <span>
@@ -1638,7 +1621,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vk btn-sm"
-            name="vk"
             type="button"
           >
             <span>
@@ -1647,7 +1629,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-yahoo btn-sm"
-            name="yahoo"
             type="button"
           >
             <span>
@@ -1656,7 +1637,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-behance btn-sm"
-            name="behance"
             type="button"
           >
             <span>
@@ -1665,7 +1645,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-reddit btn-sm"
-            name="reddit"
             type="button"
           >
             <span>
@@ -1674,7 +1653,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vimeo btn-sm"
-            name="vimeo"
             type="button"
           >
             <span>
@@ -1690,7 +1668,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
         <p>
           <button
             class="btn btn-facebook"
-            name="facebook"
             type="button"
           >
             <span>
@@ -1699,7 +1676,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-twitter"
-            name="twitter"
             type="button"
           >
             <span>
@@ -1708,7 +1684,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-linkedin"
-            name="linkedin"
             type="button"
           >
             <span>
@@ -1717,7 +1692,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-flickr"
-            name="flickr"
             type="button"
           >
             <span>
@@ -1726,7 +1700,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-tumblr"
-            name="tumblr"
             type="button"
           >
             <span>
@@ -1735,7 +1708,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-xing"
-            name="xing"
             type="button"
           >
             <span>
@@ -1744,7 +1716,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-github"
-            name="github"
             type="button"
           >
             <span>
@@ -1753,7 +1724,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-stack-overflow"
-            name="stack-overflow"
             type="button"
           >
             <span>
@@ -1762,7 +1732,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-youtube"
-            name="youtube"
             type="button"
           >
             <span>
@@ -1771,7 +1740,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-dribbble"
-            name="dribbble"
             type="button"
           >
             <span>
@@ -1780,7 +1748,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-instagram"
-            name="instagram"
             type="button"
           >
             <span>
@@ -1789,7 +1756,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-pinterest"
-            name="pinterest"
             type="button"
           >
             <span>
@@ -1798,7 +1764,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vk"
-            name="vk"
             type="button"
           >
             <span>
@@ -1807,7 +1772,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-yahoo"
-            name="yahoo"
             type="button"
           >
             <span>
@@ -1816,7 +1780,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-behance"
-            name="behance"
             type="button"
           >
             <span>
@@ -1825,7 +1788,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-reddit"
-            name="reddit"
             type="button"
           >
             <span>
@@ -1834,7 +1796,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vimeo"
-            name="vimeo"
             type="button"
           >
             <span>
@@ -1856,7 +1817,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
         <p>
           <button
             class="btn btn-facebook btn-lg"
-            name="facebook"
             type="button"
           >
             <span>
@@ -1865,7 +1825,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-twitter btn-lg"
-            name="twitter"
             type="button"
           >
             <span>
@@ -1874,7 +1833,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-linkedin btn-lg"
-            name="linkedin"
             type="button"
           >
             <span>
@@ -1883,7 +1841,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-flickr btn-lg"
-            name="flickr"
             type="button"
           >
             <span>
@@ -1892,7 +1849,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-tumblr btn-lg"
-            name="tumblr"
             type="button"
           >
             <span>
@@ -1901,7 +1857,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-xing btn-lg"
-            name="xing"
             type="button"
           >
             <span>
@@ -1910,7 +1865,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-github btn-lg"
-            name="github"
             type="button"
           >
             <span>
@@ -1919,7 +1873,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-stack-overflow btn-lg"
-            name="stack-overflow"
             type="button"
           >
             <span>
@@ -1928,7 +1881,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-youtube btn-lg"
-            name="youtube"
             type="button"
           >
             <span>
@@ -1937,7 +1889,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-dribbble btn-lg"
-            name="dribbble"
             type="button"
           >
             <span>
@@ -1946,7 +1897,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-instagram btn-lg"
-            name="instagram"
             type="button"
           >
             <span>
@@ -1955,7 +1905,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-pinterest btn-lg"
-            name="pinterest"
             type="button"
           >
             <span>
@@ -1964,7 +1913,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vk btn-lg"
-            name="vk"
             type="button"
           >
             <span>
@@ -1973,7 +1921,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-yahoo btn-lg"
-            name="yahoo"
             type="button"
           >
             <span>
@@ -1982,7 +1929,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-behance btn-lg"
-            name="behance"
             type="button"
           >
             <span>
@@ -1991,7 +1937,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-reddit btn-lg"
-            name="reddit"
             type="button"
           >
             <span>
@@ -2000,7 +1945,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
           <button
             class="btn btn-vimeo btn-lg"
-            name="vimeo"
             type="button"
           >
             <span>
@@ -2009,7 +1953,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           </button>
         </p>
       </div>
-      <!---->
     </div>
   </div>
 </div>

tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap

@@ -11,7 +11,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -54,6 +53,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-secondary"
+                type="button"
               >
                 Dropdown Button
               </button>
@@ -124,6 +124,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-secondary"
+                type="button"
               >
                 Dropdown with divider
               </button>
@@ -174,6 +175,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-secondary"
+                type="button"
               >
                 Dropdown with header
               </button>
@@ -208,7 +210,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -218,7 +219,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -248,6 +248,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-primary"
+                type="button"
               >
                 Left align
               </button>
@@ -291,6 +292,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-primary"
+                type="button"
               >
                 Right align
               </button>
@@ -336,6 +338,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-info"
+                type="button"
               >
                 Drop-Up
               </button>
@@ -381,6 +384,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-secondary"
+                type="button"
               >
                 Offset Dropdown
               </button>
@@ -431,6 +435,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
+                type="button"
               />
               <div
                 class="dropdown-menu"
@@ -465,7 +470,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -479,7 +483,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -509,6 +512,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn btn-lg btn-link"
+                type="button"
               >
                 
                 🔍
@@ -553,7 +557,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -563,7 +566,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -593,6 +595,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-lg btn-secondary"
+                type="button"
               >
                 Large
               </button>
@@ -641,6 +644,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
+                type="button"
               />
               <div
                 class="dropdown-menu"
@@ -683,6 +687,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-sm btn-secondary"
+                type="button"
               >
                 Small
               </button>
@@ -731,6 +736,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
+                type="button"
               />
               <div
                 class="dropdown-menu"
@@ -765,7 +771,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -779,7 +784,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -809,6 +813,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="btn dropdown-toggle btn-primary"
+                type="button"
               >
                 Dropdown ARIA
               </button>
@@ -895,7 +900,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
      
@@ -905,7 +909,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
       <div
         class="card"
       >
-        <!---->
         <header
           class="card-header"
         >
@@ -936,6 +939,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-primary"
+              type="button"
             >
               Primary
             </button>
@@ -979,6 +983,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-secondary"
+              type="button"
             >
               Secondary
             </button>
@@ -1022,6 +1027,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-success"
+              type="button"
             >
               Success
             </button>
@@ -1065,6 +1071,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-warning"
+              type="button"
             >
               Warning
             </button>
@@ -1108,6 +1115,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-danger"
+              type="button"
             >
               Danger
             </button>
@@ -1151,6 +1159,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-info"
+              type="button"
             >
               Info
             </button>
@@ -1194,6 +1203,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-light"
+              type="button"
             >
               Light
             </button>
@@ -1237,6 +1247,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-dark"
+              type="button"
             >
               Dark
             </button>
@@ -1280,6 +1291,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               class="btn dropdown-toggle btn-sm btn-link"
+              type="button"
             >
               Link
             </button>
@@ -1316,7 +1328,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
           </div>
         </div>
-        <!---->
       </div>
     </div>
   </div>

tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap

@@ -11,7 +11,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          
         <strong>
@@ -191,7 +191,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          
         <strong>
@@ -338,7 +338,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
         <strong>
            Button group 
@@ -490,7 +490,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          
         <strong>
@@ -553,7 +553,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          
         <strong>

tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap

@@ -3865,7 +3865,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             type="button"
           >
             <cicon-stub
-              name="lightbulb"
+              name="cil-lightbulb"
             />
              Standard Button
           
@@ -3889,7 +3889,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             variant="outline"
           >
             <cicon-stub
-              name="lightbulb"
+              name="cil-lightbulb"
             />
              Outline Button
           
@@ -3912,7 +3912,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             type="button"
           >
             <cicon-stub
-              name="lightbulb"
+              name="cil-lightbulb"
             />
              Ghost Button
           
@@ -3936,7 +3936,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             type="button"
           >
             <cicon-stub
-              name="lightbulb"
+              name="cil-lightbulb"
             />
              Square Button
           
@@ -3960,7 +3960,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             type="button"
           >
             <cicon-stub
-              name="lightbulb"
+              name="cil-lightbulb"
             />
              Pill Button
           

tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap

@@ -12,7 +12,7 @@ exports[`Alerts.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          
         <strong>
@@ -117,7 +117,7 @@ exports[`Alerts.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          Alert
         
@@ -265,9 +265,7 @@ exports[`Alerts.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               href="#"
-              innavitem="true"
               routertag="a"
-              tag="span"
               target="_self"
             >
               an example link
@@ -289,7 +287,7 @@ exports[`Alerts.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          Alerts 
         <small>
@@ -339,7 +337,7 @@ exports[`Alerts.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          Alerts
         
@@ -405,7 +403,7 @@ exports[`Alerts.vue renders correctly 1`] = `
     <ccard-stub>
       <ccardheader-stub>
         <cicon-stub
-          name="justify-center"
+          name="cil-justify-center"
         />
          Alerts
         

tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap

@@ -10,7 +10,6 @@ exports[`Badges.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -108,7 +107,6 @@ exports[`Badges.vue renders correctly 1`] = `
           </span>
         </button>
       </footer>
-      <!---->
     </div>
   </div>
    
@@ -118,7 +116,6 @@ exports[`Badges.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -185,13 +182,11 @@ exports[`Badges.vue renders correctly 1`] = `
           Dark
         </span>
       </div>
-      <!---->
     </div>
      
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -258,13 +253,11 @@ exports[`Badges.vue renders correctly 1`] = `
           Dark
         </span>
       </div>
-      <!---->
     </div>
      
     <div
       class="card"
     >
-      <!---->
       <header
         class="card-header"
       >
@@ -347,7 +340,6 @@ exports[`Badges.vue renders correctly 1`] = `
           Dark
         </a>
       </div>
-      <!---->
     </div>
   </div>
 </div>

tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap

@@ -15,7 +15,7 @@ exports[`Modals.vue renders correctly 1`] = `
         <ccard-stub>
           <ccardheader-stub>
             <cicon-stub
-              name="justify-center"
+              name="cil-justify-center"
             />
              Bootstrap Modals
             

tests/unit/views/theme/__snapshots__/Colors.spec.js.snap

@@ -5,7 +5,6 @@ exports[`Colors.vue renders correctly 1`] = `
   <div
     class="card"
   >
-    <!---->
     <header
       class="card-header"
     >
@@ -401,13 +400,11 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
       </div>
     </div>
-    <!---->
   </div>
    
   <div
     class="card"
   >
-    <!---->
     <header
       class="card-header"
     >
@@ -850,7 +847,6 @@ exports[`Colors.vue renders correctly 1`] = `
         </div>
       </div>
     </div>
-    <!---->
   </div>
 </div>
 `;

tests/unit/views/users/__snapshots__/User.spec.js.snap

@@ -18,13 +18,13 @@ exports[`User.vue renders correctly 1`] = `
        
       <ccardbody-stub>
         <cdatatable-stub
-          defaultsorter="[object Object]"
           fields="[object Object],[object Object]"
           fixed="true"
           items="[object Object]"
           itemsperpage="10"
           responsive="true"
           small=""
+          sortervalue="[object Object]"
           striped="true"
         />
       </ccardbody-stub>

tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap

@@ -149,7 +149,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="settings"
+          name="cil-settings"
           width="24"
         />
       </cwidgeticon-stub>
@@ -168,7 +168,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="laptop"
+          name="cil-laptop"
           width="24"
         />
       </cwidgeticon-stub>
@@ -187,7 +187,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="moon"
+          name="cil-moon"
           width="24"
         />
       </cwidgeticon-stub>
@@ -206,7 +206,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="bell"
+          name="cil-bell"
           width="24"
         />
       </cwidgeticon-stub>
@@ -228,7 +228,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="settings"
+          name="cil-settings"
           width="24"
         />
       </cwidgeticon-stub>
@@ -246,7 +246,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="laptop"
+          name="cil-laptop"
           width="24"
         />
       </cwidgeticon-stub>
@@ -264,7 +264,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="moon"
+          name="cil-moon"
           width="24"
         />
       </cwidgeticon-stub>
@@ -282,7 +282,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
-          name="bell"
+          name="cil-bell"
           width="24"
         />
       </cwidgeticon-stub>
@@ -305,7 +305,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
-          name="settings"
+          name="cil-settings"
           width="24"
         />
       </cwidgeticon-stub>
@@ -324,7 +324,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
-          name="laptop"
+          name="cil-laptop"
           width="24"
         />
       </cwidgeticon-stub>
@@ -343,7 +343,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
-          name="moon"
+          name="cil-moon"
           width="24"
         />
       </cwidgeticon-stub>
@@ -367,7 +367,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="people"
+        name="cil-people"
       />
     </cwidgetprogressicon-stub>
      
@@ -379,7 +379,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="userFollow"
+        name="cil-userFollow"
       />
     </cwidgetprogressicon-stub>
      
@@ -391,7 +391,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="basket"
+        name="cil-basket"
       />
     </cwidgetprogressicon-stub>
      
@@ -402,7 +402,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="chartPie"
+        name="cil-chartPie"
       />
     </cwidgetprogressicon-stub>
      
@@ -414,7 +414,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="speedometer"
+        name="cil-speedometer"
       />
     </cwidgetprogressicon-stub>
   </ccardgroup-stub>
@@ -431,7 +431,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="people"
+        name="cil-people"
       />
     </cwidgetprogressicon-stub>
      
@@ -444,7 +444,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="userFollow"
+        name="cil-userFollow"
       />
     </cwidgetprogressicon-stub>
      
@@ -457,7 +457,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="basket"
+        name="cil-basket"
       />
     </cwidgetprogressicon-stub>
      
@@ -470,7 +470,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="chartPie"
+        name="cil-chartPie"
       />
     </cwidgetprogressicon-stub>
      
@@ -483,7 +483,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cicon-stub
         height="36"
-        name="speedometer"
+        name="cil-speedometer"
       />
     </cwidgetprogressicon-stub>
   </ccardgroup-stub>
@@ -504,7 +504,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="people"
+          name="cil-people"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -522,7 +522,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="userFollow"
+          name="cil-userFollow"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -540,7 +540,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="basket"
+          name="cil-basket"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -558,7 +558,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="chartPie"
+          name="cil-chartPie"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -576,7 +576,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="speedometer"
+          name="cil-speedometer"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -594,7 +594,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="speech"
+          name="cil-speech"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -617,7 +617,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="people"
+          name="cil-people"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -636,7 +636,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="userFollow"
+          name="cil-userFollow"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -655,7 +655,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="basket"
+          name="cil-basket"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -674,7 +674,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="chartPie"
+          name="cil-chartPie"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -693,7 +693,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="speedometer"
+          name="cil-speedometer"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>
@@ -712,7 +712,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           height="36"
-          name="speech"
+          name="cil-speech"
         />
       </cwidgetprogressicon-stub>
     </ccol-stub>