feat: add Font Awesome brand icons view

Author: woothu

src/_nav.js

@@ -157,19 +157,24 @@ export default {
       icon: 'cui-pie-chart'
     },
     {
-      name: 'CoreUI Icons',
+      name: 'Icons',
       url: '/icons',
       icon: 'cui-star',
       children: [
         {
-          name: 'Icons library',
+          name: 'CoreUI Icons',
           url: '/icons/coreui-icons',
           icon: 'cui-star',
           badge: {
             variant: 'info',
             text: 'NEW'
           }
         },
+        {
+          name: 'Brands',
+          url: '/icons/brands',
+          icon: 'cui-star'
+        },
         {
           name: 'Flags',
           url: '/icons/flags',

src/router/index.js

@@ -38,8 +38,9 @@ const Dropdowns = () => import('@/views/buttons/Dropdowns')
 const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
-const Flags = () => import('@/views/icons/Flags')
 const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
+const Brands = () => import('@/views/icons/Brands')
+const Flags = () => import('@/views/icons/Flags')
 
 // Views - Notifications
 const Alerts = () => import('@/views/notifications/Alerts')
@@ -256,6 +257,11 @@ export default new Router({
               name: 'Icons library',
               component: CoreUIIcons
             },
+            {
+              path: 'brands',
+              name: 'Brands',
+              component: Brands
+            },
             {
               path: 'flags',
               name: 'Flags',

src/views/icons/Brands.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="cui-globe"></i>Font Awesome brand icons
+      </CCardHeader>
+      <CCardBody>
+        <CRow class="c-text-center">
+          <CCol class="c-mb-5" col="12">
+            <!-- For using the flags inline with text add the classes
+            <code>.flag-icon</code> and <code>.flag-icon-xx</code>
+            (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
+            span. If you want to have a squared version flag then add the class
+            flag-icon-squared as well. -->
+          </CCol>
+          <template v-for="(brand, brandName) in $options.brands">
+            <CCol
+              class="c-mb-5"
+              col="3"
+              sm="2"
+              :key="key"
+            >
+              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <div>{{brandName}}</div>
+            </CCol>
+          </template>
+        </CRow>
+      </CCardBody>
+    </CCard>
+  </div>
+</template>
+
+<script>
+import { iconSet as brands } from '@coreui/icons/brands'
+export default {
+  name: 'Brands',
+  brands
+}
+</script>