feat(QIcon): Enhance format for svg form (can add multiple paths, each with its own style and svg transform) quasarframework#6976

New format:

path@@style_attr@@transform_attr&&path@@style_attr@@transform_attr&&...|viewBox

 - A path is defined by: path@@style_attr@@transform_attr
     * style_attr is optional
     * transform_attr is optional
     * if no style_attr but you have a transform, still use the separator between path and style_attr
       (path@@@@transform_attr)
 - Supports multiple paths, separated by "&&"
 - viewBox is optional
 - Backward compatibility with the old format (path|viewBox)

Author: rstoenescu

ui/src/components/icon/QIcon.js

@@ -61,12 +61,22 @@ export default Vue.extend({
       }
 
       if (icon.startsWith('M') === true) {
-        const cfg = icon.split('|')
+        const [ def, viewBox ] = icon.split('|')
+
         return {
           svg: true,
           cls: this.classes,
-          path: cfg[0],
-          viewBox: cfg[1] !== void 0 ? cfg[1] : '0 0 24 24'
+          nodes: def.split('&&').map(path => {
+            const [ d, style, transform ] = path.split('@@')
+            return this.$createElement('path', {
+              attrs: {
+                d,
+                transform
+              },
+              style
+            })
+          }),
+          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
         }
       }
 
@@ -154,11 +164,7 @@ export default Vue.extend({
       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('svg', data, mergeSlot(this.type.nodes, this, 'default'))
     }
 
     return h(this.tag, data, mergeSlot([