refactor: remove external icon libraries

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',
+          redirect: '/icons/coreui-icons',
-          name: '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
+              <CIcon
-                class="c-h4 c-mb-0"
+                :name="item.country.flag"
-                :class="flag(item.country.flag)"
+                height="25"
-                :title="item.country.flag"
+              />
-                :id="item.country.flag"
-              ></i>
             </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
     }
   }
 }

src/views/buttons/BrandButtons.vue

@@ -8,154 +8,53 @@
           </CCardHeader>
           <CCardBody>
             <small>Usage </small>
-            <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <code>
+              &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
+            </code>
             <hr/>
             <h6>
               Size Small
               <small>Add <code>size="sm"</code></small>
             </h6>
             <p>
-              <!-- <template v-for="(brand, key) in $options.brands">
+              <template v-for="(brandName, key) in $options.brands">
-                <button
+                <CButton
-                  type="button"
+                  :name="brandName"
-                  :class="`c-btn-${brand}`"
+                  size="sm"
-                  class="c-btn c-btn-sm c-btn-brand c-mr-1"
+                  :key="key"
+                  :variant="brandName"
                 >
-                  <i :class="`fa fa-${brand}`"></i>
+                  <CIcon :name="brandName"/>
-                  <span>{{brand}}</span>
+                  <span>{{brandName}}</span>
-                </button>
-              </template> -->
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
-                <i class="fa fa-facebook"></i><span>Facebook</span>
-              </CButton>
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
-                <i class="fa fa-twitter"></i><span>Twitter</span>
-              </CButton>
-              <CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-linkedin"></i><span>LinkedIn</span>
-              </CButton>
-              <CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-flickr"></i><span>Flickr</span>
-              </CButton>
-              <CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-tumblr"></i><span>Tumblr</span>
-              </CButton>
-              <CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-xing"></i><span>Xing</span>
-              </CButton>
-              <CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-github"></i><span>Github</span>
-              </CButton>
-              <CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-html5"></i><span>HTML5</span>
-              </CButton>
-              <CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-openid"></i><span>OpenID</span>
-              </CButton>
-              <CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
-              </CButton>
-              <CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-css3"></i><span>CSS3</span>
-              </CButton>
-              <CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-youtube"></i><span>YouTube</span>
-              </CButton>
-              <CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-dribbble"></i><span>Dribbble</span>
-              </CButton>
-              <CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-google-plus"></i><span>Google+</span>
-              </CButton>
-              <CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-instagram"></i><span>Instagram</span>
-              </CButton>
-              <CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-pinterest"></i><span>Pinterest</span>
-              </CButton>
-              <CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vk"></i><span>VK</span>
-              </CButton>
-              <CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-yahoo"></i><span>Yahoo</span>
-              </CButton>
-              <CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-behance"></i><span>Behance</span>
-              </CButton>
-              <CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-dropbox"></i><span>Dropbox</span>
-              </CButton>
-              <CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-reddit"></i><span>Reddit</span>
-              </CButton>
-              <CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-spotify"></i><span>Spotify</span>
-              </CButton>
-              <CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vine"></i><span>Vine</span>
-              </CButton>
-              <CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-foursquare"></i><span>Forsquare</span>
-              </CButton>
-              <CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vimeo"></i><span>Vimeo</span>
                 </CButton>
+              </template>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+                <CButton
-              <CButton variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+                  :key="key"
-              <CButton variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+                  :variant="brandName"
-              <CButton variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+                >
-              <CButton variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+                  <CIcon :name="brandName"/>
-              <CButton variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+                </CButton>
-              <CButton variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              </template>
-              <CButton variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="lg" variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+                <CButton
-              <CButton size="lg" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton size="lg" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+                  size="lg"
-              <CButton size="lg" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+                  :key="key"
-              <CButton size="lg" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+                  :variant="brandName"
-              <CButton size="lg" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+                >
-              <CButton size="lg" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+                  <CIcon :name="brandName"/>
-              <CButton size="lg" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton size="lg" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+                </CButton>
-              <CButton size="lg" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              </template>
-              <CButton size="lg" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -166,91 +65,48 @@
             <strong>Brand Button </strong> <small>Icons only</small>
           </CCardHeader>
           <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <small>Usage </small>
+              <code>
+                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
+              </code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="sm" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+                <CButton
-              <CButton size="sm" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+                  :name="brandName"
-              <CButton size="sm" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+                  size="sm"
-              <CButton size="sm" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+                  :key="key"
-              <CButton size="sm" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+                  :variant="brandName"
-              <CButton size="sm" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+                >
-              <CButton size="sm" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+                  <CIcon :name="brandName"/>
-              <CButton size="sm" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+                </CButton>
-              <CButton size="sm" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              </template>
-              <CButton size="sm" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="sm" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="sm" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="sm" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="sm" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="sm" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="sm" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="sm" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="sm" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="sm" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="sm" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="sm" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="sm" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="sm" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="sm" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+                <CButton
-              <CButton variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+                  :name="brandName"
-              <CButton variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+                  :key="key"
-              <CButton variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+                  :variant="brandName"
-              <CButton variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+                >
-              <CButton variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+                  <CIcon :name="brandName"/>
-              <CButton variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+                </CButton>
-              <CButton variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+              </template>
-              <CButton variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="lg" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
+                <CButton
-              <CButton size="lg" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
+                  :name="brandName"
-              <CButton size="lg" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
+                  size="lg"
-              <CButton size="lg" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
+                  :key="key"
-              <CButton size="lg" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
+                  :variant="brandName"
-              <CButton size="lg" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
+                >
-              <CButton size="lg" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
+                  <CIcon :name="brandName"/>
-              <CButton size="lg" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
+                </CButton>
-              <CButton size="lg" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              </template>
-              <CButton size="lg" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="lg" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="lg" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="lg" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="lg" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="lg" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="lg" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="lg" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="lg" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="lg" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="lg" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="lg" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="lg" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="lg" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="lg" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -262,91 +118,45 @@
             <strong>Brand Button </strong> <small>Text only</small>
           </CCardHeader>
           <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="sm" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+                <CButton
-              <CButton size="sm" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton size="sm" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+                  size="sm"
-              <CButton size="sm" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+                  :key="key"
-              <CButton size="sm" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+                  :variant="brandName"
-              <CButton size="sm" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+                >
-              <CButton size="sm" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton size="sm" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+                </CButton>
-              <CButton size="sm" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
+              </template>
-              <CButton size="sm" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+                <CButton
-              <CButton variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+                  :key="key"
-              <CButton variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+                  :variant="brandName"
-              <CButton variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+                >
-              <CButton variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+                </CButton>
-              <CButton variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+              </template>
-              <CButton variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
-              <CButton variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="lg" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
+                <CButton
-              <CButton size="lg" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton size="lg" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
+                  size="lg"
-              <CButton size="lg" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
+                  :key="key"
-              <CButton size="lg" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
+                  :variant="brandName"
-              <CButton size="lg" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
+                >
-              <CButton size="lg" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton size="lg" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
+                </CButton>
-              <CButton size="lg" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
+              </template>
-              <CButton size="lg" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -358,12 +168,53 @@
 <script>
 export default {
   name: 'brand-buttons',
-  brands: ['facebook', 'twitter', 'linkedin']
+  brands: [
+    'facebook',
+    'twitter',
+    'linkedin',
+    'flickr',
+    'tumblr',
+    'xing',
+    'github',
+    'stack-overflow',
+    'youtube',
+    'dribbble',
+    'instagram',
+    'pinterest',
+    'vk',
+    'yahoo',
+    'behance',
+    'reddit',
+    'vimeo'
+  ]
+  // labels: {
+  //   facebook: 'Facebook',
+  //   twitter: 'Twitter',
+  //   linkedin: 'LinkedIn',
+  //   flickr: 'Flickr',
+  //   tumblr: 'Tumblr',
+  //   xing: 'Xing',
+  //   github: 'Github',
+  //   'stack-overflow': 'StackOverflow',
+  //   youtube: 'YouTube',
+  //   dribbble: 'Dribbble',
+  //   instagram: 'Instagram',
+  //   pinterest: 'Pinterest',
+  //   vk: 'VK',
+  //   yahoo: 'Yahoo',
+  //   behance: 'Behance',
+  //   reddit: 'Reddit',
+  //   vimeo: 'Vimeo'
+  // }
 }
 </script>
 
 <style scoped lang="css">
-.btn {
+.c-btn {
   margin-bottom: 4px;
+  margin-right: 6px;
+}
+.c-btn svg + span {
+  margin-left: 8px;
 }
 </style>

src/views/icons/CoreUIIcons.vue

@@ -431,14 +431,15 @@
   </div>
 </template>
 <script>
-import icons from '@coreui/icons'
+import { iconSet } from '@coreui/icons'
-const iconNames = Object.keys(icons)
+
+const iconNames = Object.keys(iconSet)
 
 export default {
   name: 'CoreUIIcons',
   iconNames,
-  mounted () {
+  // mounted () {
-    console.log(this.$options.iconNames)
+  //   console.log(this.$options.iconNames)
-  }
+  // }
 }
 </script>

src/views/icons/SimpleLineIcons.vue

@@ -1,751 +0,0 @@
-<template>
-  <div class="c-animated c-fadeIn">
-    <CCard class="c-card-default">
-      <CCardHeader>
-        <i class="fa fa-picture-o"></i> Simple Line Icons
-      </CCardHeader>
-      <CCardBody>
-        <CRow class="c-text-center">
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user icons c-font-2xl c-d-block c-mt-4"></i>icon-user
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-people icons c-font-2xl c-d-block c-mt-4"></i>icon-people
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-female icons c-font-2xl c-d-block c-mt-4"></i>icon-user-female
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-follow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-follow
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-following icons c-font-2xl c-d-block c-mt-4"></i>icon-user-following
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-unfollow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-unfollow
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-login icons c-font-2xl c-d-block c-mt-4"></i>icon-login
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-logout icons c-font-2xl c-d-block c-mt-4"></i>icon-logout
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-emotsmile icons c-font-2xl c-d-block c-mt-4"></i>icon-emotsmile
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-phone icons c-font-2xl c-d-block c-mt-4"></i>icon-phone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-end icons c-font-2xl c-d-block c-mt-4"></i>icon-call-end
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-in icons c-font-2xl c-d-block c-mt-4"></i>icon-call-in
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-out icons c-font-2xl c-d-block c-mt-4"></i>icon-call-out
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-map icons c-font-2xl c-d-block c-mt-4"></i>icon-map
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-location-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-location-pin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-direction icons c-font-2xl c-d-block c-mt-4"></i>icon-direction
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-directions icons c-font-2xl c-d-block c-mt-4"></i>icon-directions
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-compass icons c-font-2xl c-d-block c-mt-4"></i>icon-compass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-layers icons c-font-2xl c-d-block c-mt-4"></i>icon-layers
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-menu icons c-font-2xl c-d-block c-mt-4"></i>icon-menu
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-list icons c-font-2xl c-d-block c-mt-4"></i>icon-list
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-options-vertical icons c-font-2xl c-d-block c-mt-4"></i>icon-options-vertical
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-options icons c-font-2xl c-d-block c-mt-4"></i>icon-options
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-down icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-left icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-right icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-up icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-up-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-left-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-right-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-down-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-check icons c-font-2xl c-d-block c-mt-4"></i>icon-check
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-clock icons c-font-2xl c-d-block c-mt-4"></i>icon-clock
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-plus icons c-font-2xl c-d-block c-mt-4"></i>icon-plus
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-close icons c-font-2xl c-d-block c-mt-4"></i>icon-close
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-trophy icons c-font-2xl c-d-block c-mt-4"></i>icon-trophy
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-smartphone icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-smartphone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-desktop icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-desktop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-plane
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-notebook icons c-font-2xl c-d-block c-mt-4"></i>icon-notebook
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-mustache icons c-font-2xl c-d-block c-mt-4"></i>icon-mustache
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-mouse icons c-font-2xl c-d-block c-mt-4"></i>icon-mouse
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnet icons c-font-2xl c-d-block c-mt-4"></i>icon-magnet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-energy icons c-font-2xl c-d-block c-mt-4"></i>icon-energy
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-disc icons c-font-2xl c-d-block c-mt-4"></i>icon-disc
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cursor icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cursor-move icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor-move
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-crop icons c-font-2xl c-d-block c-mt-4"></i>icon-crop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-chemistry icons c-font-2xl c-d-block c-mt-4"></i>icon-chemistry
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-speedometer icons c-font-2xl c-d-block c-mt-4"></i>icon-speedometer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-shield icons c-font-2xl c-d-block c-mt-4"></i>icon-shield
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-tablet icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-tablet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magic-wand icons c-font-2xl c-d-block c-mt-4"></i>icon-magic-wand
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-hourglass icons c-font-2xl c-d-block c-mt-4"></i>icon-hourglass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-graduation icons c-font-2xl c-d-block c-mt-4"></i>icon-graduation
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-ghost icons c-font-2xl c-d-block c-mt-4"></i>icon-ghost
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-game-controller icons c-font-2xl c-d-block c-mt-4"></i>icon-game-controller
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-fire icons c-font-2xl c-d-block c-mt-4"></i>icon-fire
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-eyeglass icons c-font-2xl c-d-block c-mt-4"></i>icon-eyeglass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope-open icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope-letter icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-letter
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bell icons c-font-2xl c-d-block c-mt-4"></i>icon-bell
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-badge icons c-font-2xl c-d-block c-mt-4"></i>icon-badge
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-anchor icons c-font-2xl c-d-block c-mt-4"></i>icon-anchor
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-wallet icons c-font-2xl c-d-block c-mt-4"></i>icon-wallet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-vector icons c-font-2xl c-d-block c-mt-4"></i>icon-vector
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-speech icons c-font-2xl c-d-block c-mt-4"></i>icon-speech
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-puzzle icons c-font-2xl c-d-block c-mt-4"></i>icon-puzzle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-printer icons c-font-2xl c-d-block c-mt-4"></i>icon-printer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-present icons c-font-2xl c-d-block c-mt-4"></i>icon-present
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-playlist icons c-font-2xl c-d-block c-mt-4"></i>icon-playlist
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-pin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-picture icons c-font-2xl c-d-block c-mt-4"></i>icon-picture
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-handbag icons c-font-2xl c-d-block c-mt-4"></i>icon-handbag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-globe-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-globe-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-globe icons c-font-2xl c-d-block c-mt-4"></i>icon-globe
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-folder-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-folder-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-folder icons c-font-2xl c-d-block c-mt-4"></i>icon-folder
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-film icons c-font-2xl c-d-block c-mt-4"></i>icon-film
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-feed icons c-font-2xl c-d-block c-mt-4"></i>icon-feed
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-drop icons c-font-2xl c-d-block c-mt-4"></i>icon-drop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-drawer icons c-font-2xl c-d-block c-mt-4"></i>icon-drawer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-docs icons c-font-2xl c-d-block c-mt-4"></i>icon-docs
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-doc icons c-font-2xl c-d-block c-mt-4"></i>icon-doc
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-diamond icons c-font-2xl c-d-block c-mt-4"></i>icon-diamond
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cup icons c-font-2xl c-d-block c-mt-4"></i>icon-cup
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-calculator icons c-font-2xl c-d-block c-mt-4"></i>icon-calculator
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bubbles icons c-font-2xl c-d-block c-mt-4"></i>icon-bubbles
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-briefcase icons c-font-2xl c-d-block c-mt-4"></i>icon-briefcase
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-book-open icons c-font-2xl c-d-block c-mt-4"></i>icon-book-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-basket-loaded icons c-font-2xl c-d-block c-mt-4"></i>icon-basket-loaded
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-basket icons c-font-2xl c-d-block c-mt-4"></i>icon-basket
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bag icons c-font-2xl c-d-block c-mt-4"></i>icon-bag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-action-undo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-undo
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-action-redo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-redo
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-wrench icons c-font-2xl c-d-block c-mt-4"></i>icon-wrench
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-umbrella icons c-font-2xl c-d-block c-mt-4"></i>icon-umbrella
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-trash icons c-font-2xl c-d-block c-mt-4"></i>icon-trash
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-tag icons c-font-2xl c-d-block c-mt-4"></i>icon-tag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-support icons c-font-2xl c-d-block c-mt-4"></i>icon-support
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-frame icons c-font-2xl c-d-block c-mt-4"></i>icon-frame
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-size-fullscreen icons c-font-2xl c-d-block c-mt-4"></i>icon-size-fullscreen
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-size-actual icons c-font-2xl c-d-block c-mt-4"></i>icon-size-actual
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-shuffle icons c-font-2xl c-d-block c-mt-4"></i>icon-shuffle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-share-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-share-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-share icons c-font-2xl c-d-block c-mt-4"></i>icon-share
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-rocket icons c-font-2xl c-d-block c-mt-4"></i>icon-rocket
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-question icons c-font-2xl c-d-block c-mt-4"></i>icon-question
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pie-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-pie-chart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pencil icons c-font-2xl c-d-block c-mt-4"></i>icon-pencil
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-note icons c-font-2xl c-d-block c-mt-4"></i>icon-note
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-loop icons c-font-2xl c-d-block c-mt-4"></i>icon-loop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-home icons c-font-2xl c-d-block c-mt-4"></i>icon-home
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-grid icons c-font-2xl c-d-block c-mt-4"></i>icon-grid
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-graph icons c-font-2xl c-d-block c-mt-4"></i>icon-graph
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-microphone icons c-font-2xl c-d-block c-mt-4"></i>icon-microphone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-music-tone-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-music-tone icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-earphones-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-earphones icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-equalizer icons c-font-2xl c-d-block c-mt-4"></i>icon-equalizer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-like icons c-font-2xl c-d-block c-mt-4"></i>icon-like
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-dislike icons c-font-2xl c-d-block c-mt-4"></i>icon-dislike
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-start icons c-font-2xl c-d-block c-mt-4"></i>icon-control-start
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-rewind icons c-font-2xl c-d-block c-mt-4"></i>icon-control-rewind
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-play icons c-font-2xl c-d-block c-mt-4"></i>icon-control-play
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-pause icons c-font-2xl c-d-block c-mt-4"></i>icon-control-pause
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-forward icons c-font-2xl c-d-block c-mt-4"></i>icon-control-forward
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-end icons c-font-2xl c-d-block c-mt-4"></i>icon-control-end
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-1 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-1
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-2 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-2
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-off icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-off
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-calendar icons c-font-2xl c-d-block c-mt-4"></i>icon-calendar
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bulb icons c-font-2xl c-d-block c-mt-4"></i>icon-bulb
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-chart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-ban icons c-font-2xl c-d-block c-mt-4"></i>icon-ban
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bubble icons c-font-2xl c-d-block c-mt-4"></i>icon-bubble
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-camrecorder icons c-font-2xl c-d-block c-mt-4"></i>icon-camrecorder
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-camera icons c-font-2xl c-d-block c-mt-4"></i>icon-camera
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cloud-download icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-download
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cloud-upload icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-upload
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-eye icons c-font-2xl c-d-block c-mt-4"></i>icon-eye
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-flag icons c-font-2xl c-d-block c-mt-4"></i>icon-flag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-heart icons c-font-2xl c-d-block c-mt-4"></i>icon-heart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-info icons c-font-2xl c-d-block c-mt-4"></i>icon-info
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-key icons c-font-2xl c-d-block c-mt-4"></i>icon-key
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-link icons c-font-2xl c-d-block c-mt-4"></i>icon-link
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-lock icons c-font-2xl c-d-block c-mt-4"></i>icon-lock
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-lock-open icons c-font-2xl c-d-block c-mt-4"></i>icon-lock-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier-add icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-add
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier-remove icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-remove
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paper-clip icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-clip
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paper-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-plane
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-power icons c-font-2xl c-d-block c-mt-4"></i>icon-power
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-refresh icons c-font-2xl c-d-block c-mt-4"></i>icon-refresh
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-reload icons c-font-2xl c-d-block c-mt-4"></i>icon-reload
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-settings icons c-font-2xl c-d-block c-mt-4"></i>icon-settings
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-star icons c-font-2xl c-d-block c-mt-4"></i>icon-star
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-symbol-female icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-female
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-symbol-male icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-male
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-target icons c-font-2xl c-d-block c-mt-4"></i>icon-target
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-credit-card icons c-font-2xl c-d-block c-mt-4"></i>icon-credit-card
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paypal icons c-font-2xl c-d-block c-mt-4"></i>icon-paypal
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-tumblr icons c-font-2xl c-d-block c-mt-4"></i>icon-social-tumblr
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-twitter icons c-font-2xl c-d-block c-mt-4"></i>icon-social-twitter
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-facebook icons c-font-2xl c-d-block c-mt-4"></i>icon-social-facebook
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-instagram icons c-font-2xl c-d-block c-mt-4"></i>icon-social-instagram
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-linkedin icons c-font-2xl c-d-block c-mt-4"></i>icon-social-linkedin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-pinterest icons c-font-2xl c-d-block c-mt-4"></i>icon-social-pinterest
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-github icons c-font-2xl c-d-block c-mt-4"></i>icon-social-github
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-gplus icons c-font-2xl c-d-block c-mt-4"></i>icon-social-gplus
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-reddit icons c-font-2xl c-d-block c-mt-4"></i>icon-social-reddit
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-skype icons c-font-2xl c-d-block c-mt-4"></i>icon-social-skype
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-dribbble icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dribbble
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-behance icons c-font-2xl c-d-block c-mt-4"></i>icon-social-behance
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-foursqare icons c-font-2xl c-d-block c-mt-4"></i>icon-social-foursqare
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-soundcloud icons c-font-2xl c-d-block c-mt-4"></i>icon-social-soundcloud
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-spotify icons c-font-2xl c-d-block c-mt-4"></i>icon-social-spotify
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-stumbleupon icons c-font-2xl c-d-block c-mt-4"></i>icon-social-stumbleupon
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-youtube icons c-font-2xl c-d-block c-mt-4"></i>icon-social-youtube
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-dropbox icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dropbox
-          </CCol>
-        </CRow>
-      </CCardBody>
-    </CCard>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'simple-line-icons'
-}
-</script>