Implement icon component (tabler#34)

* add icon component

* replace raw i tag usage with icon component

Author: isneezy

example/src/components/HomePage.vue

@@ -24,28 +24,28 @@
                 <table-cel>Ronald Bardley</table-cel>
                 <table-cel>Initial commit</table-cel>
                 <table-cel class="text-norwap">May 6, 2018</table-cel>
-                <table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
+                <table-cel class="w-1"><a href="#" class="icon"><icon icon="trash"/></a></table-cel>
               </table-row>
               <table-row>
                 <table-cel class="w-1"><avatar image-url="/static/demo/faces/female/1.jpg"/></table-cel>
                 <table-cel>Beverly Armstrong</table-cel>
                 <table-cel>Left sidebar adjustments</table-cel>
                 <table-cel class="text-norwap">Apirl 15, 2018</table-cel>
-                <table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
+                <table-cel class="w-1"><a href="#" class="icon"><icon icon="trash"/></a></table-cel>
               </table-row>
               <table-row>
                 <table-cel class="w-1"><avatar image-url="/static/demo/faces/male/4.jpg"/></table-cel>
                 <table-cel>Boddy Knight</table-cel>
                 <table-cel>Topbar dropdown style</table-cel>
                 <table-cel class="text-norwap">Apirl 8, 2018</table-cel>
-                <table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
+                <table-cel class="w-1"><a href="#" class="icon"><icon icon="trash"/></a></table-cel>
               </table-row>
               <table-row>
                 <table-cel class="w-1"><avatar image-url="/static/demo/faces/female/11.jpg"/></table-cel>
                 <table-cel>Sharon Wells</table-cel>
                 <table-cel>Fixes #625</table-cel>
                 <table-cel class="text-norwap">Apirl 9, 2018</table-cel>
-                <table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
+                <table-cel class="w-1"><a href="#" class="icon"><icon icon="trash"/></a></table-cel>
               </table-row>
             </table-body>
           </t-table>

src/components/Dropdown/DropdownMenuItem.vue

@@ -2,15 +2,18 @@
     <a href="#" class="dropdown-item">
         <slot>
             <span v-if="!!badge" class="float-right"><span :class="`badge badge-${type}`">{{ badge }}</span></span>
-            <i v-if="!!icon" :class="`${iconPrefix} ${iconPrefix}-${icon}`" class="dropdown-icon"></i>
+            <icon v-if="!!icon" :icon="icon" :prefix="iconPrefix" class="dropdown-icon"/>
             {{ label }}
         </slot>
     </a>
 </template>
 
 <script>
+    import Icon from '../Icon'
+
     export default {
-        name: "dropdown-menu-item",
+      components: {Icon},
+      name: "dropdown-menu-item",
         props: {
             icon: {default: false},
             iconPrefix: {default: 'fe'},

src/components/Icon.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'icon',
+  props: {
+    icon: {required: true, type: String},
+    prefix: {default: 'fe', type: String}
+  },
+  template: `<i :class="className"></i>`,
+  computed: {
+    className () {
+      const className = {}
+      className[`${this.prefix}`] = true
+      className[`${this.prefix}-${this.icon}`] = true
+      return className
+    }
+  }
+}

src/components/Nav/NavItem.vue

@@ -1,6 +1,9 @@
 <template>
     <tag-wrapper :tag="tag" class="nav-item">
-        <a v-click-out-side="hideDropdown" @click="onClick" :class="className"><i v-if="icon" :class="iconClassName"></i> {{ label }}</a>
+        <a v-click-out-side="hideDropdown" @click="onClick" :class="className">
+            <icon v-if="icon" :icon="icon" :prefix="iconPrefix"/>
+            {{ label }}
+        </a>
         <dropdown-menu :show="dropdownVisible">
             <slot></slot>
         </dropdown-menu>

src/components/StampCard.vue

@@ -2,7 +2,7 @@
     <card class="p-3">
         <div class="d-flex align-items-center">
                     <span class="stamp stamp-md mr-3" :class="stampClassName">
-                      <i :class="`fe fe-${icon}`"></i>
+                      <icon :icon="icon"/>
                     </span>
             <div>
                 <h4 class="m-0"><slot>{{ header }}</slot></h4>
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+    import Icon from './Icon'
     import Card from './Card/Card'
     export default {
         name: "stamp-card",
@@ -29,7 +30,12 @@
                 className[`bg-${this.color}`] = true
                 return className
             }
-        }
+        },
+
+      components: {
+            Card,
+            Icon
+      }
     }
 </script>
 

src/components/index.js

@@ -6,6 +6,7 @@ import * as Card from './Card'
 import Container from './Container'
 import * as Dropdown from './Dropdown'
 import * as Grid from './Grid/index'
+import Icon from './Icon'
 import * as Nav from './Nav'
 import Notifications from './Notifications'
 import * as Page from './Page'
@@ -25,6 +26,7 @@ export const components = {
     Container,
     ...Dropdown,
     ...Grid,
+    Icon,
     ...Nav,
     Notifications,
     ...Page,