FUNCT Add custom icons with animation

1 files changed, 308 insertions, 0 deletions

diff --git a/src/images/icons/mixer_inactive.svg b/src/images/icons/mixer_inactive.svg
new file mode 100644
index 0000000..32e69f0
--- /dev/null
+++ b/src/images/icons/mixer_inactive.svg
@@ -0,0 +1,308 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Mixer_Inactive"
+   x="0px"
+   y="0px"
+   viewBox="0 0 300 300"
+   style="enable-background:new 0 0 300 300;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mixer_inactive.svg"><metadata
+     id="metadata5955"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs5953" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1218"
+     inkscape:window-height="723"
+     id="namedview5951"
+     showgrid="false"
+     inkscape:zoom="0.78666667"
+     inkscape:cx="-90.254237"
+     inkscape:cy="150"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Mixer_Inactive" /><style
+     type="text/css"
+     id="style5851">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Regular';}
+	.st2{font-size:25px;}
+	.st3{letter-spacing:6;}
+	.st4{fill:url(#SVGID_1_);}
+	.st5{fill:url(#SVGID_2_);}
+	.st6{fill:url(#SVGID_3_);}
+	.st7{fill:url(#SVGID_4_);}
+	.st8{fill:url(#SVGID_5_);}
+	.st9{fill:url(#SVGID_6_);}
+	.st10{fill:url(#SVGID_7_);}
+	.st11{fill:url(#SVGID_8_);}
+	.st12{fill:url(#SVGID_9_);}
+	.st13{fill:url(#SVGID_10_);}
+	.st14{fill:url(#SVGID_11_);}
+	.st15{fill:url(#SVGID_12_);}
+	.st16{fill:url(#SVGID_13_);}
+</style><switch
+     id="switch5853"
+     transform="matrix(1.3307804,0,0,1.3314313,-62.924861,-27.945794)"><g
+       i:extraneous="self"
+       id="g5855"><g
+         id="g5857"><linearGradient
+           id="SVGID_1_"
+           gradientUnits="userSpaceOnUse"
+           x1="113.6835"
+           y1="245.222"
+           x2="205.1835"
+           y2="41.222"
+           gradientTransform="matrix(1,0.00546456,-0.00546456,1,-2.0192,-3.0212)"><stop
+             offset="0"
+             style="stop-color:#00ADDC"
+             id="stop5860" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop5862" /></linearGradient><path
+           class="st4"
+           d="m 160,238.8 c -0.2,0 -0.4,0 -0.6,0 C 101.4,238.5 54.5,191.1 54.8,133.1 55.2,75.3 102.3,28.5 160,28.5 c 0.2,0 0.4,0 0.6,0 58,0.3 104.9,47.7 104.6,105.7 l 0,0 C 264.8,192 217.7,238.8 160,238.8 Z m 0,-206.6 c -55.7,0 -101.2,45.2 -101.5,100.9 -0.3,55.9 45,101.7 100.9,102 0.2,0 0.4,0 0.6,0 55.7,0 101.2,-45.2 101.5,-100.9 0.3,-55.9 -45,-101.7 -100.9,-102 -0.2,0 -0.4,0 -0.6,0 z"
+           id="path5864"
+           style="fill:url(#SVGID_1_)"
+           inkscape:connector-curvature="0" /><g
+           id="mixer_2_"><linearGradient
+             id="SVGID_2_"
+             gradientUnits="userSpaceOnUse"
+             x1="63.2808"
+             y1="222.6149"
+             x2="154.78081"
+             y2="18.614901"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5868" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5870" /></linearGradient><rect
+             x="113.2"
+             y="75.699997"
+             class="st5"
+             width="4.5"
+             height="61.200001"
+             id="rect5872"
+             style="fill:url(#SVGID_2_)" /><linearGradient
+             id="SVGID_3_"
+             gradientUnits="userSpaceOnUse"
+             x1="91.1007"
+             y1="235.093"
+             x2="182.60069"
+             y2="31.093"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5875" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5877" /></linearGradient><rect
+             x="113.2"
+             y="163.60001"
+             class="st6"
+             width="4.5"
+             height="34.5"
+             id="rect5879"
+             style="fill:url(#SVGID_3_)" /><linearGradient
+             id="SVGID_4_"
+             gradientUnits="userSpaceOnUse"
+             x1="82.610298"
+             y1="231.28481"
+             x2="174.11031"
+             y2="27.2848"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5882" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5884" /></linearGradient><rect
+             x="142.5"
+             y="75.699997"
+             class="st7"
+             width="4.5"
+             height="34.299999"
+             id="rect5886"
+             style="fill:url(#SVGID_4_)" /><linearGradient
+             id="SVGID_5_"
+             gradientUnits="userSpaceOnUse"
+             x1="111.0053"
+             y1="244.0208"
+             x2="202.50529"
+             y2="40.020699"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5889" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5891" /></linearGradient><rect
+             x="142.5"
+             y="139.8"
+             class="st8"
+             width="4.5"
+             height="58.299999"
+             id="rect5893"
+             style="fill:url(#SVGID_5_)" /><linearGradient
+             id="SVGID_6_"
+             gradientUnits="userSpaceOnUse"
+             x1="111.9398"
+             y1="244.4399"
+             x2="203.4398"
+             y2="40.439899"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5896" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5898" /></linearGradient><rect
+             x="171.7"
+             y="75.699997"
+             class="st9"
+             width="4.5"
+             height="61.200001"
+             id="rect5900"
+             style="fill:url(#SVGID_6_)" /><linearGradient
+             id="SVGID_7_"
+             gradientUnits="userSpaceOnUse"
+             x1="139.88451"
+             y1="256.97391"
+             x2="231.38451"
+             y2="52.9739"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5903" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5905" /></linearGradient><rect
+             x="171.7"
+             y="164.2"
+             class="st10"
+             width="4.5"
+             height="33.900002"
+             id="rect5907"
+             style="fill:url(#SVGID_7_)" /><linearGradient
+             id="SVGID_8_"
+             gradientUnits="userSpaceOnUse"
+             x1="129.57471"
+             y1="252.3497"
+             x2="221.07471"
+             y2="48.349701"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5910" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5912" /></linearGradient><rect
+             x="202.8"
+             y="75.699997"
+             class="st11"
+             width="4.5"
+             height="16.700001"
+             id="rect5914"
+             style="fill:url(#SVGID_8_)" /><linearGradient
+             id="SVGID_9_"
+             gradientUnits="userSpaceOnUse"
+             x1="158.3318"
+             y1="265.24811"
+             x2="249.8318"
+             y2="61.2481"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5917" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5919" /></linearGradient><rect
+             x="202.8"
+             y="124.1"
+             class="st12"
+             width="4.5"
+             height="74"
+             id="rect5921"
+             style="fill:url(#SVGID_9_)" /><linearGradient
+             id="SVGID_10_"
+             gradientUnits="userSpaceOnUse"
+             x1="79.700302"
+             y1="229.97951"
+             x2="171.2003"
+             y2="25.9795"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5924" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5926" /></linearGradient><path
+             class="st13"
+             d="m 115.4,141.4 c -4.9,0 -8.9,4 -8.9,8.9 0,4.9 4,8.9 8.9,8.9 4.9,0 8.9,-4 8.9,-8.9 0,-4.9 -4,-8.9 -8.9,-8.9 z m 0,13.4 c -2.5,0 -4.5,-2 -4.5,-4.4 0,-2.5 2,-4.5 4.5,-4.5 2.5,0 4.5,2 4.5,4.5 0,2.4 -2,4.4 -4.5,4.4 z"
+             id="path5928"
+             style="fill:url(#SVGID_10_)"
+             inkscape:connector-curvature="0" /><linearGradient
+             id="SVGID_11_"
+             gradientUnits="userSpaceOnUse"
+             x1="94.226303"
+             y1="236.4949"
+             x2="185.7263"
+             y2="32.4949"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5931" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5933" /></linearGradient><path
+             class="st14"
+             d="m 144.4,115.8 c -4.9,0 -8.9,4 -8.9,8.9 0,4.9 4,8.9 8.9,8.9 4.9,0 8.9,-4 8.9,-8.9 0,-4.9 -4,-8.9 -8.9,-8.9 z m 0,13.4 c -2.5,0 -4.5,-2 -4.5,-4.5 0,-2.5 2,-4.5 4.5,-4.5 2.5,0 4.4,2 4.4,4.5 0,2.5 -2,4.5 -4.4,4.5 z"
+             id="path5935"
+             style="fill:url(#SVGID_11_)"
+             inkscape:connector-curvature="0" /><linearGradient
+             id="SVGID_12_"
+             gradientUnits="userSpaceOnUse"
+             x1="128.36971"
+             y1="251.8092"
+             x2="219.86971"
+             y2="47.8092"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5938" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5940" /></linearGradient><path
+             class="st15"
+             d="m 173.9,141.4 c -4.9,0 -8.9,4 -8.9,8.9 0,4.9 4,8.9 8.9,8.9 4.9,0 8.9,-4 8.9,-8.9 0,-4.9 -4,-8.9 -8.9,-8.9 z m 0,13.4 c -2.5,0 -4.4,-2 -4.4,-4.4 0,-2.5 2,-4.5 4.4,-4.5 2.5,0 4.5,2 4.5,4.5 -0.1,2.4 -2.1,4.4 -4.5,4.4 z"
+             id="path5942"
+             style="fill:url(#SVGID_12_)"
+             inkscape:connector-curvature="0" /><linearGradient
+             id="SVGID_13_"
+             gradientUnits="userSpaceOnUse"
+             x1="138.8425"
+             y1="256.50659"
+             x2="230.3425"
+             y2="52.506599"><stop
+               offset="0"
+               style="stop-color:#00ADDC"
+               id="stop5945" /><stop
+               offset="1"
+               style="stop-color:#6BFBFF"
+               id="stop5947" /></linearGradient><path
+             class="st16"
+             d="m 205,100 c -4.9,0 -8.9,4 -8.9,8.9 0,4.9 4,8.9 8.9,8.9 4.9,0 8.9,-4 8.9,-8.9 0,-4.9 -4,-8.9 -8.9,-8.9 z m 0,13.4 c -2.5,0 -4.4,-2 -4.4,-4.5 0,-2.5 2,-4.5 4.4,-4.5 2.5,0 4.5,2 4.5,4.5 0,2.5 -2,4.5 -4.5,4.5 z"
+             id="path5949"
+             style="fill:url(#SVGID_13_)"
+             inkscape:connector-curvature="0" /></g></g></g></switch></svg>
\ No newline at end of file