Skip to content

Instantly share code, notes, and snippets.

@heddendorp

heddendorp/example.html

Created January 16, 2020 19:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save heddendorp/349edec5491231d5a561aab656a19ebf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save heddendorp/349edec5491231d5a561aab656a19ebf to your computer and use it in GitHub Desktop.
Download ZIP
Gradient line problem
Raw
example.html
<html>
<body>
<h1>Icons8 explainer</h1>
<p>
So gradient line icons seem to work if you just select an icon and download it as svg. But once you recolor them the defined gradients do not have unique names anymore, making them break if multiple icons are used dire in the code as svg. <br>
Look at the source of these examples and open this code in a browser to see the behaviour that I expereinced.
</p>
<h2>This does not work</h2>
<div style="flex-direction: row;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64pt" height="64pt" viewBox="0 0 64 64" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="48.375" y1="56.88631" x2="48.375" y2="72.12175" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="123.625" y1="56.88631" x2="123.625" y2="72.12175" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="86" y1="33.14494" x2="86" y2="139.82525" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="86" y1="33.14494" x2="86" y2="139.82525" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface4082816">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 11 23 L 25 23 L 25 25 L 11 25 Z M 11 23 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 39 23 L 53 23 L 53 25 L 39 25 Z M 39 23 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 56 13 L 36 13 C 34.359375 13 32.910156 13.804688 32 15.03125 C 31.089844 13.804688 29.640625 13 28 13 L 8 13 C 5.242188 13 3 15.242188 3 18 L 3 48 C 3 49.652344 4.347656 51 6 51 L 8 51 C 9.652344 51 11 49.652344 11 48 L 11 44 C 11 43.449219 11.449219 43 12 43 L 51.984375 43 C 52.542969 43 53 43.457031 53 44.015625 L 53 48 C 53 49.652344 54.347656 51 56 51 L 58 51 C 59.652344 51 61 49.652344 61 48 L 61 18 C 61 15.242188 58.757812 13 56 13 Z M 36 15 L 56 15 C 57.652344 15 59 16.347656 59 18 L 59 30.023438 C 58.414062 29.582031 57.742188 29.253906 57 29.101562 L 57 28 C 57 26.699219 56.160156 25.597656 55 25.183594 L 55 24 C 55 22.347656 53.652344 21 52 21 L 40 21 C 38.347656 21 37 22.347656 37 24 L 37 25 L 33 25 L 33 18 C 33 16.347656 34.347656 15 36 15 Z M 25 25 L 11 25 L 11 24 C 11 23.449219 11.449219 23 12 23 L 24 23 C 24.550781 23 25 23.449219 25 24 Z M 10 27 L 54 27 C 54.550781 27 55 27.449219 55 28 L 55 29 L 9 29 L 9 28 C 9 27.449219 9.449219 27 10 27 Z M 53 25 L 39 25 L 39 24 C 39 23.449219 39.449219 23 40 23 L 52 23 C 52.550781 23 53 23.449219 53 24 Z M 8 15 L 28 15 C 29.652344 15 31 16.347656 31 18 L 31 25 L 27 25 L 27 24 C 27 22.347656 25.652344 21 24 21 L 12 21 C 10.347656 21 9 22.347656 9 24 L 9 25.183594 C 7.839844 25.597656 7 26.699219 7 28 L 7 29.101562 C 6.257812 29.253906 5.585938 29.582031 5 30.023438 L 5 18 C 5 16.347656 6.347656 15 8 15 Z M 9 44 L 9 48 C 9 48.550781 8.550781 49 8 49 L 6 49 C 5.449219 49 5 48.550781 5 48 L 5 43 L 9.183594 43 C 9.070312 43.3125 9 43.648438 9 44 Z M 59 48 C 59 48.550781 58.550781 49 58 49 L 56 49 C 55.449219 49 55 48.550781 55 48 L 55 44.015625 C 55 43.65625 54.925781 43.320312 54.8125 43 L 59 43 Z M 59 41 L 5 41 L 5 34 C 5 32.347656 6.347656 31 8 31 L 56 31 C 57.652344 31 59 32.347656 59 34 Z M 59 41 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 11 35 L 53 35 L 53 37 L 11 37 Z M 11 35 "/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64pt" height="64pt" viewBox="0 0 64 64" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="44.82213" y1="98.16363" x2="44.82213" y2="152.91875" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="85.97313" y1="16.16531" x2="85.97313" y2="155.86694" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="80.62502" y1="61.35483" x2="80.62278" y2="81.02914" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface4082623">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 9.625 37 L 26.375 54 L 24.875 55.5 C 23.566406 56.808594 21.4375 56.808594 20.128906 55.5 L 7.964844 43.335938 C 6.632812 42.003906 6.65625 39.835938 8.019531 38.53125 Z M 9.625 37 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 19.707031 32.335938 L 31.34375 44.3125 L 29.90625 45.707031 L 18.269531 33.726562 Z M 15.269531 36.726562 L 26.90625 48.707031 L 28.34375 47.3125 L 16.707031 35.335938 Z M 54.851562 27.5625 L 54.085938 28.328125 C 54.054688 28.375 54.039062 28.425781 54 28.464844 L 25.765625 56.699219 C 24.898438 57.566406 23.761719 57.996094 22.628906 57.996094 C 21.488281 57.996094 20.355469 57.566406 19.488281 56.699219 L 7.300781 44.148438 C 6.460938 43.3125 6 42.199219 6 41.011719 C 6 39.828125 6.460938 38.714844 7.300781 37.875 L 27 18.296875 C 27.863281 17.433594 29 17 30.136719 17 C 31.273438 17 32.410156 17.433594 33.273438 18.296875 L 39 24 C 40.316406 25.316406 42.132812 26 44 26 C 44.792969 26 45.59375 25.984375 46.878906 24.988281 L 48.679688 23.1875 C 50.390625 21.480469 50.390625 18.703125 48.679688 16.992188 L 47.007812 15.320312 C 46.179688 14.492188 45.132812 14.078125 44.085938 14.078125 C 43.039062 14.078125 41.992188 14.492188 41.164062 15.320312 L 40.53125 15.917969 C 39.789062 16.640625 38.820312 17 37.851562 17 C 36.863281 17 35.875 16.625 35.128906 15.878906 C 34.398438 15.152344 34 14.183594 34 13.15625 C 34 12.128906 34.398438 11.160156 35.128906 10.433594 L 36.4375 9.148438 C 38.460938 7.125 41.144531 6.015625 44 6.015625 C 46.855469 6.015625 49.542969 7.125 51.5625 9.148438 L 54.851562 12.4375 C 59.019531 16.609375 59.019531 23.390625 54.851562 27.5625 Z M 25.210938 54.425781 L 9.570312 38.441406 L 8.710938 39.292969 C 8.253906 39.75 8 40.363281 8 41.011719 C 8 41.664062 8.253906 42.273438 8.714844 42.734375 L 20.921875 55.304688 C 21.359375 55.742188 21.972656 55.996094 22.625 55.996094 C 23.277344 55.996094 23.890625 55.746094 24.347656 55.285156 Z M 53.4375 13.851562 L 50.148438 10.5625 C 48.503906 8.917969 46.320312 8.015625 44 8.015625 C 41.679688 8.015625 39.496094 8.917969 37.855469 10.5625 L 36.527344 11.863281 C 36.1875 12.203125 36 12.65625 36 13.15625 C 36 13.65625 36.1875 14.109375 36.539062 14.464844 C 36.886719 14.808594 37.351562 15 37.851562 15 C 38.335938 15 38.792969 14.816406 39.136719 14.484375 L 39.773438 13.882812 C 40.949219 12.71875 42.480469 12.078125 44.085938 12.078125 C 45.703125 12.078125 47.242188 12.726562 48.421875 13.90625 L 50.09375 15.578125 C 52.582031 18.066406 52.582031 22.117188 50.09375 24.605469 L 48.203125 26.496094 L 48.101562 26.574219 C 46.394531 27.890625 45.140625 28 44 28 C 41.53125 28 39.253906 27.082031 37.585938 25.414062 L 31.863281 19.714844 C 31.402344 19.253906 30.789062 19 30.136719 19 C 29.484375 19 28.871094 19.253906 28.414062 19.710938 L 10.988281 37.03125 L 26.625 53.011719 L 52.433594 27.199219 C 52.4375 27.195312 52.4375 27.195312 52.441406 27.191406 L 52.542969 27.042969 L 52.671875 26.914062 L 53.4375 26.144531 C 56.828125 22.757812 56.828125 17.242188 53.4375 13.851562 Z M 53.4375 13.851562 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 22 30 L 28.152344 23.816406 C 29.238281 22.726562 31.003906 22.726562 32.089844 23.816406 L 38 30 Z M 22 30 "/>
</g>
</svg>
</div>
<h2>After making sure the IDs are unique it does</h2>
<div style="flex-direction: row;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64pt" height="64pt" viewBox="0 0 64 64" version="1.1">
<defs>
<linearGradient id="unique1a" gradientUnits="userSpaceOnUse" x1="48.375" y1="56.88631" x2="48.375" y2="72.12175" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="unique1b" gradientUnits="userSpaceOnUse" x1="123.625" y1="56.88631" x2="123.625" y2="72.12175" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="unique1c" gradientUnits="userSpaceOnUse" x1="86" y1="33.14494" x2="86" y2="139.82525" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="unique1d" gradientUnits="userSpaceOnUse" x1="86" y1="33.14494" x2="86" y2="139.82525" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface4082816">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique1a);" d="M 11 23 L 25 23 L 25 25 L 11 25 Z M 11 23 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique1b);" d="M 39 23 L 53 23 L 53 25 L 39 25 Z M 39 23 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique1c);" d="M 56 13 L 36 13 C 34.359375 13 32.910156 13.804688 32 15.03125 C 31.089844 13.804688 29.640625 13 28 13 L 8 13 C 5.242188 13 3 15.242188 3 18 L 3 48 C 3 49.652344 4.347656 51 6 51 L 8 51 C 9.652344 51 11 49.652344 11 48 L 11 44 C 11 43.449219 11.449219 43 12 43 L 51.984375 43 C 52.542969 43 53 43.457031 53 44.015625 L 53 48 C 53 49.652344 54.347656 51 56 51 L 58 51 C 59.652344 51 61 49.652344 61 48 L 61 18 C 61 15.242188 58.757812 13 56 13 Z M 36 15 L 56 15 C 57.652344 15 59 16.347656 59 18 L 59 30.023438 C 58.414062 29.582031 57.742188 29.253906 57 29.101562 L 57 28 C 57 26.699219 56.160156 25.597656 55 25.183594 L 55 24 C 55 22.347656 53.652344 21 52 21 L 40 21 C 38.347656 21 37 22.347656 37 24 L 37 25 L 33 25 L 33 18 C 33 16.347656 34.347656 15 36 15 Z M 25 25 L 11 25 L 11 24 C 11 23.449219 11.449219 23 12 23 L 24 23 C 24.550781 23 25 23.449219 25 24 Z M 10 27 L 54 27 C 54.550781 27 55 27.449219 55 28 L 55 29 L 9 29 L 9 28 C 9 27.449219 9.449219 27 10 27 Z M 53 25 L 39 25 L 39 24 C 39 23.449219 39.449219 23 40 23 L 52 23 C 52.550781 23 53 23.449219 53 24 Z M 8 15 L 28 15 C 29.652344 15 31 16.347656 31 18 L 31 25 L 27 25 L 27 24 C 27 22.347656 25.652344 21 24 21 L 12 21 C 10.347656 21 9 22.347656 9 24 L 9 25.183594 C 7.839844 25.597656 7 26.699219 7 28 L 7 29.101562 C 6.257812 29.253906 5.585938 29.582031 5 30.023438 L 5 18 C 5 16.347656 6.347656 15 8 15 Z M 9 44 L 9 48 C 9 48.550781 8.550781 49 8 49 L 6 49 C 5.449219 49 5 48.550781 5 48 L 5 43 L 9.183594 43 C 9.070312 43.3125 9 43.648438 9 44 Z M 59 48 C 59 48.550781 58.550781 49 58 49 L 56 49 C 55.449219 49 55 48.550781 55 48 L 55 44.015625 C 55 43.65625 54.925781 43.320312 54.8125 43 L 59 43 Z M 59 41 L 5 41 L 5 34 C 5 32.347656 6.347656 31 8 31 L 56 31 C 57.652344 31 59 32.347656 59 34 Z M 59 41 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique1d);" d="M 11 35 L 53 35 L 53 37 L 11 37 Z M 11 35 "/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64pt" height="64pt" viewBox="0 0 64 64" version="1.1">
<defs>
<linearGradient id="unique2a" gradientUnits="userSpaceOnUse" x1="44.82213" y1="98.16363" x2="44.82213" y2="152.91875" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="unique2b" gradientUnits="userSpaceOnUse" x1="85.97313" y1="16.16531" x2="85.97313" y2="155.86694" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(87.843137%,56.470588%,94.117647%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(1.960784%,74.117647%,96.078431%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="unique2c" gradientUnits="userSpaceOnUse" x1="80.62502" y1="61.35483" x2="80.62278" y2="81.02914" gradientTransform="matrix(0.372093,0,0,0.372093,0,0)">
<stop offset="0" style="stop-color:rgb(98.823529%,95.294118%,99.215686%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(43.137255%,85.490196%,98.823529%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface4082623">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique2a);" d="M 9.625 37 L 26.375 54 L 24.875 55.5 C 23.566406 56.808594 21.4375 56.808594 20.128906 55.5 L 7.964844 43.335938 C 6.632812 42.003906 6.65625 39.835938 8.019531 38.53125 Z M 9.625 37 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique2b);" d="M 19.707031 32.335938 L 31.34375 44.3125 L 29.90625 45.707031 L 18.269531 33.726562 Z M 15.269531 36.726562 L 26.90625 48.707031 L 28.34375 47.3125 L 16.707031 35.335938 Z M 54.851562 27.5625 L 54.085938 28.328125 C 54.054688 28.375 54.039062 28.425781 54 28.464844 L 25.765625 56.699219 C 24.898438 57.566406 23.761719 57.996094 22.628906 57.996094 C 21.488281 57.996094 20.355469 57.566406 19.488281 56.699219 L 7.300781 44.148438 C 6.460938 43.3125 6 42.199219 6 41.011719 C 6 39.828125 6.460938 38.714844 7.300781 37.875 L 27 18.296875 C 27.863281 17.433594 29 17 30.136719 17 C 31.273438 17 32.410156 17.433594 33.273438 18.296875 L 39 24 C 40.316406 25.316406 42.132812 26 44 26 C 44.792969 26 45.59375 25.984375 46.878906 24.988281 L 48.679688 23.1875 C 50.390625 21.480469 50.390625 18.703125 48.679688 16.992188 L 47.007812 15.320312 C 46.179688 14.492188 45.132812 14.078125 44.085938 14.078125 C 43.039062 14.078125 41.992188 14.492188 41.164062 15.320312 L 40.53125 15.917969 C 39.789062 16.640625 38.820312 17 37.851562 17 C 36.863281 17 35.875 16.625 35.128906 15.878906 C 34.398438 15.152344 34 14.183594 34 13.15625 C 34 12.128906 34.398438 11.160156 35.128906 10.433594 L 36.4375 9.148438 C 38.460938 7.125 41.144531 6.015625 44 6.015625 C 46.855469 6.015625 49.542969 7.125 51.5625 9.148438 L 54.851562 12.4375 C 59.019531 16.609375 59.019531 23.390625 54.851562 27.5625 Z M 25.210938 54.425781 L 9.570312 38.441406 L 8.710938 39.292969 C 8.253906 39.75 8 40.363281 8 41.011719 C 8 41.664062 8.253906 42.273438 8.714844 42.734375 L 20.921875 55.304688 C 21.359375 55.742188 21.972656 55.996094 22.625 55.996094 C 23.277344 55.996094 23.890625 55.746094 24.347656 55.285156 Z M 53.4375 13.851562 L 50.148438 10.5625 C 48.503906 8.917969 46.320312 8.015625 44 8.015625 C 41.679688 8.015625 39.496094 8.917969 37.855469 10.5625 L 36.527344 11.863281 C 36.1875 12.203125 36 12.65625 36 13.15625 C 36 13.65625 36.1875 14.109375 36.539062 14.464844 C 36.886719 14.808594 37.351562 15 37.851562 15 C 38.335938 15 38.792969 14.816406 39.136719 14.484375 L 39.773438 13.882812 C 40.949219 12.71875 42.480469 12.078125 44.085938 12.078125 C 45.703125 12.078125 47.242188 12.726562 48.421875 13.90625 L 50.09375 15.578125 C 52.582031 18.066406 52.582031 22.117188 50.09375 24.605469 L 48.203125 26.496094 L 48.101562 26.574219 C 46.394531 27.890625 45.140625 28 44 28 C 41.53125 28 39.253906 27.082031 37.585938 25.414062 L 31.863281 19.714844 C 31.402344 19.253906 30.789062 19 30.136719 19 C 29.484375 19 28.871094 19.253906 28.414062 19.710938 L 10.988281 37.03125 L 26.625 53.011719 L 52.433594 27.199219 C 52.4375 27.195312 52.4375 27.195312 52.441406 27.191406 L 52.542969 27.042969 L 52.671875 26.914062 L 53.4375 26.144531 C 56.828125 22.757812 56.828125 17.242188 53.4375 13.851562 Z M 53.4375 13.851562 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#unique2c);" d="M 22 30 L 28.152344 23.816406 C 29.238281 22.726562 31.003906 22.726562 32.089844 23.816406 L 38 30 Z M 22 30 "/>
</g>
</svg>
</div>
<h2>Not opening the recolor menu makes them work as well</h2>
<div style="flex-direction: row;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><linearGradient id="uhG1pmXsh6A3atK7ceKlua" x1="16.678" x2="16.678" y1="36.526" y2="56.9" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#uhG1pmXsh6A3atK7ceKlua)" d="M9.625,37l16.75,17l-1.499,1.499c-1.311,1.311-3.437,1.311-4.748,0L7.964,43.335 c-1.332-1.332-1.308-3.5,0.055-4.802L9.625,37z"/><linearGradient id="uhG1pmXsh6A3atK7ceKlub" x1="31.99" x2="31.99" y1="6.015" y2="57.997" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#uhG1pmXsh6A3atK7ceKlub)" d="M19.706,32.334l11.636,11.98l-1.435,1.393l-11.636-11.98L19.706,32.334z M15.271,36.727 l11.636,11.98l1.435-1.393l-11.636-11.98L15.271,36.727z M54.853,27.562l-0.768,0.768c-0.03,0.044-0.046,0.095-0.085,0.133 L25.764,56.7c-0.864,0.865-2.001,1.297-3.137,1.297c-1.137,0-2.273-0.432-3.138-1.297L7.3,44.15C6.462,43.313,6,42.198,6,41.013 c0-1.186,0.462-2.3,1.3-3.138L27,18.297C27.865,17.433,29.001,17,30.138,17c1.136,0,2.272,0.432,3.137,1.297L39,24 c1.316,1.317,3.131,2,5,2c0.792,0,1.592-0.017,2.88-1.01l1.801-1.801c1.708-1.708,1.708-4.487,0-6.195l-1.675-1.675 c-0.827-0.827-1.873-1.241-2.919-1.241c-1.047,0-2.093,0.414-2.921,1.241l-0.635,0.598C39.788,16.64,38.819,17,37.85,17 c-0.988,0-1.975-0.374-2.722-1.122C34.4,15.152,34,14.185,34,13.157s0.4-1.995,1.127-2.722l1.312-1.288 c2.02-2.021,4.705-3.133,7.561-3.133s5.542,1.112,7.561,3.133l3.292,3.291C59.021,16.608,59.021,23.392,54.853,27.562z M25.21,54.425L9.57,38.44l-0.86,0.854C8.254,39.75,8,40.362,8,41.013c0,0.65,0.254,1.262,0.714,1.723l12.209,12.57 c0.438,0.438,1.05,0.691,1.703,0.691c0.653,0,1.264-0.252,1.722-0.711L25.21,54.425z M53.439,13.852l-3.292-3.291 C48.505,8.919,46.322,8.015,44,8.015s-4.505,0.904-6.146,2.547l-1.325,1.301C36.187,12.204,36,12.656,36,13.157 c0,0.501,0.187,0.953,0.541,1.307C36.887,14.81,37.352,15,37.85,15c0.487,0,0.944-0.183,1.287-0.516l0.638-0.602 c1.176-1.163,2.706-1.803,4.312-1.803c1.617,0,3.156,0.649,4.333,1.826l1.675,1.675c2.487,2.488,2.487,6.536,0,9.024l-1.801,1.801 l-0.091,0.091l-0.102,0.079C46.394,27.89,45.139,28,44,28c-2.47,0-4.748-0.918-6.415-2.586l-5.722-5.699 C31.402,19.253,30.79,19,30.137,19c-0.652,0-1.264,0.253-1.723,0.711L10.988,37.03L26.625,53.01l25.81-25.811 c0.002-0.003,0.003-0.005,0.005-0.008l0.103-0.149l0.128-0.128l0.768-0.768C56.827,22.758,56.827,17.242,53.439,13.852z"/><linearGradient id="uhG1pmXsh6A3atK7ceKluc" x1="28.85" x2="34.026" y1="8.394" y2="13.571" gradientTransform="rotate(45.001 12 17)" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#uhG1pmXsh6A3atK7ceKluc)" d="M22,30l6.152-6.184c1.088-1.088,2.852-1.088,3.939,0L38,30H22z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><linearGradient id="5SC~AVjDvGkCU~ZrxCeoHa" x1="18" x2="18" y1="21.167" y2="26.836" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#5SC~AVjDvGkCU~ZrxCeoHa)" d="M11 23H25V25H11z"/><linearGradient id="5SC~AVjDvGkCU~ZrxCeoHb" x1="46" x2="46" y1="21.167" y2="26.836" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#5SC~AVjDvGkCU~ZrxCeoHb)" d="M39 23H53V25H39z"/><linearGradient id="5SC~AVjDvGkCU~ZrxCeoHc" x1="32" x2="32" y1="12.333" y2="52.028" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#5SC~AVjDvGkCU~ZrxCeoHc)" d="M56,13H36c-1.641,0-3.088,0.806-4,2.031C31.088,13.806,29.641,13,28,13H8 c-2.757,0-5,2.243-5,5v16v8v1v5c0,1.654,1.346,3,3,3h2c1.654,0,3-1.346,3-3v-4c0-0.552,0.448-1,1-1h39.984 C52.544,43,53,43.456,53,44.016V48c0,1.654,1.346,3,3,3h2c1.654,0,3-1.346,3-3v-5v-1v-5v-3V18C61,15.243,58.757,13,56,13z M36,15h20 c1.654,0,3,1.346,3,3v12.025c-0.584-0.442-1.257-0.773-2-0.924V28c0-1.302-0.838-2.401-2-2.816V24c0-1.654-1.346-3-3-3H40 c-1.654,0-3,1.346-3,3v1h-4v-3v-4C33,16.346,34.346,15,36,15z M25,25H11v-1c0-0.552,0.448-1,1-1h12c0.552,0,1,0.448,1,1V25z M10,27 h44c0.552,0,1,0.448,1,1v1H9v-1C9,27.448,9.448,27,10,27z M53,25H39v-1c0-0.552,0.448-1,1-1h12c0.552,0,1,0.448,1,1V25z M8,15h20 c1.654,0,3,1.346,3,3v4v3h-4v-1c0-1.654-1.346-3-3-3H12c-1.654,0-3,1.346-3,3v1.184C7.838,25.599,7,26.698,7,28v1.101 c-0.743,0.151-1.416,0.482-2,0.924V18C5,16.346,6.346,15,8,15z M9,44v4c0,0.552-0.448,1-1,1H6c-0.552,0-1-0.448-1-1v-5h4.184 C9.072,43.314,9,43.647,9,44z M59,48c0,0.552-0.448,1-1,1h-2c-0.552,0-1-0.448-1-1v-3.984c0-0.358-0.073-0.697-0.188-1.016H59V48z M59,41H5v-7c0-1.654,1.346-3,3-3h48c1.654,0,3,1.346,3,3v3V41z"/><linearGradient id="5SC~AVjDvGkCU~ZrxCeoHd" x1="32" x2="32" y1="12.333" y2="52.028" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#5SC~AVjDvGkCU~ZrxCeoHd)" d="M11 35H53V37H11z"/></svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment