feat: adjust components with icons to CIcon component

Author: woothu

package.json

@@ -57,12 +57,11 @@
     "test": "vue-cli-service test:unit",
     "test:coverage": "vue-cli-service test:unit --coverage --collectCoverageFrom=src/**/*.{js,vue} --collectCoverageFrom=!**/index*",
     "test:e2e": "vue-cli-service test:e2e",
-    "clear_jest": "jest --clearCache",
-    "icons": "node src/components/Icon/build/iconsScript.js"
+    "clear_jest": "jest --clearCache"
   },
   "dependencies": {
     "@coreui/coreui": "next",
-    "@coreui/icons": "0.3.0",
+    "@coreui/icons": "../coreui-icons",
     "raw-loader": "^1.0.0",
     "core-js": "^2.5.7",
     "element-resize-detector": "^1.2.0",

src/components/Table/CTable.vue

@@ -58,7 +58,11 @@
                   name="sorting-icon"
                   :state="getIconState(index)"
                 >
-                  <i :class="iconClasses(index)"></i>
+                  <CIcon
+                    width="18"
+                    name="arrowTop"
+                    :class="iconClasses(index)"
+                  />
                 </slot>
               </th>
             </template>
@@ -170,7 +174,11 @@
                   name="sorting-icon"
                   :state="getIconState(index)"
                 >
-                  <i :class="iconClasses(index)"></i>
+                  <CIcon
+                    width="18"
+                    name="arrowTop"
+                    :class="iconClasses(index)"
+                  />
                 </slot>
               </th>
             </template>
@@ -208,9 +216,14 @@
 <script>
 import CSpinner from '../Spinner/CSpinner'
 import CPagination from '../Pagination/CPagination'
+
+import { CIcon } from '@coreui/icons/vue'
+import { arrowTop, arrowBottom } from '@coreui/icons'
+CIcon.icons = { arrowTop, arrowBottom }
+
 export default {
   name: 'CTable',
-  components: { CPagination, CSpinner },
+  components: { CPagination, CSpinner, CIcon },
   props: {
     items: Array,
     fields: Array,
@@ -423,8 +436,7 @@ export default {
     iconClasses (index) {
       const state = this.getIconState(index)
       return [
-        'c-icon-transition  c-icons c-font-xl cui-arrow-top',
-        'c-position-absolute c-arrow-position',
+        'c-icon-transition c-position-absolute c-arrow-position',
         {
           'c-transparent': !state,
           'c-rotate-icon': state === 'desc'
@@ -477,7 +489,4 @@ export default {
 @import "~@coreui/coreui/scss/utilities/_spacing.scss";
 @import "~@coreui/coreui/scss/utilities/_text.scss";
 @import "~@coreui/coreui/scss/utilities/_typography.scss";
-
-//Icons
-@import '~@coreui/icons/css/coreui-icons.min.css';
 </style>

src/components/Widgets/CWidgetIcon.vue

@@ -1,33 +1,36 @@
-<template functional>
+<template>
   <div class="c-card">
     <div
       class="c-card-body c-clearfix c-d-flex c-align-items-center"
-      :class="props.noPadding ? 'c-p-0' : c-p-3"
+      :class="noPadding ? 'c-p-0' : 'c-p-3'"
     >
-      <i
-        :class="[props.addIconClasses, props.noPadding ? 'c-p-4' : 'c-p-3']"
-        class="c-float-left c-mr-3 c-font-2xl"
-      ></i>
+      <div
+        class="c-float-left c-mr-3 c-text-white"
+        :class="[`c-bg-${variant}`, noPadding ? 'c-p-4' : 'c-p-3']"
+      >
+        <slot></slot>
+      </div>
+
       <div>
         <div class="c-text-primary c-text-value-sm">
-          {{props.header}}
+          {{header}}
         </div>
         <div class="c-text-muted c-text-uppercase c-font-weight-bold c-small">
-          {{props.text}}
+          {{text}}
         </div>
       </div>
     </div>
     <div
-      v-if="props.link || $slots.default"
+      v-if="link || $slots.link"
       class="c-card-footer c-px-3 c-py-2"
     >
-      <slot>
+      <slot name="link">
         <CLink
           class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
-          :href="props.link"
+          :href="link"
         >
-          {{props.linkText}}
-          <i class="fa fa-angle-right c-float-right c-font-lg"></i>
+          {{linkText}}
+          <CIcon name="arrowRight" class="c-float-right" width="16"/>
         </CLink>
       </slot>
     </div>
@@ -36,8 +39,13 @@
 
 <script>
 import CLink from '../Link/CLink'
+import { CIcon } from '@coreui/icons/vue'
+import { arrowRight } from '@coreui/icons'
+CIcon.icons = { arrowRight }
+
 export default {
   name: 'CWidgetIcon',
+  components: { CIcon },
   props: {
     addIconClasses: String,
     header: {
@@ -53,7 +61,11 @@ export default {
       default: 'View More'
     },
     link: String,
-    noPadding: Boolean
+    noPadding: Boolean,
+    variant: {
+      type: String,
+      default: 'primary'
+    }
   }
 }
 </script>
@@ -66,6 +78,4 @@ export default {
   @import "~@coreui/coreui/scss/utilities/_display.scss";
   @import "~@coreui/coreui/scss/utilities/_text.scss";
   @import "~@coreui/coreui/scss/utilities/_background.scss";
-  //Icons
-  @import '~@coreui/icons/css/coreui-icons.min.css';
 </style>

src/components/Widgets/CWidgetProgressIcon.vue

@@ -2,16 +2,17 @@
   <div :class="props.inverse ? `c-card c-text-white c-bg-${props.variant}` : 'c-card'">
     <div class="c-card-body">
       <div
-        v-if="props.iconClasses"
+        v-if="$slots.default"
         class="c-h1 c-text-muted c-text-right c-mb-4"
       >
-        <i :class="props.iconClasses"></i>
+        <slot></slot>
+        <!-- <i :class="props.iconClasses"></i> -->
       </div>
       <div class="c-h4 c-mb-0">{{props.header}}</div>
       <small class="c-text-muted c-text-uppercase c-font-weight-bold">
         {{props.text}}
       </small>
-      <slot>
+      <slot name="progress">
         <CProgress
           :variant="!props.inverse ? props.variant : ''"
           :value="props.value"

src/components/Widgets/CWidgetSocial.vue

@@ -1,10 +1,10 @@
 <template functional>
   <div class="c-brand-card">
-    <div :class="`c-brand-card-header c-bg-${props.variant}`">
-      <i
+    <div :class="`c-brand-card-header c-text-white c-bg-${props.variant}`">
+      <!-- <i
         class="c-position-absolute"
         :class="props.iconClasses || `fa fa-${props.variant}`"
-      ></i>
+      ></i> -->
       <slot></slot>
     </div>
     <div class="c-brand-card-body">