feat(icon): add internal and external library icon support

Author: codebender828

packages/c-icon/examples/with-icon-library.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <c-icon color="red.400" size="10" name="activity" />
+  </div>
+</template>
+
+<script lang="ts">
+import { CIcon } from '@chakra-ui/c-icon/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CIcon },
+})
+</script>

packages/c-icon/src/icon.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType, computed } from 'vue'
+import { h, defineComponent, PropType, computed, inject } from 'vue'
 import {
   chakra,
   DOMElements,
@@ -41,18 +41,24 @@ export const CIcon = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
+    const icons = inject<Record<string, any>>('$chakraIcons')
+    const icon = computed(() => icons?.[props?.name as string] || fallbackIcon)
     const vnodeProps = computed<StyleAndHTMLAttibutes>(() => ({
       w: props.size,
       h: props.size,
       display: 'inline-block',
       lineHeight: '1em',
       flexShrink: 0,
       color: 'currentColor',
-      innerHTML:
-        internalIcons[props?.name as string]?.path || fallbackIcon.path,
+      innerHTML: icon.value.path,
       viewBox: fallbackIcon.viewBox,
     }))
 
-    return () => h(chakra(props.as), { ...vnodeProps.value, ...attrs }, slots)
+    return () =>
+      h(
+        chakra(props.as),
+        { ...vnodeProps.value, ...(icon.value.attrs || {}), ...attrs },
+        slots
+      )
   },
 })

packages/c-icon/src/index.ts

@@ -1 +1,3 @@
 export * from './icon'
+export { default as internalIcons } from './icon.internals'
+export * from './icon.internals'

packages/core/package.json

@@ -23,7 +23,8 @@
     "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
-    "@chakra-ui/vue-theme": "^1.0.0",
-    "@chakra-ui/vue-utils": "^1.0.0"
+    "@chakra-ui/vue-theme": "*",
+    "@chakra-ui/vue-utils": "*",
+    "@chakra-ui/c-icon": "*"
   }
 }

packages/core/src/index.ts

@@ -1,6 +1,8 @@
 import { Plugin } from 'vue'
 import defaultTheme, { ColorMode } from '@chakra-ui/vue-theme'
+import { internalIcons } from '@chakra-ui/c-icon'
 import { extendTheme, ThemeOverride } from './extend-theme'
+import { MergedIcons, parseIcons } from './parse-icons'
 
 interface ExtendIconsPath {
   path: string
@@ -11,19 +13,36 @@ interface IconsOptions {
   library?: {}
   extend?: Record<string, ExtendIconsPath>
 }
-interface ChakraUIVuePluginOptions {
+export interface ChakraUIVuePluginOptions {
   extendTheme?: ThemeOverride
   icons?: IconsOptions
   defaultColorMode?: ColorMode
 }
 
 const ChakraUIVuePlugin: Plugin = {
   install(app, options: ChakraUIVuePluginOptions = {}) {
+    // Get theme value
     const theme = options.extendTheme || defaultTheme
+    let libraryIcons = options.icons?.library || {}
+
+    // Initialize colormode
     const colorMode = theme.config?.initialColorMode || 'light'
+
+    // Bind theme to application global properties and provide to application
     app.config.globalProperties.$chakraTheme = theme
     app.provide('$chakraTheme', theme as ThemeOverride)
+
+    // Provide initial colormode
     app.provide('$chakraColorMode', colorMode as ColorMode)
+
+    libraryIcons = parseIcons(libraryIcons)
+
+    // Merge internal icons and library icons
+    const mergedIcons: MergedIcons = {
+      ...internalIcons,
+      ...libraryIcons,
+    }
+    app.provide('$chakraIcons', mergedIcons)
   },
 }
 

packages/core/src/parse-icons.ts

@@ -0,0 +1,53 @@
+import { mergeWith } from '@chakra-ui/vue-utils'
+
+interface InternalIcon {
+  [key: string]:
+    | {
+        path: string
+        viewBox?: string
+        attrs?: string
+      }
+    | any
+}
+
+export type MergedIcons = {
+  [key in keyof InternalIcon]: InternalIcon
+}
+
+/**
+ * Currently the parseIcon function only supports icon parsing
+ * from the following libraries:
+ * - Feather icons: feathericons.com (feather-icons-paths)
+ * - FontAwesome: fontawesome.com (@fortawesome/free-solid-icons)
+ *
+ * The reason for this is that the above packages follow a given signature/convention.
+ * Any ideas around how to improve this are welcome. Please send in a PR or open an issue
+ */
+
+const parseIcon = (iconObject: any): InternalIcon => {
+  const { icon } = iconObject
+  if (icon) {
+    const [w, h, content, svg, path, , attrs] = icon
+    return {
+      [`${iconObject.iconName}`]: {
+        path: iconObject.prefix.startsWith('fa')
+          ? `<path d="${path}" fill="currentColor" />`
+          : iconObject.prefix.startsWith('fe')
+          ? content
+          : svg,
+        viewBox: `0 0 ${w} ${h}`,
+        attrs,
+      },
+    }
+  } else {
+    return {}
+  }
+}
+
+export const parseIcons = (iconSet = {}): MergedIcons => {
+  const result = Object.values(iconSet)
+    .map((value) => parseIcon(value))
+    .reduce((target, source) => mergeWith(target, source), {})
+
+  return result
+}

playground/src/.generated/imports.js

@@ -7,11 +7,12 @@ import Component_6 from '@chakra-ui/c-alert/examples/with-title.vue'
 import Component_7 from '@chakra-ui/c-button/examples/base-button.vue'
 import Component_8 from '@chakra-ui/c-icon/examples/base-icon.vue'
 import Component_9 from '@chakra-ui/c-icon/examples/with-color.vue'
-import Component_10 from '@chakra-ui/c-icon/examples/with-size.vue'
-import Component_11 from "../components/Home.vue";
+import Component_10 from '@chakra-ui/c-icon/examples/with-icon-library.vue'
+import Component_11 from '@chakra-ui/c-icon/examples/with-size.vue'
+import Component_12 from "../components/Home.vue";
 
 export default {
-  "../components/Home.vue": Component_11,
+  "../components/Home.vue": Component_12,
   "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
   "@chakra-ui/c-alert/examples/fix-hover.vue": Component_3,
   "@chakra-ui/c-alert/examples/with-accent.vue": Component_4,
@@ -20,5 +21,6 @@ export default {
   "@chakra-ui/c-button/examples/base-button.vue": Component_7,
   "@chakra-ui/c-icon/examples/base-icon.vue": Component_8,
   "@chakra-ui/c-icon/examples/with-color.vue": Component_9,
-  "@chakra-ui/c-icon/examples/with-size.vue": Component_10
+  "@chakra-ui/c-icon/examples/with-icon-library.vue": Component_10,
+  "@chakra-ui/c-icon/examples/with-size.vue": Component_11
 }

playground/src/.generated/routes.json

@@ -60,6 +60,11 @@
         "path": "/c-icon/with-color",
         "component": "@chakra-ui/c-icon/examples/with-color.vue"
       },
+      {
+        "name": "With icon library",
+        "path": "/c-icon/with-icon-library",
+        "component": "@chakra-ui/c-icon/examples/with-icon-library.vue"
+      },
       {
         "name": "With size",
         "path": "/c-icon/with-size",

playground/src/components/Sidebar.vue

@@ -46,7 +46,7 @@ export default Stories
 
 <style>
 .router-link-active {
-  color: #4299e1;
+  color: #4299e1 !important;
   font-weight: bold;
   text-decoration: underline;
 }

playground/src/index.d.ts

@@ -3,3 +3,5 @@ declare module '*.vue' {
   const component: Component
   export default component
 }
+
+declare module 'feather-icons-paths';