feat(icon): added icon component

feat(icon): can use internal icons API
feat(icon): can extend internal icons with custom icons
feat(icon): can register icons from font-awesome

Author: codebender828

babel.config.js

@@ -4,9 +4,6 @@ module.exports = {
     '@babel/preset-env'
   ],
   env: {
-    development: {
-      plugins: ['transform-es2015-modules-commonjs']
-    },
     test: {
       plugins: ['transform-es2015-modules-commonjs']
     }

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.6.3",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@vue/composition-api": "^0.3.2",
     "color": "^3.1.2",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <theme-provider :theme="theme">
+  <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
       <Icon
         name="star"
@@ -10,13 +10,22 @@
         name="email"
         color="teal.600"
         size="8"
-        mr="3"
       />
       <Icon
         name="phone"
         color="indigo.400"
         size="10"
       />
+      <Icon
+        name="ambulance"
+        color="indigo.400"
+        size="10"
+      />
+      <Icon
+        name="not-allowed"
+        color="teal.600"
+        size="12"
+      />
     </div>
   </theme-provider>
 </template>
@@ -47,6 +56,11 @@ export default {
     alert () {
       console.log('button clicked')
     }
+  },
+  computed: {
+    iconPack () {
+      return this.$kiwi.iconPack
+    }
   }
 }
 </script>

src/components/Icon/Search.vue

@@ -24,12 +24,3 @@ export const iconStyles = (props) => {
     ...sizeProps(props)
   }
 }
-
-/**
- * @description Get reference to an Icon component if Font Awesome or MDI is used
- * @param {String} name - Name of the registered icon.
- * @returns {Object} Icon Component
- */
-export const getIconComponent = (name) => {
-
-}

src/components/Icon/icon.utils.js

@@ -1,4 +1,3 @@
-// import styled from 'vue-styled-components'
 import { Box } from '../../lib/core/'
 import iconPaths from '../../lib/plugin/iconsPaths'
 import { forwardProps } from '../../lib/utils'
@@ -7,31 +6,12 @@ import { baseProps } from '../../lib/config/props'
 
 const fallbackIcon = iconPaths['question-outline']
 
-/**
- * Features:
- * 1) Register custom icons
- * 2) Support Font Awesome icons.
- * 3) Support MD icons.
- *
- * CUSTOM ICONS:
- * - All icons exist as object.
- * - Load them in at project build time
- * - Should be extendable by users.
- * - If "name" prop is provided, search icons config for icon.
- *
- * SUPPORT FONTAWESOME/MDI
- * - Provide Object/Array of Fontawesome components
- * - Iterate over array of components to globally register sprites as components
- * - Accept "use" prop to calculate reference to globally registered component and feed it to Box component
- * - ^^ Use "as" prop to render component passed.
- */
-
 /**
  * The Icon component renders SVGs for visual aid
  */
 export default {
   name: 'Icon',
-  inject: ['$theme', '$colorMode'],
+  inject: ['$theme', '$icons'],
   props: {
     name: {
       type: [String, Array]
@@ -59,9 +39,7 @@ export default {
   render (h) {
     let icon, viewBox
     if (this.name) {
-      icon = iconPaths[this.name]
-    } else if (this.use) {
-      // icon =
+      icon = this.$icons[this.name]
     } else {
       console.warn(`[KiwiIcon]: You need to provide the "name" or "use" prop to for the Icon component`)
     }

src/components/Icon/index.js

@@ -11,12 +11,17 @@ const ThemeProvider = {
     colorMode: {
       type: String,
       default: 'light'
+    },
+    icons: {
+      type: Object,
+      required: false
     }
   },
   provide () {
     return {
       $theme: () => this.theme,
-      $colorMode: this.colorMode
+      $colorMode: this.colorMode,
+      $icons: this.icons
     }
   },
   render: function () {

src/components/ThemeProvider/index.js

@@ -1,27 +1,29 @@
-import Theme from '../../../kiwi.config'
+import { parsePackIcons } from '../utils/icons'
+import internalIcons from '../../lib/plugin/iconsPaths'
 
+/**
+ * Kiwi Component library plugin
+ */
 const Kiwi = {
   install (Vue, options = {}) {
-    // Create Kiwi instance and initialize theme
-    const theme = {
-      ...Theme,
-      ...options.theme
-    }
+    let packIcons = {}
+    const extendedIcons = options.icons.extend || {}
 
-    Vue.prototype.$kiwi = {
-      theme
+    if (options.icons.iconPack) {
+      packIcons = parsePackIcons(options.icons.iconPack, options.icons.iconSet)
     }
 
-    // TODO:
-    // - Make theme observable and use styled components to set theme dynamically
+    const icons = {
+      ...internalIcons,
+      ...packIcons,
+      ...extendedIcons
+    }
 
-    // Provide Theme via global mixin.
-    // Vue.mixin({
-    //   provide: {
-    //     theme,
-    //     colorMode: 'light'
-    //   }
-    // })
+    // Bind theme and icons to prototype
+    Vue.prototype.$kiwi = {
+      theme: options.theme,
+      icons
+    }
   }
 }
 

src/lib/plugin/index.js

@@ -0,0 +1,31 @@
+import merge from 'lodash-es/merge'
+
+const parseFAIcons = (iconSet) => {
+  const parseFAIcon = (iconObject) => {
+    const { icon } = iconObject
+    return {
+      [`${iconObject.iconName}`]: {
+        path: `<path d="${icon[4]}" fa-key="${3}" fill="currentColor" />`,
+        viewBox: `0 0 ${icon[0]} ${icon[1]}`
+      }
+    }
+  }
+
+  const result = Object.values(iconSet)
+    .map(value => parseFAIcon(value))
+    .reduce((target, source) => merge(target, source), {})
+
+  console.log({ result })
+  return result
+}
+
+/**
+ * @description Parse Icon packs
+ * @param {String} pack Icon pack name
+ * @param {Object} iconSet Registered Icon set
+ * @returns {Object} Parsed pack icons object
+ */
+export const parsePackIcons = (pack, iconSet) => {
+  const packIcons = pack === 'fa' ? parseFAIcons(iconSet) : {}
+  return packIcons
+}

src/lib/utils/icons.js

@@ -3,3 +3,4 @@ export { provideTheme } from './provide-theme'
 export { transformAlias as tx } from './transform'
 export { pickProperty as forwardProps, filterPseudo } from './object'
 export { addOpacity } from './color'
+export { parsePackIcons } from './icons'

src/lib/utils/index.js

@@ -4,26 +4,42 @@ import App from './App.vue'
 import './registerServiceWorker'
 import Kiwi from './lib/plugin'
 
-Vue.config.productionTip = false
+// Import FA Icons
+import { faCoffee,
+  faAmbulance,
+  faCalendar,
+  faCar,
+  faBraille,
+  faCaretLeft } from '@fortawesome/free-solid-svg-icons'
 
+Vue.config.productionTip = false
 Vue.use(VueCompositionApi)
 
 // Install Kiwi plugin
 Vue.use(Kiwi, {
-  theme: {
-    primary: 'hsl(209, 100%, 50%)',
-    secondary: 'hsl(278, 100%, 69%)',
-    success: 'hsl(160, 100%, 43%)',
-    warning: 'hsl(40, 100%, 50%)',
-    danger: 'hsl(350, 100%, 56%)',
-    light: 'hsl(208, 100%, 94%)',
-    dark: 'hsl(221, 15%, 29%)'
+  icons: {
+    iconPack: 'fa',
+    iconSet: {
+      faCalendar,
+      faCar,
+      faCoffee,
+      faBraille,
+      faAmbulance,
+      faCaretLeft
+    },
+    extend: {
+      'not-allowed': {
+        path: `
+          <path
+            fill="currentColor"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
+          />
+        `
+      }
+    }
   }
 })
 
 new Vue({
-  // Alternative way to provide theme would be to import { provideTheme } from utils and provide it with render function
-  // Provide theme to the root of the application
-  // render: h => provideTheme(h, App)
   render: h => h(App)
 }).$mount('#app')

src/main.js

@@ -1142,6 +1142,18 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
+"@fortawesome/fontawesome-common-types@^0.2.25":
+  version "0.2.25"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
+  integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
+
+"@fortawesome/free-solid-svg-icons@^5.11.2":
+  version "5.11.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz#2f2f1459743a27902b76655a0d0bc5ec4d945631"
+  integrity sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
 "@hapi/[email protected]":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.1.tgz#61395b5ed94c4cb19c2dc4c85969cff3d40d583f"