feat(QIcon): True SVG icon support quasarframework#6027

Author: rstoenescu

ui/src/components/icon/QIcon.js

@@ -49,6 +49,16 @@ export default Vue.extend({
         }
       }
 
+      if (icon.startsWith('M') === true) {
+        const [ path, viewBox ] = icon.split('|')
+        return {
+          svg: true,
+          cls: commonCls + ' q-svg-icon',
+          path,
+          viewBox
+        }
+      }
+
       if (icon.startsWith('img:') === true) {
         return {
           img: true,
@@ -119,11 +129,26 @@ export default Vue.extend({
       })
     }
 
-    return h('i', {
+    const data = {
       staticClass: this.type.cls,
       style: this.sizeStyle,
       on: this.$listeners,
       attrs: { 'aria-hidden': true }
-    }, mergeSlot([ this.type.content ], this, 'default'))
+    }
+
+    if (this.type.svg === true) {
+      data.attrs.focusable = 'false' /* needed for IE11 */
+      data.attrs.viewBox = this.type.viewBox
+
+      return h('svg', data, mergeSlot([
+        h('path', {
+          attrs: { d: this.type.path }
+        })
+      ], this, 'default'))
+    }
+
+    return h('i', data, mergeSlot([
+      this.type.content
+    ], this, 'default'))
   }
 })

ui/src/css/critical.sass

@@ -32,3 +32,8 @@
   align-items: center
   justify-content: center
   vertical-align: middle
+
+.q-svg-icon
+  vertical-align: text-bottom
+  path
+    fill: currentColor

ui/src/css/critical.styl

@@ -32,3 +32,8 @@
   align-items: center
   justify-content: center
   vertical-align: middle
+
+.q-svg-icon
+  vertical-align: text-bottom
+  path
+    fill: currentColor