refactor: remove external icon libraries

Author: woothu

package.json

@@ -26,10 +26,7 @@
     "css-vars-ponyfill": "^1.11.1",
     "current-script-polyfill": "^1.0.0",
     "element-resize-detector": "^1.2.0",
-    "flag-icon-css": "^3.2.0",
-    "font-awesome": "^4.7.0",
     "perfect-scrollbar": "^1.4.0",
-    "simple-line-icons": "^2.4.1",
     "tooltip.js": "^1.3.1",
     "vue": "^2.6.6",
     "vue-chartjs": "^3.4.0",

src/App.vue

@@ -11,14 +11,6 @@ export default {
 <style lang="scss">
   // CoreUI Icons Set
   @import '~@coreui/icons/css/coreui-icons.min.css';
-  /* Import Font Awesome Icons Set */
-  $fa-font-path: '~font-awesome/fonts/';
-  @import '~font-awesome/scss/font-awesome.scss';
-  /* Import Simple Line Icons Set */
-  $simple-line-font-path: '~simple-line-icons/fonts/';
-  @import '~simple-line-icons/scss/simple-line-icons.scss';
-  /* Import Flag Icons Set */
-  @import '~flag-icon-css/css/flag-icon.min.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>

src/_nav.js

@@ -157,12 +157,12 @@ export default {
       icon: 'cui-pie-chart'
     },
     {
-      name: 'Icons',
+      name: 'CoreUI Icons',
       url: '/icons',
       icon: 'cui-star',
       children: [
         {
-          name: 'CoreUI Icons',
+          name: 'Icons library',
           url: '/icons/coreui-icons',
           icon: 'cui-star',
           badge: {
@@ -174,20 +174,6 @@ export default {
           name: 'Flags',
           url: '/icons/flags',
           icon: 'cui-star'
-        },
-        {
-          name: 'Font Awesome',
-          url: '/icons/font-awesome',
-          icon: 'cui-star',
-          badge: {
-            variant: 'secondary',
-            text: '4.7'
-          }
-        },
-        {
-          name: 'Simple Line Icons',
-          url: '/icons/simple-line-icons',
-          icon: 'cui-star'
         }
       ]
     },

src/icons.js

@@ -0,0 +1,48 @@
+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'
+
+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
+  }
+)

src/main.js

@@ -12,6 +12,7 @@ import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue/src'
 import { CIconPlugin } from '@coreui/icons/vue'
+import { iconsSet } from './icons.js'
 
 // import CoreuiVue from '@coreui/vue'
 // import CoreuiVue from '@coreui/vue/dist/custom.common.js'
@@ -21,7 +22,8 @@ Vue.config.performance = true
 // todo
 // cssVars()
 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin)
+// console.log(iconsSet)
+Vue.use(CIconPlugin, iconsSet)
 
 /* eslint-disable no-new */
 var vm = new Vue({

src/router/index.js

@@ -39,8 +39,6 @@ const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
 const Flags = () => import('@/views/icons/Flags')
-const FontAwesome = () => import('@/views/icons/FontAwesome')
-const SimpleLineIcons = () => import('@/views/icons/SimpleLineIcons')
 const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
 
 // Views - Notifications
@@ -62,7 +60,7 @@ Vue.use(Router)
 
 export default new Router({
   mode: 'hash', // https://router.vuejs.org/api/#mode
-  linkActiveClass: 'active',
+  linkActiveClass: 'c-active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
@@ -247,31 +245,21 @@ export default new Router({
         },
         {
           path: 'icons',
-          redirect: '/icons/font-awesome',
-          name: 'Icons',
+          redirect: '/icons/coreui-icons',
+          name: 'CoreUI Icons',
           component: {
             render (c) { return c('router-view') }
           },
           children: [
             {
               path: 'coreui-icons',
-              name: 'CoreUI Icons',
+              name: 'Icons library',
               component: CoreUIIcons
             },
             {
               path: 'flags',
               name: 'Flags',
               component: Flags
-            },
-            {
-              path: 'font-awesome',
-              name: 'Font Awesome',
-              component: FontAwesome
-            },
-            {
-              path: 'simple-line-icons',
-              name: 'Simple Line Icons',
-              component: SimpleLineIcons
             }
           ]
         },

src/views/Dashboard.vue

@@ -384,9 +384,6 @@
             head-variant="light"
             no-sorting
           >
-            <!-- <div slot="activity-header">
-              A tu nic
-            </div> -->
             <td slot="avatar" class="c-text-center" slot-scope="{item}">
               <div class="c-avatar">
                 <img :src="item.avatar.url" class="c-img-avatar" alt="">
@@ -410,15 +407,13 @@
               slot-scope="{item}"
               class="c-text-center"
             >
-              <i
-                class="c-h4 c-mb-0"
-                :class="flag(item.country.flag)"
-                :title="item.country.flag"
-                :id="item.country.flag"
-              ></i>
+              <CIcon
+                :name="item.country.flag"
+                height="25"
+              />
             </td>
             <td slot="usage" slot-scope="{item}">
-              <div class="clearfix">
+              <div class="c-clearfix">
                 <div class="c-float-left">
                   <strong>{{item.usage.value}}%</strong>
                 </div>
@@ -437,7 +432,10 @@
               slot-scope="{item}"
               class="c-text-center"
             >
-              <i :class="item.payment.icon" style="font-size:24px"></i>
+              <CIcon
+                :name="item.payment.icon"
+                height="25"
+              />
             </td>
             <td slot="activity" slot-scope="{item}">
               <div class="c-small c-text-muted">Last login</div>
@@ -457,7 +455,6 @@ import WidgetsSocial from './widgets/WidgetsSocial'
 import CalloutChartExample from './charts/CalloutChartExample'
 import CChartLineSimple from './charts/CChartLineSimple'
 
-
 export default {
   name: 'Dashboard',
   components: {
@@ -467,61 +464,61 @@ export default {
     WidgetsSocial,
     CChartLineSimple
   },
-  data: function () {
+  data () {
     return {
       selected: 'Month',
       tableItems: [
         {
           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: 'US' },
           usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
+          payment: { name: 'Mastercard', icon: '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: 'BR' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
+          payment: { name: 'Visa', icon: '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: 'IN' },
           usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
+          payment: { name: 'Stripe', icon: '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: 'FR' },
           usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'PayPal', icon: 'fa fa-paypal' },
+          payment: { name: 'PayPal', icon: '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: 'ES' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
+          payment: { name: 'Google Wallet', icon: 'google-wallet' },
           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: 'PL' },
           usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
+          payment: { name: 'Amex', icon: 'cc-amex' },
           activity: 'Last week'
         }
       ],
       tableFields: [
-        { key: 'avatar', _classes: 'c-text-center' },
+        { key: 'avatar', label: '', _classes: 'c-text-center' },
         { key: 'user' },
         { key: 'country', _classes: 'c-text-center' },
         { key: 'usage' },
@@ -543,9 +540,6 @@ export default {
         $variant = 'danger'
       }
       return $variant
-    },
-    flag (value) {
-      return 'flag-icon flag-icon-' + value
     }
   }
 }