chore: 3.0.0-beta.0 release: update dependencies

src/App.vue

@@ -9,8 +9,6 @@ export default {
 </script>
 
 <style lang="scss">
-  // CoreUI Icons Set
-  @import '~@coreui/icons/css/coreui-icons.min.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>

src/assets/icons/icons.js

@@ -1,48 +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
-} from '@coreui/icons/brands'
-import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
-import { iconSet } from '@coreui/icons'
+  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 {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+} from '@coreui/icons'
+import {
+  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(
   {},
-  iconSet,
-  { US, BR, IN, FR, ES, PL },
   {
-    facebook,
-    twitter,
-    linkedin,
-    flickr,
-    tumblr,
-    xing,
-    github,
-    stackOverflow,
-    youtube,
-    dribbble,
-    instagram,
-    pinterest,
-    vk,
-    yahoo,
-    behance,
-    reddit,
-    vimeo,
-    ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+    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
+  },
+  {
+    cifUs,
+    cifBr,
+    cifIn,
+    cifFr,
+    cifEs,
+    cifPl
+  },
+  {
+    cibFacebook,
+    cibTwitter,
+    cibLinkedin,
+    cibFlickr,
+    cibTumblr,
+    cibXing,
+    cibGithub,
+    cibStackOverflow,
+    cibYoutube,
+    cibDribbble,
+    cibInstagram,
+    cibPinterest,
+    cibVk,
+    cibYahoo,
+    cibBehance,
+    cibReddit,
+    cibVimeo,
+    cibCcMastercard, 
+    cibCcVisa, 
+    cibStripe, 
+    cibPaypal, 
+    cibGooglePay,
+    cibCcAmex
   }
 )

src/assets/scss/style.scss

@@ -4,8 +4,5 @@
 // Import styles
 @import "~@coreui/coreui/scss/coreui";
 
-// Import custom tooltips styles
-@import "~@coreui/coreui-chartjs/custom-tooltips/dist/css/coreui-chartjs.css";
-
 // If you want to add something do it here
 @import "custom";

src/containers/TheHeader.vue

@@ -19,19 +19,37 @@
       :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
-      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
-      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/dashboard">
+        <CHeaderNavLink>
+          Dashboard
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>
+        <CHeaderNavLink>
+          Users
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink>
+          Settings
+        </CHeaderNavLink>
+      </CHeaderNavItem>
     </CHeaderNav>
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-bell"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-bell"/>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-list"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-list"/>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-envelope-open"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-envelope-open"/>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
     </CHeaderNav>

src/containers/TheHeaderDropdownAccnt.vue

@@ -1,38 +1,37 @@
 <template>
   <CDropdown
-    nav
-    no-caret
+    inNav
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
   >
     <template #toggler>
-      <CHeaderNavItem only-link>
+      <CHeaderNavLink>
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
             class="c-avatar-img "
           />
         </div>
-      </CHeaderNavItem>
+      </CHeaderNavLink>
     </template>
     <CDropdownHeader tag="div" class="text-center" color="light">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="cui-bell mr-2"/> Updates
+      <CIcon name="cil-bell"/> Updates
       <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-envelope-open mr-2" /> Messages
+      <CIcon name="cil-envelope-open" /> Messages
       <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-task mr-2" /> Tasks
+      <CIcon name="cil-task" /> Tasks
       <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-comment-square mr-2" /> Comments
+      <CIcon name="cil-comment-square" /> Comments
       <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
@@ -43,25 +42,25 @@
       <strong>Settings</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="cui-user mr-2" /> Profile
+      <CIcon name="cil-user" /> Profile
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-wrench mr-2" /> Settings
+      <CIcon name="cil-settings" /> Settings
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-dollar mr-2" /> Payments
+      <CIcon name="cil-dollar" /> Payments
       <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-file mr-2" /> Projects
+      <CIcon name="cil-file" /> Projects
       <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>
-      <i class="cui-shield mr-2" /> Lock Account
+      <CIcon name="cil-shield-alt" /> Lock Account
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-lock-locked mr-2" /> Logout
+      <CIcon name="cil-lock-locked" /> Logout
     </CDropdownItem>
   </CDropdown>
 </template>
@@ -76,3 +75,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .c-icon {
+    margin-right: 0.3rem;
+  }
+</style>

src/containers/TheSidebar.vue

@@ -9,11 +9,8 @@
       :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
       :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
     />
-    <!-- <CSidebarHeader/> -->
-    <!-- <CSidebarForm/> -->
-    <CRenderFunction :contentToRender="nav"/>
-    <!-- <CSidebarFooter/> -->
-    <CSidebarMinimizer 
+    <CRenderFunction flat :content-to-render="nav"/>
+    <CSidebarMinimizer
       class="d-md-down-none"
       @click.native="minimize = !minimize"
     />
@@ -22,6 +19,7 @@
 
 <script>
 import nav from './_nav'
+
 export default {
   name: 'TheSidebar',
   data () {

src/containers/_nav.js

@@ -1,471 +1,271 @@
 export default [
-  'CSidebarNav',
-  [
-    [
-      'CSidebarNavLink',
+  {
+    _name: 'CSidebarNav',
+    _children: [
       {
-        props: {
-          name: 'Dashboard',
-          to: '/dashboard',
-          icon: 'cui-speedometer',
-          badge: {
-            color: 'primary',
-            text: 'NEW'
-          }
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Theme']
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Colors',
-          to: '/theme/colors',
-          icon: 'cui-drop'
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Typography',
-          to: '/theme/typography',
-          icon: 'cui-pencil'
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Components']
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Base',
-          route: '/base',
-          icon: 'cui-puzzle',
+        _name: 'CSidebarNavItem',
+        name: 'Dashboard',
+        to: '/dashboard',
+        icon: 'cil-speedometer',
+        badge: {
+          color: 'primary',
+          text: 'NEW'
         }
       },
-      [
-        [
-          'CSidebarNavLink',
+      {
+        _name: 'CSidebarNavTitle',
+        _children: ['Theme']
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Colors',
+        to: '/theme/colors',
+        icon: 'cil-drop'
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Typography',
+        to: '/theme/typography',
+        icon: 'cil-pencil'
+      },
+      {
+        _name: 'CSidebarNavTitle',
+        _children: ['Components']
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Base',
+        route: '/base',
+        icon: 'cil-puzzle',
+        items: [
           {
-            props: {
-              name: 'Breadcrumbs',
-              to: '/base/breadcrumbs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Breadcrumbs',
+            to: '/base/breadcrumbs',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Cards',
-              to: '/base/cards',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Cards',
+            to: '/base/cards',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Carousels',
-              to: '/base/carousels',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Carousels',
+            to: '/base/carousels',
+            icon: 'cil-puzzle'
+          }, 
           {
-            props: {
-              name: 'Collapses',
-              to: '/base/collapses',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Collapses',
+            to: '/base/collapses',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Forms',
-              to: '/base/forms',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Forms',
+            to: '/base/forms',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Jumbotrons',
-              to: '/base/jumbotrons',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Jumbotrons',
+            to: '/base/jumbotrons',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'List Groups',
-              to: '/base/list-groups',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'List Groups',
+            to: '/base/list-groups',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Navs',
-              to: '/base/navs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Navs',
+            to: '/base/navs',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Navbars',
-              to: '/base/navbars',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Navbars',
+            to: '/base/navbars',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Paginations',
-              to: '/base/paginations',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Paginations',
+            to: '/base/paginations',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Popovers',
-              to: '/base/popovers',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Popovers',
+            to: '/base/popovers',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Progress Bars',
-              to: '/base/progress-bars',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Progress Bars',
+            to: '/base/progress-bars',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Switches',
-              to: '/base/switches',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Switches',
+            to: '/base/switches',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Tables',
-              to: '/base/tables',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Tables',
+            to: '/base/tables',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Tabs',
-              to: '/base/tabs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Tabs',
+            to: '/base/tabs',
+            icon: 'cil-puzzle'
+          },
           {
-            props: {
-              name: 'Tooltips',
-              to: '/base/tooltips',
-              icon: 'cui-puzzle'
-            }
+            name: 'Tooltips',
+            to: '/base/tooltips',
+            icon: 'cil-puzzle'
           }
         ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
+      },
       {
-        props: {
-          name: 'Buttons',
-          route: '/buttons',
-          icon: 'cui-cursor',
+        _name: 'CSidebarNavDropdown',
+        name: 'Buttons',
+        route: '/buttons',
+        icon: 'cil-cursor',
+        items: [
+          {
+            name: 'Buttons',
+            to: '/buttons/standard-buttons',
+            icon: 'cil-cursor'
+          },
+          {
+            name: 'Button Dropdowns',
+            to: '/buttons/dropdowns',
+            icon: 'cil-cursor'
+          },
+          {
+            name: 'Button Groups',
+            to: '/buttons/button-groups',
+            icon: 'cil-cursor'
+          },
+          {
+            name: 'Brand Buttons',
+            to: '/buttons/brand-buttons',
+            icon: 'cil-cursor'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Charts',
+        to: '/charts',
+        icon: 'cil-chart-pie'
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Icons',
+        route: '/icons',
+        icon: 'cil-star',
+        items: [
+          {
+            name: 'CoreUI Icons',
+            to: '/icons/coreui-icons',
+            icon: 'cil-star',
+            badge: {
+              color: 'info',
+              text: 'NEW'
+            }
+          },
+          {
+            name: 'Brands',
+            to: '/icons/brands',
+            icon: 'cil-star'
+          },
+          {
+            name: 'Flags',
+            to: '/icons/flags',
+            icon: 'cil-star'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Notifications',
+        route: '/notifications',
+        icon: 'cil-bell',
+        items: [
+          {
+            name: 'Alerts',
+            to: '/notifications/alerts',
+            icon: 'cil-bell'
+          },
+          {
+            name: 'Badges',
+            to: '/notifications/badges',
+            icon: 'cil-bell'
+          },
+          {
+            name: 'Modals',
+            to: '/notifications/modals',
+            icon: 'cil-bell'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Widgets',
+        to: '/widgets',
+        icon: 'cil-calculator',
+        badge: {
+          color: 'primary',
+          text: 'NEW',
+          shape: 'pill'
         }
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Buttons',
-              to: '/buttons/standard-buttons',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Button Dropdowns',
-              to: '/buttons/dropdowns',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Button Groups',
-              to: '/buttons/button-groups',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Brand Buttons',
-              to: '/buttons/brand-buttons',
-              icon: 'cui-cursor'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
       {
-        props: {
-          name: 'Charts',
-          to: '/charts',
-          icon: 'cui-pie-chart'
-        }
-      }
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Icons',
-          route: '/icons',
-          icon: 'cui-star',
-        }
+        _name: 'CSidebarNavDivider'
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'CoreUI Icons',
-              to: '/icons/coreui-icons',
-              icon: 'cui-star',
-              badge: {
-                color: 'info',
-                text: 'NEW'
-              }
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Brands',
-              to: '/icons/brands',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Flags',
-              to: '/icons/flags',
-              icon: 'cui-star'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
       {
-        props: {
-          name: 'Notifications',
-          route: '/notifications',
-          icon: 'cui-bell',
-        }
+        _name: 'CSidebarNavTitle',
+        _children: ['Extras']
       },
-      [
-        [
-          'CSidebarNavLink',
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Pages',
+        route: '/pages',
+        icon: 'cil-star',
+        items: [
           {
-            props: {
-              name: 'Alerts',
-              to: '/notifications/alerts',
-              icon: 'cui-bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Login',
+            to: '/pages/login',
+            icon: 'cil-star'
+          },
           {
-            props: {
-              name: 'Badges',
-              to: '/notifications/badges',
-              icon: 'cui-bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Register',
+            to: '/pages/register',
+            icon: 'cil-star'
+          },
           {
-            props: {
-              name: 'Modals',
-              to: '/notifications/modals',
-              icon: 'cui-bell'
-            }
+            name: 'Error 404',
+            to: '/pages/404',
+            icon: 'cil-star'
+          },
+          {
+            name: 'Error 500',
+            to: '/pages/500',
+            icon: 'cil-star'
           }
         ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Widgets',
-          to: '/widgets',
-          icon: 'cui-calculator',
-          badge: {
-            color: 'primary',
-            text: 'NEW',
-            pill: true
-          }
-        }
-      }
-    ],
-    [
-      'CSidebarNavDivider',
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Extras']
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Pages',
-          route: '/pages',
-          icon: 'cui-star',
-        }
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Login',
-              to: '/pages/login',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Register',
-              to: '/pages/register',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Error 404',
-              to: '/pages/404',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Error 500',
-              to: '/pages/500',
-              icon: 'cui-star'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
       {
-        props: {
-          name: 'Download CoreUI',
-          href: 'http://coreui.io/vue/',
-          icon: 'cui-cloud-download',
-          addLinkClasses: 'c-nav-link-success',
-          target: '_blank'
-        },
-        attrs: {
-          class: 'mt-auto',
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
-      {          
-        props: {
-          name: 'Try CoreUI PRO',
-          href: 'http://coreui.io/pro/vue/',
-          icon: 'cui-layers',
-          addLinkClasses: 'c-nav-link-danger',
-          target: '_blank'
-        }
+        _name: 'CSidebarNavItem',
+        name: 'Download CoreUI',
+        href: 'http://coreui.io/vue/',
+        icon: { name: 'cil-cloud-download', class: 'text-white' },
+        _class: 'bg-success text-white',
+        target: '_blank'
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Try CoreUI PRO',
+        href: 'http://coreui.io/pro/vue/',
+        icon: { name: 'cil-layers', class: 'text-white' },
+        _class: 'bg-danger text-white',
+        target: '_blank'
       }
     ]
-  ]
-]
-
+  }
+]

src/main.js

@@ -2,16 +2,15 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue'
-import { CIconPlugin } from '@coreui/icons/vue'
-import { iconsSet } from './assets/icons/icons.js'
+import { iconsSet as icons } from './assets/icons/icons.js'
 
 Vue.config.performance = true
 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin, iconsSet)
 
 new Vue({
   el: '#app',
   router,
+  icons,
   template: '<App/>',
   components: {
     App

src/views/Dashboard.vue

@@ -10,7 +10,7 @@
           </CCol>
           <CCol sm="7" class="d-none d-md-block">
             <CButton color="primary" class="float-right">
-              <i class="cui-cloud-download"></i>
+              <CIcon name="cil-cloud-download"/>
             </CButton>
             <CButtonGroup class="float-right mr-3">
               <CButton
@@ -85,363 +85,368 @@
     <WidgetsBrand/>
     <CRow>
       <CCol md="12">
-        <CCard header-html="Traffic &amp; Sales" body-wrapper>
-          <CRow>
-            <CCol sm="12" lg="6">
-              <CRow>
-                <CCol sm="6">
-                  <CCallout color="info">
-                    <small class="text-muted">New Clients</small><br>
-                    <strong class="h4">9,123</strong>
-                  </CCallout>
-                </CCol>
-                <CCol sm="6">
-                  <CCallout color="danger">
-                    <small class="text-muted">Recurring Clients</small><br>
-                    <strong class="h4">22,643</strong>
-                  </CCallout>
-                </CCol>
-              </CRow>
-              <hr class="mt-0">
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Monday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    color="info"
-                    :value="34"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    color="danger"
-                    :value="78"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Tuesday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="56"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="94"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Wednesday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="12"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="67"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Thursday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="43"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="91"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Friday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="22"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="73"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Saturday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="53"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="82"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Sunday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="9"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="69"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="legend text-center">
-                <small>
-                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
-                  New clients
-                  &nbsp;&nbsp;
-                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
-                  Recurring clients
-                </small>
-              </div>
-            </CCol>
-            <CCol sm="12" lg="6">
-              <CRow>
-                <CCol sm="6">
-                  <CCallout color="warning">
-                    <small class="text-muted">Pageviews</small><br>
-                    <strong class="h4">78,623</strong>
-                  </CCallout>
-                </CCol>
-                <CCol sm="6">
-                  <CCallout color="success">
-                    <small class="text-muted">Organic</small><br>
-                    <strong class="h4">49,123</strong>
-                  </CCallout>
-                </CCol>
-              </CRow>
-              <hr class="mt-0">
-              <ul class="horizontal-bars type-2">
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="cui-user progress-group-icon"></i>
-                    <span class="title">Male</span>
-                    <span class="ml-auto font-weight-bold">43%</span>
+        <CCard>
+          <CCardHeader>
+            Traffic &amp; Sales
+          </CCardHeader>
+          <CCardBody>
+            <CRow>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="info">
+                      <small class="text-muted">New Clients</small><br>
+                      <strong class="h4">9,123</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="danger">
+                      <small class="text-muted">Recurring Clients</small><br>
+                      <strong class="h4">22,643</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Monday
+                    </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="43"
-                      color="warning"
+                      color="info"
+                      :value="34"
                     />
-                  </div>
-                </div>
-                <div class="progress-group mb-5">
-                  <div class="progress-group-header">
-                    <i class="cui-user-female progress-group-icon"></i>
-                    <span class="title">Female</span>
-                    <span class="ml-auto font-weight-bold">37%</span>
-                  </div>
-                  <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="37"
-                      color="warning"
+                      color="danger"
+                      :value="78"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="cui-globe progress-group-icon"></i>
-                    <span class="title">Organic Search</span>
-                    <span class="ml-auto font-weight-bold">
-                      191,235<span class="text-muted small">(56%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Tuesday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
                       :value="56"
-                      color="success"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="94"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="socialFacebook"
-                      height="17"
-                      class="progress-group-icon"
-                    />
-                    <span class="title">Facebook</span>
-                    <span class="ml-auto font-weight-bold">
-                      51,223 <span class="text-muted small">(15%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Wednesday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="15"
-                      color="success"
+                      :value="12"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="67"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="socialTwitter"
-                      height="17"
-                      class="progress-group-icon"
-                    />
-                    <span class="title">Twitter</span>
-                    <span class="ml-auto font-weight-bold">
-                      37,564 <span class="text-muted small">(11%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Thursday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="11"
-                      color="success"
+                      :value="43"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="91"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="socialLinkedin"
-                      height="17"
-                      class="progress-group-icon"
-                    />
-                    <span class="title">LinkedIn</span>
-                    <span class="ml-auto font-weight-bold">
-                      27,319 <span class="text-muted small">&nbsp;(8%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Friday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="8"
-                      color="success"
+                      :value="22"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="73"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="divider text-center">
-                  <CButton color="link" size="sm" class="text-muted">
-                    <i class="cui-options"></i>
-                  </CButton>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Saturday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="53"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="82"
+                      color="danger"
+                    />
+                  </div>
                 </div>
-              </ul>
-            </CCol>
-          </CRow>
-          <br/>
-          <CTable
-            class="mb-0 table-outline"
-            hover
-            :items="tableItems"
-            :fields="tableFields"
-            head-color="light"
-            no-sorting
-          >
-            <td slot="avatar" class="text-center" slot-scope="{item}">
-              <div class="c-avatar">
-                <img :src="item.avatar.url" class="c-avatar-img" alt="">
-                <span
-                  class="c-avatar-status"
-                  :class="`bg-${item.avatar.status || 'secondary'}`"
-                ></span>
-              </div>
-            </td>
-            <td slot="user" slot-scope="{item}">
-              <div>{{item.user.name}}</div>
-              <div class="small text-muted">
-                <span>
-                  <template v-if="item.user.new">New</template>
-                  <template v-else>Recurring</template>
-                </span> | Registered: {{item.user.registered}}
-              </div>
-            </td>
-            <td
-              slot="country"
-              slot-scope="{item}"
-              class="text-center"
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Sunday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="9"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="69"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="legend text-center">
+                  <small>
+                    <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
+                    New clients
+                    &nbsp;&nbsp;
+                    <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
+                    Recurring clients
+                  </small>
+                </div>
+              </CCol>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="warning">
+                      <small class="text-muted">Pageviews</small><br>
+                      <strong class="h4">78,623</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="success">
+                      <small class="text-muted">Organic</small><br>
+                      <strong class="h4">49,123</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <ul class="horizontal-bars type-2">
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon name="cil-user" class="progress-group-icon"/>
+                      <span class="title">Male</span>
+                      <span class="ml-auto font-weight-bold">43%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="43"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group mb-5">
+                    <div class="progress-group-header">
+                      <CIcon name="cil-user-female" class="progress-group-icon"/>
+                      <span class="title">Female</span>
+                      <span class="ml-auto font-weight-bold">37%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="37"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <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>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="56"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-facebook"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Facebook</span>
+                      <span class="ml-auto font-weight-bold">
+                        51,223 <span class="text-muted small">(15%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="15"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-twitter"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Twitter</span>
+                      <span class="ml-auto font-weight-bold">
+                        37,564 <span class="text-muted small">(11%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="11"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-linkedin"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">LinkedIn</span>
+                      <span class="ml-auto font-weight-bold">
+                        27,319 <span class="text-muted small">&nbsp;(8%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="8"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="divider text-center">
+                    <CButton color="link" size="sm" class="text-muted">
+                      <CIcon name="cil-options"/>
+                    </CButton>
+                  </div>
+                </ul>
+              </CCol>
+            </CRow>
+            <br/>
+            <CDataTable
+              class="mb-0 table-outline"
+              hover
+              :items="tableItems"
+              :fields="tableFields"
+              head-color="light"
+              no-sorting
             >
-              <CIcon
-                :name="item.country.flag"
-                height="25"
-              />
-            </td>
-            <td slot="usage" slot-scope="{item}">
-              <div class="clearfix">
-                <div class="float-left">
-                  <strong>{{item.usage.value}}%</strong>
+              <td slot="avatar" class="text-center" slot-scope="{item}">
+                <div class="c-avatar">
+                  <img :src="item.avatar.url" class="c-avatar-img" alt="">
+                  <span
+                    class="c-avatar-status"
+                    :class="`bg-${item.avatar.status || 'secondary'}`"
+                  ></span>
                 </div>
-                <div class="float-right">
-                  <small class="text-muted">{{item.usage.period}}</small>
+              </td>
+              <td slot="user" slot-scope="{item}">
+                <div>{{item.user.name}}</div>
+                <div class="small text-muted">
+                  <span>
+                    <template v-if="item.user.new">New</template>
+                    <template v-else>Recurring</template>
+                  </span> | Registered: {{item.user.registered}}
                 </div>
-              </div>
-              <CProgress
-                class="progress-xs"
-                v-model="item.usage.value"
-                :color="color(item.usage.value)"
-              />
-            </td>
-            <td
-              slot="payment"
-              slot-scope="{item}"
-              class="text-center"
-            >
-              <CIcon
-                :name="item.payment.icon"
-                height="25"
-              />
-            </td>
-            <td slot="activity" slot-scope="{item}">
-              <div class="small text-muted">Last login</div>
-              <strong>{{item.activity}}</strong>
-            </td>
-          </CTable>
+              </td>
+              <td
+                slot="country"
+                slot-scope="{item}"
+                class="text-center"
+              >
+                <CIcon
+                  :name="item.country.flag"
+                  height="25"
+                />
+              </td>
+              <td slot="usage" slot-scope="{item}">
+                <div class="clearfix">
+                  <div class="float-left">
+                    <strong>{{item.usage.value}}%</strong>
+                  </div>
+                  <div class="float-right">
+                    <small class="text-muted">{{item.usage.period}}</small>
+                  </div>
+                </div>
+                <CProgress
+                  class="progress-xs"
+                  v-model="item.usage.value"
+                  :color="color(item.usage.value)"
+                />
+              </td>
+              <td
+                slot="payment"
+                slot-scope="{item}"
+                class="text-center"
+              >
+                <CIcon
+                  :name="item.payment.icon"
+                  height="25"
+                />
+              </td>
+              <td slot="activity" slot-scope="{item}">
+                <div class="small text-muted">Last login</div>
+                <strong>{{item.activity}}</strong>
+              </td>
+            </CDataTable>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
@@ -467,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>
-          <i class="fa fa-align-justify"></i><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

@@ -22,13 +22,16 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footer-html="Card Footer" :body-html="loremIpsum" />
+        <CCard>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+          <CCardFooter>Card Footer</CCardFooter>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard
-          headerHtml="<i class='cui-check'></i> Card with icon"
-          :bodyHtml="loremIpsum"
-        />
+        <CCard>
+          <CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
@@ -64,7 +67,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill color="danger" class="float-right">42</CBadge>
+            <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}
@@ -74,80 +77,84 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard
-          header="Card outline primary"
-          border-color="primary"
-          :body-html="loremIpsum"
-        />
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard
-          header="Card outline secondary"
-          border-color="secondary"
-          :body-html="loremIpsum"
-        />
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard
-          header="Card outline success"
-          border-color="success"
-          body-wrapper
-        >
-            {{loremIpsum}}
+        <CCard border-color="primary">
+          <CCardHeader>Card outline primary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline info" border-color="info" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="secondary">
+          <CCardHeader>Card outline secondary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline warning" border-color="warning" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="success">
+          <CCardHeader>Card outline success</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline danger" border-color="danger" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="info">
+          <CCardHeader>Card outline info</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard border-color="warning">
+          <CCardHeader>Card outline warning</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard border-color="danger">
+          <CCardHeader>Card outline danger</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
     </CRow>
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="primary">
+          <CCardHeader>Card with primary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="secondary">
+          <CCardHeader>Card with secondary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="success">
+          <CCardHeader>Card with success accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="danger">
+          <CCardHeader>Card with danger accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center" body-wrapper>
+        <CCard color="primary" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -157,7 +164,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-success text-center" body-wrapper>
+        <CCard color="success" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -167,7 +174,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-info text-center" body-wrapper>
+        <CCard color="info" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -177,7 +184,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center" body-wrapper>
+        <CCard color="warning" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -187,7 +194,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center" body-wrapper>
+        <CCard color="danger" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -197,7 +204,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center" body-wrapper>
+        <CCard color="secondary" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -209,44 +216,44 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-primary" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="primary" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-success" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="success" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-info" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="info" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-warning" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="warning" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-danger" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="danger" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show">
+          <CCard v-if="show" color="secondary">
             <CCardHeader>
               Card with header actions
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="cil-settings"/>
                 </CLink>
                 <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="cil-x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>

src/views/base/Carousels.vue

@@ -3,7 +3,7 @@
     <CCol md="12" lg="7">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Carousel</strong>
           <div class="card-header-actions">
             <a 
@@ -24,17 +24,17 @@
             height="400px"
           >
             <CCarouselItem
-            captionHeader="First Slide"
-              image="https://lorempixel.com/1024/480/technics/2/"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="First Slide"
+              image="https://picsum.photos/1024/480/?image=52"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-            captionHeader="Blank page"
-              :image="{ blankColor: 'grey' }"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="Blank page"
+              :image="{ placeholderColor: 'grey' }"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-              image="https://lorempixel.com/1024/480/technics/8/"
+            image="https://picsum.photos/1024/480/?image=54"
             />
           </CCarousel>
         </CCardBody>

src/views/base/Collapses.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
           <strong> Bootstrap Collapse </strong>
           <div class="card-header-actions">
             <a 
@@ -22,7 +22,7 @@
           </CButton>
           <CCollapse :show="collapse" class="mt-2">
             <CCard body-wrapper>
-              <p class="card-text">Collapse contents Here</p>
+              <CCardText>Collapse contents Here</CCardText>
               <CButton  
                 @click="innerCollapse = !innerCollapse" 
                 size="sm" 

src/views/base/Forms.vue

@@ -190,13 +190,13 @@
                   </CCol>
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputCheckbox
-                      v-for="option in options"
-                      :key="option"
+                      v-for="(option, optionIndex) in options"
+                      :key="key + option"
                       :label="option"
                       :value="option"
                       :custom="key > 1"
                       :name="`Option 1${key}`"
-                      :checked="Math.random() > 0.6"
+                      :checked="optionIndex === key"
                       :inline="key % 2 === 1"
                     />
                   </CCol>
@@ -210,7 +210,7 @@
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputRadio
                       v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                       :label="option"
                       type="radio"
                       :value="option"
@@ -245,8 +245,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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"><i class="cui-circle-check"></i> Submit</CButton>
-              <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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"><i class="cui-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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>
@@ -488,25 +488,26 @@
             <strong>Icon/Text</strong> Groups
           </CCardHeader>
           <CCardBody>
-            <CInput
-              placeholder="Username"
-              prependHtml="<i class='cui-user'></i>"
-            />
+            <CInput placeholder="Username">
+              <template #prepend-content><CIcon name="cil-user"/></template>
+            </CInput>
             <CInput
               type="email"
               placeholder="Email"
               autocomplete="email"
-              append-html="<i class='cui-envelope-open'></i>"
-            />
+            >
+              <template #append-content><CIcon name="cil-envelope-open"/></template>
+            </CInput>
             <CInput
-              prependHtml="<i class='cui-euro'></i>"
               placeholder="ex. $1.000.000"
-              append-html=".00"
-            />
+              append=".00"
+            >
+              <template #prepend-content><CIcon name="cil-euro"/></template>
+            </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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>
@@ -519,7 +520,7 @@
             <CInput placeholder="Username">
               <template #prepend>
                 <CButton color="primary">
-                  <i class="cui-magnifying-glass"></i> Search
+                  <CIcon name="cil-magnifying-glass"/> Search
                 </CButton>
               </template>
             </CInput>
@@ -538,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"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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>
@@ -619,8 +620,8 @@
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> 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>
@@ -691,22 +692,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
+              <CInput prepend="Username">
+                <template #append-content><CIcon name="cil-user"/></template>
+              </CInput>
               <CInput
-                prepend-html="Username"
-                append-html="<i class='cui-user'></i>"
-              />
-              <CInput
-                prepend-html="Email"
                 type="email"
                 autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+                prepend="Email"
+              >
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
               <CInput
-                prepend-html="Password"
                 type="password"
                 autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+                prepend="Password"
+              >
+                <template #append-content><CIcon name="cil-shield-alt"/></template>
+              </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="primary">
                   Submit
@@ -723,22 +725,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
-              <CInput
-                placeholder="Username"
-                append-html="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #append-content><CIcon name="cil-user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+              >
+                <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">
                   Submit
@@ -755,22 +758,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
-              <CInput
-                placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #prepend-content><CIcon name="cil-user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                prependHtml="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                prependHtml="<i class='cui-shield'></i>"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-shield-alt"/></template>
+              </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="success">
                   Submit
@@ -786,19 +790,19 @@
         <transition name="fade">
           <CCard v-if="show">
             <CCardHeader>
-              <i class="cui-pencil"></i> Form Elements
+              <CIcon name="cil-pencil"/> Form Elements
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="cil-settings"/>
                 </CLink>
                 <CLink
                   class="card-header-action btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
-                  <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="cil-x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>
@@ -806,21 +810,21 @@
               <CCardBody>
                 <CInput
                   label="Prepended text"
-                  prepend-html="@"
                   description="Here's some help text"
                   type="email"
                   autocomplete="email"
+                  prepend="@"
                 />
                 <CInput
                   label="Appended text"
-                  append-html=".00"
+                  append=".00"
                   description="Here's some help text"
                 />
                 <CInput
                   label="Appended and prepended text"
-                  prepend-html="$"
-                  append-html=".00"
+                  append=".00"
                   description="Here's some help text"
+                  prepend="$"
                 />
                 <CInput
                   label="Append with button"

src/views/base/Jumbotrons.vue

@@ -4,7 +4,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> Bootstrap Jumbotron </strong>
             <div class="card-header-actions">
               <a 
@@ -20,7 +20,7 @@
           <CCardBody>
             <CJumbotron>
               <h1 class="display-3">Bootstrap 4</h1>
-              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
               <p>For more information visit website</p>
               <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>
@@ -30,7 +30,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
             <small>with slots</small>
           </CCardHeader>
           <CCardBody>
@@ -56,7 +56,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i> <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>
-            <i class="fa fa-align-justify"></i>
+            <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>
-            <i class="fa fa-align-justify"></i><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>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>disabled items</small>
           </CCardHeader>
@@ -67,7 +67,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>actionable items</small>
           </CCardHeader>
@@ -86,7 +86,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>buttons</small>
           </CCardHeader>
@@ -103,7 +103,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>with badges</small>
           </CCardHeader>
@@ -113,19 +113,19 @@
                 class="d-flex justify-content-between align-items-center"
               >
                 Cras justo odio
-                <CBadge color="primary" pill>14</CBadge>
+                <CBadge color="primary" shape="pill">14</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Dapibus ac facilisis in
-                <CBadge color="primary" pill>2</CBadge>
+                <CBadge color="primary" shape="pill">2</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Morbi leo risus
-                <CBadge color="primary" pill>1</CBadge>
+                <CBadge color="primary" shape="pill">1</CBadge>
               </CListGroupItem>
             </CListGroup>
           </CCardBody>
@@ -136,7 +136,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>colors</small>
           </CCardHeader>
@@ -158,7 +158,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>colors active</small>
           </CCardHeader>
@@ -182,26 +182,32 @@
       <CCol col="12">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
             <small>inside cards</small>
           </CCardHeader>
           <CCardBody>
             <CCardGroup deck>
-              <CCard headerHtml="<b>Card with list group</b>">
-                <CListGroup>
-                  <CListGroupItem href="#">Cras justo odio</CListGroupItem>
-                  <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
-                </CListGroup>
-                <p class="card-text mt-2">
-                  Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
-                  nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
-                  consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
-                  ad sit ipsum anim Lorem.
-                </p>
+              <CCard>
+                <CCardHeader>
+                  <b>Card with list group</b>
+                </CCardHeader>
+                <CCardBody>
+                  <CListGroup>
+                    <CListGroupItem href="#">Cras justo odio</CListGroupItem>
+                    <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
+                    <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
+                  </CListGroup>
+                  <CCardText class="mt-2">
+                    Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                    nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                    consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                    ad sit ipsum anim Lorem.
+                  </CCardText>
+                </CCardBody>
               </CCard>
-              <CCard header="<b>Card with flush list group</b>">
+              <CCard>
+                <CCardHeader><b>Card with flush list group</b></CCardHeader>
                 <CListGroup flush>
                   <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                   <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
@@ -223,7 +229,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i><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>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navbar </strong>
         <div class="card-header-actions">
           <a 
@@ -67,7 +67,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>brand</small>
       </CCardHeader>
       <CCardBody>
@@ -82,7 +82,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>text</small>
       </CCardHeader>
       <CCardBody>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>dropdown</small>
       </CCardHeader>
       <CCardBody>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
         <small>form</small>
       </CCardHeader>
       <CCardBody>
@@ -153,7 +153,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <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>
-        <i class="fa fa-align-justify"></i><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>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>icons</small>
       </CCardHeader>
       <CCardBody>
         <CNav>
           <CNavItem active>
-            <i class="cui-basket-loaded"></i>
+            <CIcon name="cil-basket"/>
           </CNavItem>
           <CNavItem>
             Link
@@ -46,12 +46,12 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>tab style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav tabs>
+        <CNav variant="tabs">
           <CNavItem active>
             Active
           </CNavItem>
@@ -67,12 +67,12 @@
     </CCard>
     <CCard>
       <CCardHeader @click="item++">
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>pill style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav pills>
+        <CNav variant="pills">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Another Link</CNavItem>
@@ -82,12 +82,12 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>fill tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav fill tabs>
+        <CNav fill variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
@@ -97,12 +97,12 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>justified tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav justified tabs>
+        <CNav justified variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
@@ -112,7 +112,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>dropdown support</small>
       </CCardHeader>
@@ -137,7 +137,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <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>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Responsive bootstrap Pagination</strong>
         <div class="card-header-actions">
           <a 
@@ -47,7 +47,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Pagination </strong>
         <small>alignment</small>
       </CCardHeader>

src/views/base/Popovers.vue

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

src/views/base/ProgressBars.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Bootstrap Progress</strong>
         <div class="card-header-actions">
           <a 
@@ -33,7 +33,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <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>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>width</small>
       </CCardHeader>
@@ -65,7 +65,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>height</small>
       </CCardHeader>
@@ -80,7 +80,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>colors</small>
       </CCardHeader>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>striped</small>
       </CCardHeader>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>animated</small>
       </CCardHeader>
@@ -174,7 +174,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
         <strong> Progress </strong>
         <small>multiple bars</small>
       </CCardHeader>

src/views/base/Switches.vue

@@ -23,8 +23,7 @@
               :key="'radio' + key"
               class="mx-1"
               :color="color"
-              shape="3d"
-              outline="alt"
+             variant="3d"
               v-bind="labelIcon"
               type="radio"
               name="radio"
@@ -85,15 +84,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -103,33 +102,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="success" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="info" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="light" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="success" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="info" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="light" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -139,235 +120,90 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline</code></small>
+            Switch <small><code>variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline  shape="pill"</code></small>
+            Switch <small><code>variant="opposite"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked />
-            <CSwitch class="mx-1" color="secondary" checked />
-            <CSwitch class="mx-1" color="success" checked />
-            <CSwitch class="mx-1" color="warning" checked />
-            <CSwitch class="mx-1" color="info" checked />
-            <CSwitch class="mx-1" color="danger" checked />
-            <CSwitch class="mx-1" color="light" checked />
-            <CSwitch class="mx-1" color="dark" checked />
-            <CSwitch class="mx-1" color="primary" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" color="success" checked shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked shape="pill" />
-            <CSwitch class="mx-1" color="info" checked shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked shape="pill" />
-            <CSwitch class="mx-1" color="light" checked shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked shape="pill" />
-            <CSwitch class="mx-1" color="primary" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
@@ -389,7 +225,7 @@
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
+            Switch <small><code>label shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
             <CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
@@ -407,72 +243,72 @@
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -483,7 +319,7 @@
             Sizes
           </CCardHeader>
           <CCardBody class="p-0">
-            <CTable
+            <CDataTable
               hover
               striped
               class="table-align-middle mb-0"
@@ -494,7 +330,7 @@
               <template #example="{item}">
                 <td>
                   <CSwitch
-                    :shape="item.example.shape"
+                    :variant="item.example.variant"
                     :color="item.example.color"
                     :size="item.example.size"
                     :checked="item.example.checked"
@@ -506,7 +342,7 @@
                   <span v-html="item.size_prop"></span>
                 </td>
               </template>
-            </CTable>
+            </CDataTable>
           </CCardBody>
         </CCard>
       </CCol>
@@ -530,17 +366,17 @@ export default {
       items: [
         {
           size: 'Large', 
-          example: { shape: '3d', color: 'primary', size: 'lg', checked: true }, 
+          example: {  variant: '3d', color: 'primary', size: 'lg', checked: true }, 
           size_prop: 'Add following prop <code>size="lg"</code>'
         },
         {
           size: 'Normal', 
-          example: { shape: '3d', color: 'primary', size: '', checked: true }, 
+          example: {  variant: '3d', color: 'primary', size: '', checked: true }, 
           size_prop: '-'
         },
         {
           size: 'Small', 
-          example: {shape: '3d', color: 'primary', size: 'sm', checked: true}, 
+          example: { variant: '3d', color: 'primary', size: 'sm', checked: true}, 
           size_prop: 'Add following prop <code>size="sm"</code>'
         }
       ],

src/views/base/Table.vue

@@ -1,23 +1,28 @@
 <template>
-  <CCard :header="caption" body-wrapper>
-    <CTable
-      :hover="hover"
-      :striped="striped"
-      :bordered="bordered"
-      :small="small"
-      :fixed="fixed"
-      :items="items"
-      :fields="fields"
-      :items-per-page="small ? 10 : 5"
-      :dark="dark"
-      pagination
-    >
-      <template #status="{item}">
-        <td>
-          <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
-        </td>
-      </template>
-    </CTable>
+  <CCard>
+    <CCardHeader>
+      <CIcon name="cil-justify-center"/> {{caption}}
+    </CCardHeader>
+    <CCardBody>
+      <CDataTable
+        :hover="hover"
+        :striped="striped"
+        :bordered="bordered"
+        :small="small"
+        :fixed="fixed"
+        :items="items"
+        :fields="fields"
+        :items-per-page="small ? 10 : 5"
+        :dark="dark"
+        pagination
+      >
+        <template #status="{item}">
+          <td>
+            <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
+          </td>
+        </template>
+      </CDataTable>
+    </CCardBody>
   </CCard>
 </template>
 

src/views/base/Tables.vue

@@ -4,7 +4,7 @@
       <CCol lg="6">
         <CTableWrapper
           :items="getShuffledUsersData()"
-          caption="<i class='fa fa-align-justify'></i> Simple Table"
+          caption="Simple Table"
         />
       </CCol>
 
@@ -12,7 +12,7 @@
         <CTableWrapper
           :items="getShuffledUsersData()"
           striped
-          caption="<i class='fa fa-align-justify'></i> Striped Table"
+          caption="Striped Table"
         />
       </CCol>
     </CRow>
@@ -22,7 +22,7 @@
         <CTableWrapper
           :items="getShuffledUsersData()"
           small
-          caption="<i class='fa fa-align-justify'></i> Condensed Table"
+          caption="Condensed Table"
         />
       </CCol>
 
@@ -31,7 +31,7 @@
           :items="getShuffledUsersData()"
           fixed
           bordered
-          caption="<i class='fa fa-align-justify'></i> Bordered Table"
+          caption="Bordered Table"
         />
       </CCol>
     </CRow>
@@ -45,7 +45,7 @@
           bordered
           small
           fixed
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
         />
       </CCol>
     </CRow>
@@ -60,7 +60,7 @@
           small
           fixed
           dark
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
         />
       </CCol>
     </CRow>

src/views/base/Tabs.vue

@@ -18,21 +18,21 @@
           </CCardHeader>
           <CCardBody>
             <CTabs>
-              <CTab title-html="Home" active>
+              <CTab title="Home" active>
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -49,22 +49,22 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs pills>
-              <CTab title-html="Home" active>
+            <CTabs variant="pills">
+              <CTab title="Home" active>
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                 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
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -84,7 +84,7 @@
             <CTabs>
               <CTab active>
                 <template slot="title">
-                  <i class="cui-calculator"></i>
+                  <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">
-                  <i class="cui-basket-loaded"></i>
+                  <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">
-                  <i class="cui-pie-chart"></i>
+                  <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">
-                  <i class="cui-calculator"></i> {{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">
-                  <i class="cui-basket-loaded"></i> {{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">
-                  <i class="cui-pie-chart"></i> {{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
@@ -163,10 +163,10 @@
             Tabs vertical
           </CCardHeader>
           <CCardBody>
-            <CTabs pills vertical>
+            <CTabs variant="pills" vertical>
               <CTab active>
                 <template slot="title">
-                  <i class="cui-calculator"></i> {{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">
-                  <i class="cui-basket-loaded"></i> {{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">
-                  <i class="cui-pie-chart"></i> {{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>
-        <i class="fa fa-align-justify"></i>
+        <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>
-        <i class="fa fa-align-justify"></i>
+        <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>
-          <i class="fa fa-align-justify"></i>
+          <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>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
           <strong> Button group </strong>sizing
         </CCardHeader>
         <CCardBody>
@@ -70,7 +70,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><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>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
           <strong> Button group </strong>vertical variation
         </CCardHeader>
         <CCardBody>
@@ -115,7 +115,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
           <strong> Button toolbar </strong>
           <small>with button groups</small>
           <!-- <div class="card-header-actions">
@@ -152,17 +152,17 @@
             <CInput
               class="mb-0 w-25 mx-1"
               size="sm"
-              prepend-html="$"
-              append-html=".00"
+              append=".00"
               value="100"
+              prepend="$"
             />
             <CSelect
               class="mb-0 w-25 mx-1"
               size="sm"
-              prepend-html="Size"
               value="Medium"
               :options="['Large','Medium','Small']"
               custom
+              prepend="Size"
             />
             <CButtonGroup size="sm" class="mx-1">
               <CButton color="secondary">Save</CButton>

src/views/buttons/Dropdowns.vue

@@ -4,7 +4,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <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>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>positioning</small>
           </CCardHeader>
@@ -140,7 +140,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>hidden caret</small>
           </CCardHeader>
@@ -165,7 +165,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small>sizing</small>
           </CCardHeader>
@@ -222,7 +222,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <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>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
             <strong> Dropdown </strong>
             <small><code>color</code></small>
           </CCardHeader>

src/views/buttons/StandardButtons.vue

@@ -119,35 +119,35 @@
       </CCardHeader>
       <CCardBody>
         <p>
-          Use <code>outline</code> prop
+          Use <code>variant="outline"</code> prop
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary">Primary</CButton>
+            <CButton block variant="outline" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary">Secondary</CButton>
+            <CButton block variant="outline" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success">Success</CButton>
+            <CButton block variant="outline" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning">Warning</CButton>
+            <CButton block variant="outline" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger">Danger</CButton>
+            <CButton block variant="outline" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info">Info</CButton>
+            <CButton block variant="outline" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light">Light</CButton>
+            <CButton block variant="outline" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark">Dark</CButton>
+            <CButton block variant="outline" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -156,28 +156,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -186,28 +186,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary" disabled>Primary</CButton>
+            <CButton block variant="outline" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success" disabled>Success</CButton>
+            <CButton block variant="outline" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning" disabled>Warning</CButton>
+            <CButton block variant="outline" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger" disabled>Danger</CButton>
+            <CButton block variant="outline" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info" disabled>Info</CButton>
+            <CButton block variant="outline" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light" disabled>Light</CButton>
+            <CButton block variant="outline" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark" disabled>Dark</CButton>
+            <CButton block variant="outline" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -220,35 +220,35 @@
       <CCardBody>
         <p>
           Use
-          <code>ghost</code> prop for ghost buttons.
+          <code>variant="ghost"</code> prop for ghost buttons.
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary">Primary</CButton>
+            <CButton block variant="ghost" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary">Secondary</CButton>
+            <CButton block variant="ghost" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success">Success</CButton>
+            <CButton block variant="ghost" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning">Warning</CButton>
+            <CButton block variant="ghost" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger">Danger</CButton>
+            <CButton block variant="ghost" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info">Info</CButton>
+            <CButton block variant="ghost" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light">Light</CButton>
+            <CButton block variant="ghost" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark">Dark</CButton>
+            <CButton block variant="ghost" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -257,28 +257,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -287,28 +287,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary" disabled>Primary</CButton>
+            <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success" disabled>Success</CButton>
+            <CButton block variant="ghost" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning" disabled>Warning</CButton>
+            <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger" disabled>Danger</CButton>
+            <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info" disabled>Info</CButton>
+            <CButton block variant="ghost" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light" disabled>Light</CButton>
+            <CButton block variant="ghost" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark" disabled>Dark</CButton>
+            <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -435,31 +435,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill>Primary</CButton>
+            <CButton block color="primary" shape="pill">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill>Secondary</CButton>
+            <CButton block color="secondary" shape="pill">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill>Success</CButton>
+            <CButton block color="success" shape="pill">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill>Warning</CButton>
+            <CButton block color="warning" shape="pill">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill>Danger</CButton>
+            <CButton block color="danger" shape="pill">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill>Info</CButton>
+            <CButton block color="info" shape="pill">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill>Light</CButton>
+            <CButton block color="light" shape="pill">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill>Dark</CButton>
+            <CButton block color="dark" shape="pill">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill>Link</CButton>
+            <CButton block color="link" shape="pill">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill disabled>Primary</CButton>
+            <CButton block color="primary" shape="pill" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill disabled>Secondary</CButton>
+            <CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill disabled>Success</CButton>
+            <CButton block color="success" shape="pill" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill disabled>Warning</CButton>
+            <CButton block color="warning" shape="pill" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill disabled>Danger</CButton>
+            <CButton block color="danger" shape="pill" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill disabled>Info</CButton>
+            <CButton block color="info" shape="pill" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill disabled>Light</CButton>
+            <CButton block color="light" shape="pill" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill disabled>Dark</CButton>
+            <CButton block color="dark" shape="pill" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill disabled>Link</CButton>
+            <CButton block color="link" shape="pill" disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -542,16 +542,16 @@
             <CButton color="primary" size="sm">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="sm">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton size="sm" ghost color="success">Ghost Button</CButton>
+            <CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="sm" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="sm" pill>Pill Button</CButton>
+            <CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
             <CButton color="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary">Outline Button</CButton>
+            <CButton variant="outline" color="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success">Ghost Button</CButton>
+            <CButton variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" pill>Pill Button</CButton>
+            <CButton color="danger" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
             <CButton color="primary" size="lg">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="lg">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success" size="lg">Ghost Button</CButton>
+            <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="lg" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="lg" pill>Pill Button</CButton>
+            <CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -604,27 +604,27 @@
         <CRow class="align-items-center">
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="primary">
-              <i class="cui-lightbulb"></i>&nbsp;Standard Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Standard Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="secondary" outline>
-              <i class="cui-lightbulb"></i>&nbsp;Outline Button
+            <CButton color="secondary" variant="outline">
+              <CIcon name="cil-lightbulb"/>&nbsp;Outline Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="success">
-              <i class="cui-lightbulb"></i>&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>
-              <i class="cui-lightbulb"></i>&nbsp;Square Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Square Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="danger" pill>
-              <i class="cui-lightbulb"></i>&nbsp;Pill Button
+            <CButton color="danger" shape="pill">
+              <CIcon name="cil-lightbulb"/>&nbsp;Pill Button
             </CButton>
           </CCol>
         </CRow>
@@ -637,22 +637,22 @@
       <CCardBody>
         <CRow>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -680,13 +680,13 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" outline color="secondary" block>Block level button</CButton>
-            <CButton size="lg" outline color="primary" block>Block level button</CButton>
-            <CButton size="lg" outline color="success" block>Block level button</CButton>
-            <CButton size="lg" outline color="info" block>Block level button</CButton>
-            <CButton size="lg" outline color="warning" block>Block level button</CButton>
-            <CButton size="lg" outline color="danger" block>Block level button</CButton>
-            <CButton size="lg" ghost color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
+            <CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
           </CCardBody>
         </CCard>
       </CCol>

src/views/charts/CChartBarExample.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { CChartBar } from '@coreui/coreui-chartjs/vue'
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartBarExample',

src/views/charts/CChartBarSimple.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { CChartBar } from '@coreui/coreui-chartjs/vue'
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
 import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
   name: 'CChartBarSimple',

src/views/charts/CChartDoughnutExample.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { CChartDoughnut } from '@coreui/coreui-chartjs/vue'
+import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartDoughnutExample',

src/views/charts/CChartLineExample.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartLineExample',

src/views/charts/CChartLineSimple.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
 import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
   name: 'CChartLineSimple',

src/views/charts/CChartPieExample.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { CChartPie } from '@coreui/coreui-chartjs/vue'
+import { CChartPie } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartPieExample',

src/views/charts/CChartPolarAreaExample.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { CChartPolarArea } from '@coreui/coreui-chartjs/vue'
+import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartPolarAreaExample',

src/views/charts/CChartRadarExample.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { CChartRadar } from '@coreui/coreui-chartjs/vue'
+import { CChartRadar } from '@coreui/coreui-vue-chartjs'
 
 export default {
   name: 'CChartRadarExample',

src/views/charts/Charts.vue

@@ -19,29 +19,39 @@
           <CChartLineExample/>
         </CCardBody>
       </CCard>
-      <CCard header-html="Bar Chart" body-wrapper>
-        <CChartBarExample/>
+      <CCard>
+        <CCardHeader>Bar Chart</CCardHeader>
+        <CCardBody><CChartBarExample/></CCardBody>
       </CCard>
-      <CCard header-html="Doughnut Chart" body-wrapper>
-        <CChartDoughnutExample/>
+      <CCard>
+        <CCardHeader>Doughnut Chart</CCardHeader>
+        <CCardBody><CChartDoughnutExample/></CCardBody>
       </CCard>
-      <CCard header-html="Radar Chart" body-wrapper>
-        <CChartRadarExample/>
+      <CCard>
+        <CCardHeader>Radar Chart</CCardHeader>
+        <CCardBody><CChartRadarExample/></CCardBody>
       </CCard>
-      <CCard header-html="Pie Chart" body-wrapper>
-        <CChartPieExample/>
+      <CCard>
+         <CCardHeader>Pie Chart</CCardHeader>
+        <CCardBody><CChartPieExample/></CCardBody>
       </CCard>
-      <CCard header-html="Polar Area Chart" body-wrapper>
-        <CChartPolarAreaExample/>
+      <CCard>
+        <CCardHeader>Polar Area Chart</CCardHeader>
+        <CCardBody><CChartPolarAreaExample/></CCardBody>
       </CCard>
-      <CCard header-html="Simple line chart" body-wrapper>
-        <CChartLineSimple border-color="success" labels="months"/>
+      <CCard>
+        <CCardHeader>Simple line chart</CCardHeader>
+        <CCardBody>
+          <CChartLineSimple border-color="success" labels="months"/>
+        </CCardBody>        
       </CCard>
-      <CCard header-html="Simple pointed chart" body-wrapper>
-        <CChartLineSimple pointed border-color="warning"/>
+      <CCard>
+        <CCardHeader>Simple pointed chart</CCardHeader>
+        <CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
       </CCard>
-      <CCard header-html="Simple bar chart" body-wrapper>
-        <CChartBarSimple background-color="danger"/>
+      <CCard>
+        <CCardHeader>Simple bar chart</CCardHeader>
+        <CCardBody><CChartBarSimple background-color="danger"/></CCardBody>        
       </CCard>
     </CCardGroup>
   </div>

src/views/charts/MainChartExample.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
 import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 
 function random (min, max) {

src/views/icons/Brands.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-globe"></i>Font Awesome brand icons
+        <CIcon name="cil-globe-alt"/>Brand icons
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -13,7 +13,7 @@
               sm="2"
               :key="brandName"
             >
-              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <CIcon :height="42" :content="brand"/>
               <div>{{brandName}}</div>
             </CCol>
           </template>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { iconSet as brands } from '@coreui/icons/brands'
+import { brandSet as brands } from '@coreui/icons'
 export default {
   name: 'Brands',
   brands

src/views/icons/CoreUIIcons.vue

@@ -1,8 +1,9 @@
+
 <template>
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-pencil"></i>CoreUI Icons
+        <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
         <CBadge color="info">New</CBadge>
         <div class="card-header-actions">
           <a
@@ -16,427 +17,28 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <!-- <CRow class="text-center mb-5">
-          <template v-for="(name, key) in $options.iconNames">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2">
-              <CIcon :name="name" width="24" class="mt-4"/>
-              <div>{{name}}</div>
+        <CRow class="text-center">
+          <template v-for="(icon, iconName) in $options.freeSet">
+            <CCol
+              class="mb-5"
+              col="3"
+              sm="2"
+              :key="iconName"
+            >
+              <CIcon :height="42" :content="icon"/>
+              <div>{{iconName}}</div>
             </CCol>
           </template>
         </CRow>
-         -->
-        <CRow class="text-center ">
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
-            <div>account-logout</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
-            <div>action-redo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
-            <div>action-undo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
-            <div>align-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
-            <div>align-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
-            <div>align-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
-            <div>arrow-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
-            <div>arrow-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
-            <div>arrow-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
-            <div>arrow-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban icons font-2xl d-block mt-4"></i>
-            <div>ban</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
-            <div>basket-loaded</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell icons font-2xl d-block mt-4"></i>
-            <div>bell</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold icons font-2xl d-block mt-4"></i>
-            <div>bold</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
-            <div>bookmark</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
-            <div>briefcase</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
-            <div>british-pound</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush icons font-2xl d-block mt-4"></i>
-            <div>brush</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
-            <div>calculator</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
-            <div>calendar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart icons font-2xl d-block mt-4"></i>
-            <div>cart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart icons font-2xl d-block mt-4"></i>
-            <div>chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check icons font-2xl d-block mt-4"></i>
-            <div>check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
-            <div>chevron-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
-            <div>chevron-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
-            <div>chevron-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
-            <div>chevron-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
-            <div>circle-check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
-            <div>circle-x</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
-            <div>cloud</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
-            <div>cloud-download</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
-            <div>cloud-upload</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code icons font-2xl d-block mt-4"></i>
-            <div>code</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog icons font-2xl d-block mt-4"></i>
-            <div>cog</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
-            <div>comment-square</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
-            <div>credit-card</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
-            <div>cursor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
-            <div>dashboard</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete icons font-2xl d-block mt-4"></i>
-            <div>delete</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
-            <div>dollar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop icons font-2xl d-block mt-4"></i>
-            <div>drop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
-            <div>envelope-closed</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
-            <div>envelope-letter</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
-            <div>envelope-open</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro icons font-2xl d-block mt-4"></i>
-            <div>euro</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file icons font-2xl d-block mt-4"></i>
-            <div>file</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe icons font-2xl d-block mt-4"></i>
-            <div>globe</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph icons font-2xl d-block mt-4"></i>
-            <div>graph</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home icons font-2xl d-block mt-4"></i>
-            <div>home</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
-            <div>inbox</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info icons font-2xl d-block mt-4"></i>
-            <div>info</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic icons font-2xl d-block mt-4"></i>
-            <div>italic</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
-            <div>justify-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
-            <div>justify-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
-            <div>justify-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
-            <div>laptop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers icons font-2xl d-block mt-4"></i>
-            <div>layers</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
-            <div>lightbulb</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list icons font-2xl d-block mt-4"></i>
-            <div>list</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
-            <div>location-pin</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
-            <div>lock-locked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
-            <div>lock-unlocked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
-            <div>magnifying-glass</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map icons font-2xl d-block mt-4"></i>
-            <div>map</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
-            <div>monitor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon icons font-2xl d-block mt-4"></i>
-            <div>moon</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note icons font-2xl d-block mt-4"></i>
-            <div>note</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options icons font-2xl d-block mt-4"></i>
-            <div>options</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
-            <div>paperclip</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
-            <div>pencil</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people icons font-2xl d-block mt-4"></i>
-            <div>people</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone icons font-2xl d-block mt-4"></i>
-            <div>phone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
-            <div>pie-chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print icons font-2xl d-block mt-4"></i>
-            <div>print</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
-            <div>puzzle</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss icons font-2xl d-block mt-4"></i>
-            <div>rss</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
-            <div>screen-desktop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
-            <div>screen-smartphone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings icons font-2xl d-block mt-4"></i>
-            <div>settings</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share icons font-2xl d-block mt-4"></i>
-            <div>share</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield icons font-2xl d-block mt-4"></i>
-            <div>shield</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
-            <div>sort-ascending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
-            <div>sort-descending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech icons font-2xl d-block mt-4"></i>
-            <div>speech</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
-            <div>speedometer</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star icons font-2xl d-block mt-4"></i>
-            <div>star</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun icons font-2xl d-block mt-4"></i>
-            <div>sun</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
-            <div>tablet</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags icons font-2xl d-block mt-4"></i>
-            <div>tags</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task icons font-2xl d-block mt-4"></i>
-            <div>task</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
-            <div>thumb-down</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
-            <div>thumb-up</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash icons font-2xl d-block mt-4"></i>
-            <div>trash</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline icons font-2xl d-block mt-4"></i>
-            <div>underline</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user icons font-2xl d-block mt-4"></i>
-            <div>user</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
-            <div>user-female</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
-            <div>user-follow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
-            <div>user-unfollow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
-            <div>wrench</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen icons font-2xl d-block mt-4"></i>
-            <div>yen</div>
-          </CCol>
-        </CRow>
       </CCardBody>
     </CCard>
   </div>
 </template>
-<script>
-// import { iconSet } from '@coreui/icons'
-// const iconNames = Object.keys(iconSet)
 
+<script>
+import { freeSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
-  // iconNames,
+  freeSet
 }
 </script>

src/views/icons/Flags.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-globe"></i> Flags
+        <CIcon name="cil-globe-alt"/> Flags
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -20,8 +20,8 @@
               sm="2"
               :key="key"
             >
-              <CIcon :height="42" :content="$options.iconSet[flag]"/>
-              <div>{{flag}}</div>
+              <CIcon :height="42" :content="flag"/>
+              <div>{{key}}</div>
             </CCol>
           </template>
         </CRow>
@@ -31,15 +31,15 @@
 </template>
 
 <script>
-import { iconSet } from '@coreui/icons/flags'
+import { flagSet } from '@coreui/icons'
 export default {
   name: 'Flags',
-  iconSet,
+  flagSet,
   computed: {
     // Avoid duplication caused by displaying 1x1 and 4x3 formats
     // (adding Q to name makes icon quadratic)
     displayedFlags () {
-      return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
+      return this.$options.flagSet
     }
   }
 }

src/views/notifications/Alerts.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <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>
-          <i class="fa fa-align-justify"></i> 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>
-          <i class="fa fa-align-justify"></i> 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>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
           <small>dismissible</small>
         </CCardHeader>
         <CCardBody>
@@ -107,16 +107,7 @@
 
           <CAlert
             color="secondary"
-            closeButton
-            fade
             :show.sync="alert2"
-          >
-            Dismissible Alert with fade effect!
-          </CAlert>
-
-          <CAlert
-            color="secondary"
-            :show.sync="alert3"
             class="alert-dismissible"
           >
             Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
               class="position-absolute"
               color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="alert3 = false"
+              @click="alert2 = false"
             >
               Close
             </CButton>
@@ -140,7 +131,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
           <small>auto dismissible</small>
         </CCardHeader>
         <CCardBody>
@@ -186,8 +177,7 @@ export default {
       dismissSecs: 10,
       dismissCountDown: 10,
       alert1: true,
-      alert2: true,
-      alert3: true
+      alert2: true
     }
   },
   methods: {

src/views/notifications/Badges.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <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>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="cil-justify-center"/> Badge
           <small>contextual variations</small>
         </CCardHeader>
         <CCardBody>
@@ -50,23 +50,23 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
-          <small>pills</small>
+          <CIcon name="cil-justify-center"/> Badge
+          <small>shape="pill"</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge pill color="primary">Primary</CBadge>
-          <CBadge pill color="secondary">Secondary</CBadge>
-          <CBadge pill color="success">Success</CBadge>
-          <CBadge pill color="danger">Danger</CBadge>
-          <CBadge pill color="warning">Warning</CBadge>
-          <CBadge pill color="info">Info</CBadge>
-          <CBadge pill color="light">Light</CBadge>
-          <CBadge pill color="dark">Dark</CBadge>
+          <CBadge shape="pill" color="primary">Primary</CBadge>
+          <CBadge shape="pill" color="secondary">Secondary</CBadge>
+          <CBadge shape="pill" color="success">Success</CBadge>
+          <CBadge shape="pill" color="danger">Danger</CBadge>
+          <CBadge shape="pill" color="warning">Warning</CBadge>
+          <CBadge shape="pill" color="info">Info</CBadge>
+          <CBadge shape="pill" color="light">Light</CBadge>
+          <CBadge shape="pill" color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> 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>
-              <i class="fa fa-align-justify"></i> 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" 
@@ -91,6 +91,7 @@
     <CModal
       title="Modal title"
       :show.sync="primaryModal"
+      color="primary"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

src/views/pages/Login.vue

@@ -9,16 +9,18 @@
                 <h1>Login</h1>
                 <p class="text-muted">Sign In to your account</p>
                 <CInput
-                  prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
                   autocomplete="username email"
-                />
+                >
+                  <template #prepend-content><CIcon name="cil-user"/></template>
+                </CInput>
                 <CInput
-                  prependHtml="<i class='cui-lock-locked'></i>"
                   placeholder="Password"
                   type="password"
                   autocomplete="curent-password"
-                />
+                >
+                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+                </CInput>
                 <CRow>
                   <CCol col="6">
                     <CButton color="primary" class="px-4">Login</CButton>
@@ -31,7 +33,9 @@
             </CCardBody>
           </CCard>
           <CCard
-            class="text-white text-center bg-primary py-5 d-md-down-none"
+            color="primary"
+            text-color="white"
+            class="text-center py-5 d-md-down-none"
             style="width:44%"
             body-wrapper
           >

src/views/pages/Page404.vue

@@ -10,9 +10,9 @@
         </div>
         <CInput
           class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Page500.vue

@@ -9,9 +9,9 @@
         </div>
         <CInput
           class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Register.vue

@@ -9,27 +9,30 @@
               <p class="text-muted">Create your account</p>
               <CInput
                 placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
                 autocomplete="username"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
-                prepend-html="@"
                 autocomplete="email"
+                prepend="@"
               />
               <CInput
                 placeholder="Password"
                 type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+              </CInput>
               <CInput
                 placeholder="Repeat password"
                 type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
                 class="mb-4"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+              </CInput>
               <CButton color="success" block>Create Account</CButton>
             </CForm>
           </CCardBody>

src/views/theme/Colors.vue

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

src/views/users/User.vue

@@ -6,7 +6,7 @@
           User id:  {{ $route.params.id }}
         </CCardHeader>
         <CCardBody>
-          <CTable
+          <CDataTable
             striped
             small
             fixed

src/views/users/Users.vue

@@ -2,32 +2,37 @@
   <CRow>
     <CCol col="12" xl="8">
       <transition name="slide">
-        <CCard header-html="Users" body-wrapper>
-          <CTable
-            hover
-            striped
-            :items="items"
-            :fields="fields"
-            :items-per-page="perPage"
-            @row-clicked="rowClicked"
-            :pagination="$options.paginationProps"
-            index-column
-            clickable-rows
-          >
-            <template #username="data">
-              <td>
-                <strong>{{data.item.username}}</strong>
-              </td>
-            </template>
-           
-            <template #status="data">
-              <td>
-                <CBadge :color="getBadge(data.item.status)">
-                  {{data.item.status}}
-                </CBadge>
-              </td>
-            </template>
-          </CTable>
+        <CCard>
+          <CCardHeader>
+            Users
+          </CCardHeader>
+          <CCardBody>
+            <CDataTable
+              hover
+              striped
+              :items="items"
+              :fields="fields"
+              :items-per-page="perPage"
+              @row-clicked="rowClicked"
+              :pagination="$options.paginationProps"
+              index-column
+              clickable-rows
+            >
+              <template #username="data">
+                <td>
+                  <strong>{{data.item.username}}</strong>
+                </td>
+              </template>
+            
+              <template #status="data">
+                <td>
+                  <CBadge :color="getBadge(data.item.status)">
+                    {{data.item.status}}
+                  </CBadge>
+                </td>
+              </template>
+            </CDataTable>
+          </CCardBody>
         </CCard>
       </transition>
     </CCol>

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="basketLoaded" 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="basketLoaded" 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="basketLoaded" 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="basketLoaded" 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,61 +448,11 @@
           color="info"
           inverse
         >
-          <CIcon name="speech" height="36"/>
+          <CIcon name="cil-speech" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
     </CRow>
     <WidgetsDropdown/>
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="primary"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="success"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="danger"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="warning"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-    </CRow>
     <CRow>
       <CCol sm="4" lg="2">
         <CWidgetSimple header="title" text="1,123">

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>
-              <i class="cui-settings"></i>
+              <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -38,10 +38,9 @@
             color="transparent p-0"
             placement="bottom-end"
             :caret="false"
-            buttonHtml="<i class='cui-location-pin'></i>"
           >
             <template #toggler-content>
-              <i class="cui-location-pin"></i>
+              <CIcon name="cil-location-pin"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -76,7 +75,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-              <i class="cui-settings"></i>
+              <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -110,7 +109,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-             <i class="cui-settings"></i>
+             <CIcon name="cil-settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>