refactor: CIcon: add title generating, styles, refactor functions

Author: woothu

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  rules: {
+    'vue/return-in-computed-property': 'off',
+    'no-undef': 'off'
+  }
+}

CIcon.vue

@@ -4,7 +4,7 @@
     xmlns="http://www.w3.org/2000/svg"
     :viewBox="viewBox"
     :class="computedClasses"
-    v-html="icon.svgContent"
+    v-html="titleCode + iconCode"
   ></svg>
   <img
     v-else
@@ -20,7 +20,10 @@ export default {
     content: [String, Array],
     size: {
       type: String,
-      validator: size => ['sm', 'lg', 'xl', 'custom-size'].includes(size)
+      validator: size => [
+        'custom-size', 'sm', 'lg', 'xl',
+        '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'
+      ].includes(size)
     },
     customClasses: [String, Array, Object],
     src: String
@@ -30,24 +33,24 @@ export default {
       const iconNameIsKebabCase = this.name && this.name.includes('-')
       return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
     },
+    titleCode () {
+      return this.iconName ? `<title>${this.iconName}</title>` : ''
+    },
     code () {
       if (this.content) {
         return this.content
       } else if (this.$root.$options.icons) {
         return this.$root.$options.icons[this.iconName]
       }
-      return undefined
     },
-    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 }
+    iconCode () {
+      return Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code
+    },
+    scale () {
+      return Array.isArray(this.code) && this.code.length > 1 ? this.code[0] : '64 64'
     },
     viewBox () {
-      return this.$attrs.viewBox || `0 0 ${ this.icon.coordinates }`
+      return this.$attrs.viewBox || `0 0 ${this.scale}`
     },
     computedSize () {
       return this.$attrs.width || this.$attrs.height ? 'custom-size' : this.size
@@ -66,3 +69,87 @@ export default {
   }
 }
 </script>
+
+<style>
+.c-icon {
+  display: inline-block;
+  color: inherit;
+  text-align: center;
+  fill: currentColor;
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+}
+
+.c-icon-2xl {
+  width: 2rem;
+  height: 2rem;
+  font-size: 2rem;
+}
+
+.c-icon-3xl {
+  width: 3rem;
+  height: 3rem;
+  font-size: 3rem;
+}
+
+.c-icon-4xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 4rem;
+}
+
+.c-icon-5xl {
+  width: 5rem;
+  height: 5rem;
+  font-size: 5rem;
+}
+
+.c-icon-6xl {
+  width: 6rem;
+  height: 6rem;
+  font-size: 6rem;
+}
+
+.c-icon-7xl {
+  width: 7rem;
+  height: 7rem;
+  font-size: 7rem;
+}
+
+.c-icon-8xl {
+  width: 8rem;
+  height: 8rem;
+  font-size: 8rem;
+}
+
+.c-icon-9xl {
+  width: 9rem;
+  height: 9rem;
+  font-size: 9rem;
+}
+
+.c-icon-xl {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
+.c-icon-lg {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.c-icon-sm {
+  width: 0.875rem;
+  height: 0.875rem;
+  font-size: 0.875rem;
+}
+
+.c-icon-c-s,
+.c-icon-custom-size {
+  width: initial !important;
+  height: initial !important;
+}
+</style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coreui-icons-vue",
-  "sideEffects": false,
   "version": "1.0.0-alpha.1",
+  "sideEffects": "CIcon.vue",
   "main": "dist/coreui-icons-vue.common.js",
   "types": "index.d.ts",
   "scripts": {

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  css: {
+    extract: false
+  }
+}