quasar 2.16.11 → 2.17.0

package/src/components/spinner/QSpinnerComment.js

@@ -1,70 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('rect', {
-    x: '0',
-    y: '0',
-    width: '100',
-    height: '100',
-    fill: 'none'
-  }),
-  h('path', {
-    d: 'M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z',
-    fill: 'currentColor'
-  }),
-  h('circle', {
-    cx: '30',
-    cy: '47',
-    r: '5',
-    fill: '#fff'
-  }, [
-    h('animate', {
-      attributeName: 'opacity',
-      from: '0',
-      to: '1',
-      values: '0;1;1',
-      keyTimes: '0;0.2;1',
-      dur: '1s',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '50',
-    cy: '47',
-    r: '5',
-    fill: '#fff'
-  }, [
-    h('animate', {
-      attributeName: 'opacity',
-      from: '0',
-      to: '1',
-      values: '0;0;1;1',
-      keyTimes: '0;0.2;0.4;1',
-      dur: '1s',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '70',
-    cy: '47',
-    r: '5',
-    fill: '#fff'
-  }, [
-    h('animate', {
-      attributeName: 'opacity',
-      from: '0',
-      to: '1',
-      values: '0;0;1;1',
-      keyTimes: '0;0.4;0.6;1',
-      dur: '1s',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<rect x="0" y="0" width="100" height="100" fill="none"></rect><path d="M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z" fill="currentColor"></path><circle cx="30" cy="47" r="5" fill="#fff"><animate attributeName="opacity" from="0" to="1" values="0;1;1" keyTimes="0;0.2;1" dur="1s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="47" r="5" fill="#fff"><animate attributeName="opacity" from="0" to="1" values="0;0;1;1" keyTimes="0;0.2;0.4;1" dur="1s" repeatCount="indefinite"></animate></circle><circle cx="70" cy="47" r="5" fill="#fff"><animate attributeName="opacity" from="0" to="1" values="0;0;1;1" keyTimes="0;0.4;0.6;1" dur="1s" repeatCount="indefinite"></animate></circle>'
 
 export default createComponent({
   name: 'QSpinnerComment',
@@ -73,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       xmlns: 'http://www.w3.org/2000/svg',
       viewBox: '0 0 100 100',
-      preserveAspectRatio: 'xMidYMid'
-    }, svg)
+      preserveAspectRatio: 'xMidYMid',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerCube.js

@@ -1,118 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('rect', {
-    x: '0',
-    y: '0',
-    width: '100',
-    height: '100',
-    fill: 'none'
-  }),
-  h('g', {
-    transform: 'translate(25 25)'
-  }, [
-    h('rect', {
-      x: '-20',
-      y: '-20',
-      width: '40',
-      height: '40',
-      fill: 'currentColor',
-      opacity: '0.9'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '1.5',
-        to: '1',
-        repeatCount: 'indefinite',
-        begin: '0s',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.2 0.8 0.2 0.8',
-        keyTimes: '0;1'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(75 25)'
-  }, [
-    h('rect', {
-      x: '-20',
-      y: '-20',
-      width: '40',
-      height: '40',
-      fill: 'currentColor',
-      opacity: '0.8'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '1.5',
-        to: '1',
-        repeatCount: 'indefinite',
-        begin: '0.1s',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.2 0.8 0.2 0.8',
-        keyTimes: '0;1'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(25 75)'
-  }, [
-    h('rect', {
-      x: '-20',
-      y: '-20',
-      width: '40',
-      height: '40',
-      fill: 'currentColor',
-      opacity: '0.7'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '1.5',
-        to: '1',
-        repeatCount: 'indefinite',
-        begin: '0.3s',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.2 0.8 0.2 0.8',
-        keyTimes: '0;1'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(75 75)'
-  }, [
-    h('rect', {
-      x: '-20',
-      y: '-20',
-      width: '40',
-      height: '40',
-      fill: 'currentColor',
-      opacity: '0.6'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '1.5',
-        to: '1',
-        repeatCount: 'indefinite',
-        begin: '0.2s',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.2 0.8 0.2 0.8',
-        keyTimes: '0;1'
-      })
-    ])
-  ])
-]
+const innerHTML = '<rect x="0" y="0" width="100" height="100" fill="none"></rect><g transform="translate(25 25)"><rect x="-20" y="-20" width="40" height="40" fill="currentColor" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="1.5" to="1" repeatCount="indefinite" begin="0s" dur="1s" calcMode="spline" keySplines="0.2 0.8 0.2 0.8" keyTimes="0;1"></animateTransform></rect></g><g transform="translate(75 25)"><rect x="-20" y="-20" width="40" height="40" fill="currentColor" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="1.5" to="1" repeatCount="indefinite" begin="0.1s" dur="1s" calcMode="spline" keySplines="0.2 0.8 0.2 0.8" keyTimes="0;1"></animateTransform></rect></g><g transform="translate(25 75)"><rect x="-20" y="-20" width="40" height="40" fill="currentColor" opacity="0.7"><animateTransform attributeName="transform" type="scale" from="1.5" to="1" repeatCount="indefinite" begin="0.3s" dur="1s" calcMode="spline" keySplines="0.2 0.8 0.2 0.8" keyTimes="0;1"></animateTransform></rect></g><g transform="translate(75 75)"><rect x="-20" y="-20" width="40" height="40" fill="currentColor" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="1.5" to="1" repeatCount="indefinite" begin="0.2s" dur="1s" calcMode="spline" keySplines="0.2 0.8 0.2 0.8" keyTimes="0;1"></animateTransform></rect></g>'
 
 export default createComponent({
   name: 'QSpinnerCube',
@@ -121,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       xmlns: 'http://www.w3.org/2000/svg',
       viewBox: '0 0 100 100',
-      preserveAspectRatio: 'xMidYMid'
-    }, svg)
+      preserveAspectRatio: 'xMidYMid',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerDots.js

@@ -1,90 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('circle', {
-    cx: '15',
-    cy: '15',
-    r: '15'
-  }, [
-    h('animate', {
-      attributeName: 'r',
-      from: '15',
-      to: '15',
-      begin: '0s',
-      dur: '0.8s',
-      values: '15;9;15',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'fill-opacity',
-      from: '1',
-      to: '1',
-      begin: '0s',
-      dur: '0.8s',
-      values: '1;.5;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '60',
-    cy: '15',
-    r: '9',
-    'fill-opacity': '.3'
-  }, [
-    h('animate', {
-      attributeName: 'r',
-      from: '9',
-      to: '9',
-      begin: '0s',
-      dur: '0.8s',
-      values: '9;15;9',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'fill-opacity',
-      from: '.5',
-      to: '.5',
-      begin: '0s',
-      dur: '0.8s',
-      values: '.5;1;.5',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '105',
-    cy: '15',
-    r: '15'
-  }, [
-    h('animate', {
-      attributeName: 'r',
-      from: '15',
-      to: '15',
-      begin: '0s',
-      dur: '0.8s',
-      values: '15;9;15',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'fill-opacity',
-      from: '1',
-      to: '1',
-      begin: '0s',
-      dur: '0.8s',
-      values: '1;.5;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity=".3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from=".5" to=".5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle>'
 
 export default createComponent({
   name: 'QSpinnerDots',
@@ -93,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       fill: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 120 30',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerFacebook.js

@@ -1,89 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('g', {
-    transform: 'translate(20 50)'
-  }, [
-    h('rect', {
-      x: '-10',
-      y: '-30',
-      width: '20',
-      height: '60',
-      fill: 'currentColor',
-      opacity: '0.6'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '2',
-        to: '1',
-        begin: '0s',
-        repeatCount: 'indefinite',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.1 0.9 0.4 1',
-        keyTimes: '0;1',
-        values: '2;1'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(50 50)'
-  }, [
-    h('rect', {
-      x: '-10',
-      y: '-30',
-      width: '20',
-      height: '60',
-      fill: 'currentColor',
-      opacity: '0.8'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '2',
-        to: '1',
-        begin: '0.1s',
-        repeatCount: 'indefinite',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.1 0.9 0.4 1',
-        keyTimes: '0;1',
-        values: '2;1'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(80 50)'
-  }, [
-    h('rect', {
-      x: '-10',
-      y: '-30',
-      width: '20',
-      height: '60',
-      fill: 'currentColor',
-      opacity: '0.9'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'scale',
-        from: '2',
-        to: '1',
-        begin: '0.2s',
-        repeatCount: 'indefinite',
-        dur: '1s',
-        calcMode: 'spline',
-        keySplines: '0.1 0.9 0.4 1',
-        keyTimes: '0;1',
-        values: '2;1'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="translate(20 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(50 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.1s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(80 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.2s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g>'
 
 export default createComponent({
   name: 'QSpinnerFacebook',
@@ -92,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 100 100',
       xmlns: 'http://www.w3.org/2000/svg',
-      preserveAspectRatio: 'xMidYMid'
-    }, svg)
+      preserveAspectRatio: 'xMidYMid',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerGears.js

@@ -1,45 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('g', {
-    transform: 'translate(-20,-20)'
-  }, [
-    h('path', {
-      d: 'M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z',
-      fill: 'currentColor'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'rotate',
-        from: '90 50 50',
-        to: '0 50 50',
-        dur: '1s',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ]),
-  h('g', {
-    transform: 'translate(20,20) rotate(15 50 50)'
-  }, [
-    h('path', {
-      d: 'M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z',
-      fill: 'currentColor'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'rotate',
-        from: '0 50 50',
-        to: '90 50 50',
-        dur: '1s',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="translate(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g>'
 
 export default createComponent({
   name: 'QSpinnerGears',
@@ -48,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 100 100',
       preserveAspectRatio: 'xMidYMid',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerGrid.js

@@ -1,138 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('circle', {
-    cx: '12.5',
-    cy: '12.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '0s',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '12.5',
-    cy: '52.5',
-    r: '12.5',
-    'fill-opacity': '.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '100ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '52.5',
-    cy: '12.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '300ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '52.5',
-    cy: '52.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '600ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '92.5',
-    cy: '12.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '800ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '92.5',
-    cy: '52.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '400ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '12.5',
-    cy: '92.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '700ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '52.5',
-    cy: '92.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '500ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('circle', {
-    cx: '92.5',
-    cy: '92.5',
-    r: '12.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '200ms',
-      dur: '1s',
-      values: '1;.2;1',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle>'
 
 export default createComponent({
   name: 'QSpinnerGrid',
@@ -141,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       fill: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 105 105',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })