feat: add title prop, change default title text generation

Author: woothu

src/CIcon.vue

@@ -26,15 +26,24 @@ export default {
       ].includes(size)
     },
     customClasses: [String, Array, Object],
-    src: String
+    src: String,
+    title: String
   },
   computed: {
     iconName () {
       const iconNameIsKebabCase = this.name && this.name.includes('-')
       return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
     },
+    titleString () {
+      if (this.title) {
+        return this.title
+      } else if (this.iconName) {
+        return this.generateTitle(this.iconName)
+      }
+      return 'icon'
+    },
     titleCode () {
-      return this.iconName ? `<title>${this.iconName}</title>` : ''
+      return `<title>${this.titleString}</title>`
     },
     code () {
       if (this.content) {
@@ -65,6 +74,16 @@ export default {
       return str.replace(/([-_][a-z0-9])/ig, ($1) => {
         return $1.toUpperCase().replace('-', '')
       })
+    },
+    generateTitle (title) {
+      return this.getValidTitle(title).replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    },
+    getValidTitle (title) {
+      if (['cil', 'cib', 'cif', 'cis'].includes(title.substring(0,3))) {
+        return title.slice(3)
+      } else {
+        return title.charAt(0).toUpperCase() + title.slice(1)
+      }
     }
   }
 }

src/CIconRaw.vue

@@ -26,15 +26,24 @@ export default {
       ].includes(size)
     },
     customClasses: [String, Array, Object],
-    src: String
+    src: String,
+    title: String
   },
   computed: {
     iconName () {
       const iconNameIsKebabCase = this.name && this.name.includes('-')
       return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
     },
+    titleString () {
+      if (this.title) {
+        return this.title
+      } else if (this.iconName) {
+        return this.generateTitle(this.iconName)
+      }
+      return 'icon'
+    },
     titleCode () {
-      return this.iconName ? `<title>${this.iconName}</title>` : ''
+      return `<title>${this.titleString}</title>`
     },
     code () {
       if (this.content) {
@@ -65,6 +74,16 @@ export default {
       return str.replace(/([-_][a-z0-9])/ig, ($1) => {
         return $1.toUpperCase().replace('-', '')
       })
+    },
+    generateTitle (title) {
+      return this.getValidTitle(title).replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    },
+    getValidTitle (title) {
+      if (['cil', 'cib', 'cif', 'cis'].includes(title.substring(0,3))) {
+        return title.slice(3)
+      } else {
+        return title.charAt(0).toUpperCase() + title.slice(1)
+      }
     }
   }
 }

src/index.d.ts

@@ -6,6 +6,7 @@ export declare class CIcon extends Vue {
   size: string
   customClasses: [string, Array<any>, object]
   src: string
+  title: string
 }
 
 export declare class CIconRaw extends CIcon {}