Animated Icon

[Dani21]

Hello,

Is there any chance we can get an animated icon like the default Firefox refresh button offers? I've made animated SVG icons and tried modifying the extension accordingly, but the address bar doesn't seem to like my changes and is buggy (I believe related to both the "freeze" attribute and my JS). See the files below:

Animate to Stop:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path stroke="#6D6D6E" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <animate attributeName="d" from="M 15 2 l 0 5 l -5 0" to="M 14 7 l 0 0 l 0 0" dur="0.15" />
    <animate attributeName="stroke-width" values="2;1" dur="0.15" />
    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="40 8 8" dur="0.15" />
  </path>
  <circle fill="none" stroke-width="2" stroke-linecap="round" stroke-dasharray="41" cx="8" cy="8" r="6">
    <animateTransform attributeName="transform" type="rotate" from="-15 8 8" to="65 8 8" dur="0.3" />
    <animate attributeName="stroke" values="#6D6D6E;#6D6D6E;#6D6D6E00" dur="0.3" />
    <animate attributeName="stroke-dashoffset" values="-6;-20" dur="0.3" />
  </circle>
  <line stroke="#6D6D6E" stroke-width="2" stroke-linecap="round" stroke-dasharray="17" stroke-dashoffset="17" x1="2" y1="2" x2="14" y2="14">
    <animate attributeName="stroke-dashoffset" values="17;0" dur="0.15" begin="0.3" fill="freeze" />
  </line>
  <line stroke="#6D6D6E" stroke-width="2" stroke-linecap="round" stroke-dasharray="17" stroke-dashoffset="17" x1="2" y1="14" x2="14" y2="2">
    <animate attributeName="stroke-dashoffset" values="17;0" dur="0.15" begin="0.45" fill="freeze" />
  </line>
</svg>

Animate to Arrow:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <line stroke="#6D6D6E" stroke-width="2" stroke-linecap="round" stroke-dasharray="17" x1="2" y1="2" x2="14" y2="14">
    <animate attributeName="stroke-dashoffset" values="0;17" dur="0.15" fill="freeze" />
  </line>
  <line stroke="#6D6D6E" stroke-width="2" stroke-linecap="round" stroke-dasharray="17" x1="2" y1="14" x2="14" y2="2">
    <animate attributeName="stroke-dashoffset" values="0;17" dur="0.15" begin="0.15" fill="freeze" />
  </line>
  <path stroke="#6D6D6E" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <animate attributeName="d" from="M 14 7 l 0 0 l 0 0" to="M 15 2 l 0 5 l -5 0" dur="0.25" begin="0.35" fill="freeze" />
    <animate attributeName="stroke" values="#6D6D6E00;#6D6D6E;#6D6D6E" dur="0.25" begin="0.35" fill="freeze" />
    <animate attributeName="stroke-width" values="1;2" dur="0.25" begin="0.35" fill="freeze" />
    <animateTransform attributeName="transform" type="rotate" from="-120 8 8" to="0 8 8" dur="0.3" begin="0.3" fill="freeze" />
  </path>
  <circle fill="none" stroke-width="2" stroke-linecap="round" stroke-dasharray="41" cx="8" cy="8" r="6">
    <animate attributeName="stroke" values="#6D6D6E00;#6D6D6E;#6D6D6E" dur="0.3" begin="0.3" fill="freeze" />
    <animate attributeName="stroke-dashoffset" values="-10;-6" dur="0.3" begin="0.3" fill="freeze" />
    <animateTransform attributeName="transform" type="rotate" from="-135 8 8" to="-15 8 8" dur="0.3" begin="0.3" fill="freeze" />
  </circle>
</svg>