quasar 2.16.11 → 2.17.1

package/src/components/spinner/QSpinnerHearts.js

@@ -1,40 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('path', {
-    d: 'M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z',
-    'fill-opacity': '.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '0s',
-      dur: '1.4s',
-      values: '0.5;1;0.5',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('path', {
-    d: 'M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z',
-    'fill-opacity': '.5'
-  }, [
-    h('animate', {
-      attributeName: 'fill-opacity',
-      begin: '0.7s',
-      dur: '1.4s',
-      values: '0.5;1;0.5',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('path', {
-    d: 'M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z'
-  })
-]
+const innerHTML = '<path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"></path>'
 
 export default createComponent({
   name: 'QSpinnerHearts',
@@ -43,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 140 64',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerHourglass.js

@@ -1,98 +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', [
-    h('path', {
-      fill: 'none',
-      stroke: 'currentColor',
-      'stroke-width': '5',
-      'stroke-miterlimit': '10',
-      d: 'M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z'
-    }),
-    h('clipPath', {
-      id: 'uil-hourglass-clip1'
-    }, [
-      h('rect', {
-        x: '15',
-        y: '20',
-        width: '70',
-        height: '25'
-      }, [
-        h('animate', {
-          attributeName: 'height',
-          from: '25',
-          to: '0',
-          dur: '1s',
-          repeatCount: 'indefinite',
-          values: '25;0;0',
-          keyTimes: '0;0.5;1'
-        }),
-        h('animate', {
-          attributeName: 'y',
-          from: '20',
-          to: '45',
-          dur: '1s',
-          repeatCount: 'indefinite',
-          values: '20;45;45',
-          keyTimes: '0;0.5;1'
-        })
-      ])
-    ]),
-    h('clipPath', {
-      id: 'uil-hourglass-clip2'
-    }, [
-      h('rect', {
-        x: '15',
-        y: '55',
-        width: '70',
-        height: '25'
-      }, [
-        h('animate', {
-          attributeName: 'height',
-          from: '0',
-          to: '25',
-          dur: '1s',
-          repeatCount: 'indefinite',
-          values: '0;25;25',
-          keyTimes: '0;0.5;1'
-        }),
-        h('animate', {
-          attributeName: 'y',
-          from: '80',
-          to: '55',
-          dur: '1s',
-          repeatCount: 'indefinite',
-          values: '80;55;55',
-          keyTimes: '0;0.5;1'
-        })
-      ])
-    ]),
-    h('path', {
-      d: 'M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z',
-      'clip-path': 'url(#uil-hourglass-clip1)',
-      fill: 'currentColor'
-    }),
-    h('path', {
-      d: 'M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z',
-      'clip-path': 'url(#uil-hourglass-clip2)',
-      fill: 'currentColor'
-    }),
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '180 50 50',
-      repeatCount: 'indefinite',
-      dur: '1s',
-      values: '0 50 50;0 50 50;180 50 50',
-      keyTimes: '0;0.7;1'
-    })
-  ])
-]
+const innerHTML = '<g><path fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" values="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" values="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" values="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" values="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="currentColor"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="currentColor"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g>'
 
 export default createComponent({
   name: 'QSpinnerHourglass',
@@ -101,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/QSpinnerInfinity.js

@@ -1,29 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('path', {
-    d: 'M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z',
-    fill: 'none',
-    stroke: 'currentColor',
-    'stroke-width': '8',
-    'stroke-dasharray': '10.691205342610678 10.691205342610678',
-    'stroke-dashoffset': '0'
-  }, [
-    h('animate', {
-      attributeName: 'stroke-dashoffset',
-      from: '0',
-      to: '21.382410685221355',
-      begin: '0',
-      dur: '2s',
-      repeatCount: 'indefinite',
-      fill: 'freeze'
-    })
-  ])
-]
+const innerHTML = '<path d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="10.691205342610678 10.691205342610678" stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" from="0" to="21.382410685221355" begin="0" dur="2s" repeatCount="indefinite" fill="freeze"></animate></path>'
 
 export default createComponent({
   name: 'QSpinnerInfinity',
@@ -32,14 +12,13 @@ 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'
-    }, svg)
+      preserveAspectRatio: 'xMidYMid',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerIos.js

@@ -1,160 +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', {
-    'stroke-width': '4',
-    'stroke-linecap': 'round'
-  }, [
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(180)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(210)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(240)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(270)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(300)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(330)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(0)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(30)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(60)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(90)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(120)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('line', {
-      y1: '17',
-      y2: '29',
-      transform: 'translate(32,32) rotate(150)'
-    }, [
-      h('animate', {
-        attributeName: 'stroke-opacity',
-        dur: '750ms',
-        values: '1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g stroke-width="4" stroke-linecap="round"><line y1="17" y2="29" transform="translate(32,32) rotate(180)"><animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(210)"><animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(240)"><animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(270)"><animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(300)"><animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(330)"><animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(0)"><animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(30)"><animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(60)"><animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(90)"><animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(120)"><animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(150)"><animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate></line></g>'
 
 export default createComponent({
   name: 'QSpinnerIos',
@@ -163,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,
       stroke: 'currentColor',
       fill: 'currentColor',
-      viewBox: '0 0 64 64'
-    }, svg)
+      viewBox: '0 0 64 64',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerOrbit.js

@@ -1,37 +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: '50',
-    cy: '50',
-    r: '44',
-    fill: 'none',
-    'stroke-width': '4',
-    'stroke-opacity': '.5',
-    stroke: 'currentColor'
-  }),
-  h('circle', {
-    cx: '8',
-    cy: '54',
-    r: '6',
-    fill: 'currentColor',
-    'stroke-width': '3',
-    stroke: 'currentColor'
-  }, [
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 48',
-      to: '360 50 52',
-      dur: '2s',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<circle cx="50" cy="50" r="44" fill="none" stroke-width="4" stroke-opacity=".5" stroke="currentColor"></circle><circle cx="8" cy="54" r="6" fill="currentColor" stroke-width="3" stroke="currentColor"><animateTransform attributeName="transform" type="rotate" from="0 50 48" to="360 50 52" dur="2s" repeatCount="indefinite"></animateTransform></circle>'
 
 export default createComponent({
   name: 'QSpinnerOrbit',
@@ -40,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/QSpinnerOval.js

@@ -1,36 +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(1 1)',
-    'stroke-width': '2',
-    fill: 'none',
-    'fill-rule': 'evenodd'
-  }, [
-    h('circle', {
-      'stroke-opacity': '.5',
-      cx: '18',
-      cy: '18',
-      r: '18'
-    }),
-    h('path', {
-      d: 'M36 18c0-9.94-8.06-18-18-18'
-    }, [
-      h('animateTransform', {
-        attributeName: 'transform',
-        type: 'rotate',
-        from: '0 18 18',
-        to: '360 18 18',
-        dur: '1s',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"></animateTransform></path></g>'
 
 export default createComponent({
   name: 'QSpinnerOval',
@@ -39,15 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-    const svg = createSvg()
-
     return () => h('svg', {
       class: classes.value,
       stroke: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 38 38',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerPie.js

@@ -1,67 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const createSvg = () => [
-  h('path', {
-    d: 'M0 50A50 50 0 0 1 50 0L50 50L0 50',
-    fill: 'currentColor',
-    opacity: '0.5'
-  }, [
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '360 50 50',
-      dur: '0.8s',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('path', {
-    d: 'M50 0A50 50 0 0 1 100 50L50 50L50 0',
-    fill: 'currentColor',
-    opacity: '0.5'
-  }, [
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '360 50 50',
-      dur: '1.6s',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('path', {
-    d: 'M100 50A50 50 0 0 1 50 100L50 50L100 50',
-    fill: 'currentColor',
-    opacity: '0.5'
-  }, [
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '360 50 50',
-      dur: '2.4s',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('path', {
-    d: 'M50 100A50 50 0 0 1 0 50L50 50L50 100',
-    fill: 'currentColor',
-    opacity: '0.5'
-  }, [
-    h('animateTransform', {
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '360 50 50',
-      dur: '3.2s',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<path d="M0 50A50 50 0 0 1 50 0L50 50L0 50" fill="currentColor" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.8s" repeatCount="indefinite"></animateTransform></path><path d="M50 0A50 50 0 0 1 100 50L50 50L50 0" fill="currentColor" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.6s" repeatCount="indefinite"></animateTransform></path><path d="M100 50A50 50 0 0 1 50 100L50 50L100 50" fill="currentColor" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.4s" repeatCount="indefinite"></animateTransform></path><path d="M50 100A50 50 0 0 1 0 50L50 50L50 100" fill="currentColor" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3.2s" repeatCount="indefinite"></animateTransform></path>'
 
 export default createComponent({
   name: 'QSpinnerPie',
@@ -70,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
+    })
   }
 })