fix: role generation

CHANGELOG.md

@@ -1,3 +1,6 @@
+3.5.1
+* Fix `role` generation.
+
 3.5.0
 * Add `title` prop support.
 * Update to `@fortawesome/fontawesome-free@5.8.0`.

README.md

@@ -242,7 +242,13 @@ Vue.component('v-icon', VueAwesome)
 
 * `label: string`
 
-  Set the `aria-label` for the icon if provided. Otherwise the icon will have `role="presentation"` thus not accessible.
+  Set the `aria-label` for the icon if provided.
+
+* `title: string`
+
+  Set the title for the icon.
+
+>  The icon will have `role="presentation"` thus not accessible when neither `label` nor `title` exists.
 
 ### Misc
 

README.zh_CN.md

@@ -241,7 +241,13 @@ Vue.component('v-icon', VueAwesome)
 
 * `label: string`
 
-  当指定时会设置图标的 `aria-label`。否则图标将会包含 `role="presentation"` 声明，无法从辅助设备访问。
+  当指定时会设置图标的 `aria-label`。
+
+* `title: string`
+
+  为图标设置标题。
+
+>  当 `label` 与 `title` 均不存在时，图标将会包含 `role="presentation"` 声明，无法从辅助设备访问。
 
 ### 其它
 
@@ -285,7 +291,7 @@ $ npm run dev
 
 ## 注册自定义图标
 
-### 简单情况
+### 简单场景
 
 可以用如下方式注册自定义图标：
 
@@ -301,7 +307,7 @@ Icon.register({
 })
 ```
 
-### 复杂一些的情况
+### 复杂一些的场景
 
 如果你的 SVG 文件有多个路径或多边形，以及/或者你想预定义一些样式，可以用如下方式进行注册：
 

build/icon.tpl

@@ -1,3 +1,3 @@
-import Icon from '../${namespace}components/Icon.vue'
+import Icon from '../${namespace}components/Icon'
 
 Icon.register(${icon})

demo/Demo.vue

@@ -80,7 +80,9 @@
   <h2>Stacked icons</h2>
   <p><small>Use stacked icons like in FontAwesome. Even more powerful.</small></p>
   <p>
-    <v-icon label="No Photo">
+    <v-icon
+      label="No Photo"
+    >
       <v-icon name="camera"/>
       <v-icon
         name="ban"
@@ -112,6 +114,43 @@
 </main>
 </template>
 
+<script>
+import VIcon from '../src/components/Icon.vue'
+import '../src/icons'
+const keys = Object.keys(VIcon.icons)
+
+function randomIcon () {
+  return keys[Math.floor(Math.random() * keys.length)]
+}
+
+export default {
+  components: {
+    VIcon
+  },
+  data () {
+    return {
+      logo: randomIcon(),
+      running: true
+    }
+  },
+  mounted () {
+    setInterval(() => {
+      if (this.running) {
+        this.change()
+      }
+    }, 200)
+  },
+  methods: {
+    change () {
+      this.logo = randomIcon()
+    },
+    toggle: function () {
+      this.running = !this.running
+    }
+  }
+}
+</script>
+
 <style>
 body {
   margin: 0;
@@ -284,40 +323,3 @@ footer a:hover {
   }
 }
 </style>
-
-<script>
-import VIcon from '../src/components/Icon.vue'
-import '../src/icons'
-const keys = Object.keys(VIcon.icons)
-
-function randomIcon () {
-  return keys[Math.floor(Math.random() * keys.length)]
-}
-
-export default {
-  components: {
-    VIcon
-  },
-  data () {
-    return {
-      logo: randomIcon(),
-      running: true
-    }
-  },
-  mounted () {
-    setInterval(() => {
-      if (this.running) {
-        this.change()
-      }
-    }, 200)
-  },
-  methods: {
-    change () {
-      this.logo = randomIcon()
-    },
-    toggle: function () {
-      this.running = !this.running
-    }
-  }
-}
-</script>