Quasar QIcon inline svg

by Zireael

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="app">
  <div style="display: inline-block;">
    <q-icon :name="quasar" style="font-size: 6.4em;" id="quasar-logo" />
  </div>
  <div style="display: inline-block;">
    <q-icon :name="girlColored" style="font-size: 4.4em;" />
  </div>
  <div style="display:block">
    <label>Type in color name to change face:<br><input outlined v-model="colorFace"  style="block"/></label><br>
    <label>Hair color (50% opacity):<br><input outlined v-model="colorHair" style="display:block"/></label><br>

  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  width: 100%;
  height: 220px;
}

#quasar-logo {
  -webkit-animation-name: ckw;
  animation-name: ckw;
  -webkit-animation-duration: 15.5s;
  animation-duration: 15.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes ckw {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ckw {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

input {
  background-color: #eee;
}

Vue

new Vue({
  el: "#app",
  data: {
quasar:
        'img:data:image/svg+xml;charset=utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 43.4 43.4" style="enable-background:new 0 0 43.4 43.4;" xml:space="preserve"> <g id="g4" transform="matrix(0.01712,0,0,0.01712,-116.963,48.724999)"> <path id="path8" style="fill:%23263238;" d="M8306.9-1579.1"/>	<path id="path10" style="fill:%2342A5F5;" d="M9019.8-2110.5"/> <g id="g8856-6" transform="matrix(1.0887031,0,0,1.0887031,-870.07715,252.64209)">	<circle id="circle8858-1" style="fill:%23FFFFFF;" cx="8238.4" cy="-1682.4" r="1163.9"/>	<path id="path8860-5" style="fill:%23263238;" d="M8428.9-1682.4c0,105.2-85.2,190.4-190.4,190.4h0c-105.2,0-190.4-85.3-190.4-190.4	c0,0,0,0,0,0c0-105.2,85.3-190.4,190.4-190.4C8343.6-1872.8,8428.9-1787.6,8428.9-1682.4z"/>	<path id="path8862-5" style="fill:%231976D2;" d="M9083.7-2170.5c-41.4-71.2-91.7-136.9-149.6-195.5L8714-2238.9	c-68.6-58.6-146.6-103.5-229.8-133.2c-75.2,76.2-134.9,161.3-177.9,253.8c245-16.7,498.1,72,733,255.6l138.5-80	C9156.2-2022.3,9124.6-2098.8,9083.7-2170.5L9083.7-2170.5z"/>	<path id="path8864-4" style="fill:%2342A5F5;" d="M9083.7-1194.4c41-71.5,72.8-147.9,94.6-227.3l-220.1-127.1	c16.5-88.7,16.3-178.7,0.4-265.6c-103.5-27-207.1-36.2-308.8-27.1c137,203.9,186.7,467.4,145.2,762.6l138.5,80	C8991.7-1057.6,9042.2-1123.2,9083.7-1194.4z"/> <path id="path8866-7" style="fill:%231976D2;" d="M8238.5-706.4c82.4-0.2,164.4-10.9,244.1-31.8v-254.2	c85.1-30.1,162.9-75.2,230.3-132.4c-28.4-103.2-72.2-197.4-130.9-281c-108.1,220.5-311.4,395.4-587.8,507.1v160	C8073.9-717.6,8156-706.8,8238.5-706.4z"/>	<path id="path8868-6" style="fill:%2342A5F5;" d="M7393.2-1194.3c41.4,71.2,91.7,136.9,149.6,195.5l220.1-127.1	c68.6,58.6,146.6,103.5,229.8,133.2c75.2-76.2,134.9-161.3,177.9-253.8c-245,16.7-498.1-72-733-255.6l-138.5,80	C7320.7-1342.5,7352.3-1266,7393.2-1194.3z"/>	<path...