From 71b9cad7ee17089250035d490afd73e529bc3845 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 14 Jun 2019 10:51:08 +0200
Subject: [PATCH] feat: change CIcon component mechanism

---
 vue/CIcon.vue | 35 ++++++++++++++++++++++++-----------
 vue/index.js  |  6 ++----
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/vue/CIcon.vue b/vue/CIcon.vue
index 1a8f0ab52..78ef6cf7e 100644
--- a/vue/CIcon.vue
+++ b/vue/CIcon.vue
@@ -1,8 +1,9 @@
 <template>
   <svg
-    viewBox="0 0 64 64"
+    xmlns="http://www.w3.org/2000/svg"
+    :viewBox="viewBox"
     :style="style"
-    v-html="computedCode"
+    v-html="icon.svgContent"
   ></svg>
 </template>
 
@@ -13,11 +14,9 @@ export default {
   icons: {},
   props: {
     name: String,
-    content: String,
+    content: [String, Array],
     fill: String,
-    background: String,
-    // height: String,
-    // width: String
+    background: String
   },
   data () {
     return {
@@ -26,16 +25,31 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this.lineHeight = window.getComputedStyle(this.$el, null).getPropertyValue('line-height')
+      if (this.$el && this.code) {
+        const computedStyle = window.getComputedStyle(this.$el, null)
+        this.lineHeight = computedStyle.getPropertyValue('line-height')
+      }
     })
   },
   computed: {
     iconName () {
-      return this.name.includes('-') ? this.toCamelCase(this.name) : this.name
+      const iconNameIsKebabCase = this.name && this.name.includes('-')
+      return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
     },
-    computedCode () {
+    code () {
       return this.content || this.$options.icons[this.iconName]
     },
+    icon () {
+      if (Array.isArray(this.code)) {
+        const coordinates = this.code.length > 1 ? this.code[0] : '64 64'
+        const svgContent = this.code.length > 1 ? this.code[1] : this.code[0]
+        return { coordinates, svgContent }
+      }
+      return { coordinates: '64 64', svgContent: this.code }
+    },
+    viewBox () {
+      return this.$attrs.viewBox || `0 0 ${ this.icon.coordinates }`
+    },
     autoDimensions () {
       const noDimensions = !this.$attrs.height && !this.$attrs.width
       return noDimensions ? { height: this.lineHeight } : {}
@@ -45,8 +59,7 @@ export default {
         fill: this.fill || 'currentColor',
         background: this.background
       })
-    },
-
+    }
   },
   methods: {
     toCamelCase (str) {
diff --git a/vue/index.js b/vue/index.js
index ff290e64a..7403d7625 100644
--- a/vue/index.js
+++ b/vue/index.js
@@ -1,11 +1,9 @@
-import Icons from '../js'
 import CIcon from './CIcon'
-
 export { CIcon }
 
 const CIconPlugin = {
-  install (Vue) {
-    CIcon.icons = Icons
+  install (Vue, customIconSet) {
+    CIcon.icons = customIconSet
     Vue.component('CIcon', CIcon)
   }
 }