optimize icons
This commit is contained in:
bmFtZQ
GitHub
parent
6e7c989959
commit
2ad3b8a631
3 changed files with 14 additions and 75 deletions
|
|
@ -1,5 +1,3 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||||
<path
|
<path style="fill:context-fill;fill-opacity:context-fill-opacity" d="M4.525 3.875a.625.625 0 0 0-.466.184.625.625 0 0 0 0 .882L7.117 8 4.06 11.059a.625.625 0 0 0 0 .882.625.625 0 0 0 .882 0L8 8.883l3.059 3.058a.625.625 0 0 0 .882 0 .625.625 0 0 0 0-.882L8.883 8l3.058-3.059a.625.625 0 0 0 0-.882.625.625 0 0 0-.416-.184.625.625 0 0 0-.466.184L8 7.117 4.941 4.06a.625.625 0 0 0-.416-.184z"/>
|
||||||
style="fill:context-fill;fill-opacity:context-fill-opacity"
|
|
||||||
d="M 4.5253906 3.875 A 0.625 0.625 0 0 0 4.0585938 4.0585938 A 0.625 0.625 0 0 0 4.0585938 4.9414062 L 7.1171875 8 L 4.0585938 11.058594 A 0.625 0.625 0 0 0 4.0585938 11.941406 A 0.625 0.625 0 0 0 4.9414062 11.941406 L 8 8.8828125 L 11.058594 11.941406 A 0.625 0.625 0 0 0 11.941406 11.941406 A 0.625 0.625 0 0 0 11.941406 11.058594 L 8.8828125 8 L 11.941406 4.9414062 A 0.625 0.625 0 0 0 11.941406 4.0585938 A 0.625 0.625 0 0 0 11.525391 3.875 A 0.625 0.625 0 0 0 11.058594 4.0585938 L 8 7.1171875 L 4.9414062 4.0585938 A 0.625 0.625 0 0 0 4.5253906 3.875 z " />
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 730 B After Width: | Height: | Size: 464 B |
|
|
@ -1,28 +1,6 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<style>
|
<style>
|
||||||
:root
|
@keyframes stroke-rotate{0%{stroke-dashoffset:var(--max-gap)}to{stroke-dashoffset:var(--min-gap)}}:root{--radius:calc(2 * 3.1415926536 * 7.5px);--max-gap:calc(var(--radius) * .99);--min-gap:calc(var(--radius) * .5)}
|
||||||
{
|
</style>
|
||||||
--radius: calc(2 * 3.1415926536 * 7.5px);
|
<circle cx="50%" cy="50%" r="7.5" style="fill:transparent;stroke:context-fill;stroke-width:1px;stroke-dasharray:var(--radius);stroke-linecap:round;transform-origin:center;animation:stroke-rotate 1.333s cubic-bezier(.35,0,.25,1) both"/>
|
||||||
--max-gap: calc(var(--radius) * .99);
|
</svg>
|
||||||
--min-gap: calc(var(--radius) * .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes stroke-rotate
|
|
||||||
{
|
|
||||||
0% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
100% { stroke-dashoffset: var(--min-gap); }
|
|
||||||
}
|
|
||||||
|
|
||||||
circle
|
|
||||||
{
|
|
||||||
fill: transparent;
|
|
||||||
stroke: context-fill;
|
|
||||||
stroke-width: 1px;
|
|
||||||
stroke-dasharray: var(--radius);
|
|
||||||
stroke-linecap: round;
|
|
||||||
transform-origin: center;
|
|
||||||
animation: stroke-rotate 1.333s cubic-bezier(.35, 0, .25, 1) both;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<circle cx="50%" cy="50%" r="7.5px"/>
|
|
||||||
</svg>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 671 B After Width: | Height: | Size: 550 B |
|
|
@ -1,43 +1,6 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<style>
|
<style>
|
||||||
:root
|
@keyframes stroke-rotate{12.5%{stroke-dashoffset:var(--min-gap);transform:rotate(0)}12.5001%,25%{transform:rotateX(180deg) rotate(90deg)}0%,25%{stroke-dashoffset:var(--max-gap)}25.0001%,37.5%{transform:rotate(270deg)}37.5%{stroke-dashoffset:var(--min-gap)}37.5001%,50%{transform:rotateX(180deg) rotate(180deg)}50%{stroke-dashoffset:var(--max-gap)}50.0001%,62.5%{transform:rotate(180deg)}62.5%{stroke-dashoffset:var(--min-gap)}62.5001%,75%{transform:rotateX(180deg) rotate(270deg)}75%{stroke-dashoffset:var(--max-gap)}75.0001%,87.5%{transform:rotate(90deg)}87.5%{stroke-dashoffset:var(--min-gap)}87.5001%,to{transform:rotateX(180deg) rotate(360deg)}to{stroke-dashoffset:var(--max-gap)}}:root{--radius:calc(2 * 3.1415926536 * 7.5px);--max-gap:calc(var(--radius) * .99);--min-gap:calc(var(--radius) * .25)}
|
||||||
{
|
</style>
|
||||||
--radius: calc(2 * 3.1415926536 * 7.5px);
|
<circle cx="50%" cy="50%" r="7.5" style="fill:transparent;stroke-dasharray:var(--radius);stroke:context-fill;stroke-width:1;stroke-linecap:round;transform-origin:center;animation:stroke-rotate calc(1.333s*4) cubic-bezier(.35,0,.25,1) infinite both"/>
|
||||||
--max-gap: calc(var(--radius) * .99);
|
</svg>
|
||||||
--min-gap: calc(var(--radius) * .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes stroke-rotate
|
|
||||||
{
|
|
||||||
0% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
12.5% { stroke-dashoffset: var(--min-gap);
|
|
||||||
transform: rotate(0); }
|
|
||||||
12.5001%, 25% { transform: rotateX(180deg) rotate(90deg); }
|
|
||||||
25% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
25.0001%, 37.5% { transform: rotate(270deg); }
|
|
||||||
37.5% { stroke-dashoffset: var(--min-gap); }
|
|
||||||
37.5001%, 50% { transform: rotateX(180deg) rotate(180deg); }
|
|
||||||
50% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
50.0001%, 62.5% { transform: rotate(180deg); }
|
|
||||||
62.5% { stroke-dashoffset: var(--min-gap); }
|
|
||||||
62.5001%, 75% { transform: rotateX(180deg) rotate(270deg); }
|
|
||||||
75% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
75.0001%, 87.5% { transform: rotate(90deg); }
|
|
||||||
87.5% { stroke-dashoffset: var(--min-gap); }
|
|
||||||
87.5001%, 100% { transform: rotateX(180deg) rotate(360deg); }
|
|
||||||
100% { stroke-dashoffset: var(--max-gap); }
|
|
||||||
}
|
|
||||||
|
|
||||||
circle
|
|
||||||
{
|
|
||||||
fill: transparent;
|
|
||||||
stroke-dasharray: var(--radius);
|
|
||||||
stroke: context-fill;
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-linecap: round;
|
|
||||||
transform-origin: center;
|
|
||||||
animation: stroke-rotate calc(1.333s * 4) cubic-bezier(.35, 0, .25, 1) infinite both;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<circle cx="50%" cy="50%" r="7.5px"/>
|
|
||||||
</svg>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue