Skip to content
Snippets Groups Projects
Commit 2357512c authored by Jacob Benz's avatar Jacob Benz
Browse files

Change loading tea icon to heart

parent cb17e68d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/commons/src/icons/components/TeaIcon.tsx
+ 13
− 39
View file @ 2357512c
...@@ -7,6 +7,8 @@ interface IconProps { ...@@ -7,6 +7,8 @@ interface IconProps {
size?: number; size?: number;
} }
// Not a tea icon anymore, since this is the Love Coding Branding, Heart Emoji Icon from OpenMoji, authored by Laura Humpfer, licensed under CC-BY SA 4.0
// (https://creativecommons.org/licenses/by-sa/4.0/)
export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => { export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => {
return ( return (
<SvgIcon <SvgIcon
...@@ -15,45 +17,17 @@ export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => { ...@@ -15,45 +17,17 @@ export const TeaIcon = ({ color = '#33406f', size = 1 }: IconProps) => {
height={24 * size} height={24 * size}
sx={{ transform: `scale(${size})` }} sx={{ transform: `scale(${size})` }}
> >
<g> <svg id="heart" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<path <g id="color">
d="M16.3,8.3H4.4c-0.6,0-1,0.4-1,1c0.1,1.7,0.2,5.3,0.7,7.4c0.8,3.3,2.3,5.4,3,6.1c0.2,0.2,0.4,0.3,0.7,0.3h5.1 <path fill="#EA5A47" d="M59.5,25c0-6.9036-5.5964-12.5-12.5-12.5c-4.7533,0-8.8861,2.6536-11,6.5598 C33.8861,15.1536,29.7533,12.5,25,12.5c-6.9036,0-12.5,5.5964-12.5,12.5c0,2.9699,1.0403,5.6942,2.7703,7.8387l-0.0043,0.0034 L36,58.5397l20.7339-25.6975l-0.0043-0.0034C58.4597,30.6942,59.5,27.9699,59.5,25z"/>
c0.3,0,0.6-0.1,0.8-0.4c0.6-0.8,1.8-2.9,2.9-6.1c0.7-2.1,0.8-5.8,0.8-7.5C17.3,8.7,16.9,8.3,16.3,8.3z" </g>
stroke={color} <g id="hair"/>
strokeWidth={1 + size / 24} <g id="skin"/>
></path> <g id="skin-shadow"/>
<path <g id="line">
d="M17.3,11.5c0,0,2.7-1.5,3.2,1c0.3,1.5-0.6,3-1.7,3.7c-1.3,0.8-2,0.6-2,0.6" <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M59.5,25 c0-6.9036-5.5964-12.5-12.5-12.5c-4.7533,0-8.8861,2.6536-11,6.5598C33.8861,15.1536,29.7533,12.5,25,12.5 c-6.9036,0-12.5,5.5964-12.5,12.5c0,2.9699,1.0403,5.6942,2.7703,7.8387l-0.0043,0.0034L36,58.5397l20.7339-25.6975l-0.0043-0.0034 C58.4597,30.6942,59.5,27.9699,59.5,25z"/>
stroke={color} </g>
strokeWidth={1 + size / 24} </svg>
></path>
<path
id="teabag"
fill={color}
fillRule="evenodd"
clipRule="evenodd"
strokeWidth={1 + size / 24}
d="M10.8,12.2v-4h-1v4h-1c-0.8,0-1.5,0.7-1.5,1.5v3c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5
v-3c0-0.8-0.7-1.5-1.5-1.5H10.8z M8.4,13.7c0-0.3,0.2-0.5,0.5-0.5h3c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-3
c-0.3,0-0.5-0.2-0.5-0.5V13.7z"
></path>
<path
id="steamL"
d="M11.3,0.3c0,0,0,1.7-1.5,2.7S8.4,5.8,8.4,5.8"
strokeWidth={1 + size / 24}
strokeLinecap="round"
strokeLinejoin="round"
stroke={color}
></path>
<path
id="steamR"
d="M13.3,2.8c0,0,0,1.1-1,1.7c-1,0.6-1,1.7-1,1.7"
stroke={color}
strokeWidth={1 + size / 24}
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
</SvgIcon> </SvgIcon>
); );
}; };
packages/commons/src/icons/components/css/tea.css
+ 19
− 103
View file @ 2357512c
...@@ -2,160 +2,76 @@ svg.tea { ...@@ -2,160 +2,76 @@ svg.tea {
fill: none fill: none
} }
svg.tea #teabag { svg.tea #heart {
transform-origin: top center; transform-origin: top center;
transform: rotate(3deg); transform: rotate(3deg);
animation: swing 2s infinite; animation: swing 2s infinite;
} }
svg.tea #steamL { svg.tea #heart {
stroke-dasharray: 13; animation: pulse 2s infinite;
stroke-dashoffset: 13;
animation: steamLarge 2s infinite;
} }
svg.tea #steamR { @-moz-keyframes pulse {
stroke-dasharray: 9;
stroke-dashoffset: 9;
animation: steamSmall 2s infinite;
}
@-moz-keyframes swing {
50% {
transform: rotate(-3deg);
}
}
@-webkit-keyframes swing {
50% {
transform: rotate(-3deg);
}
}
@-o-keyframes swing {
50% {
transform: rotate(-3deg);
}
}
@keyframes swing {
50% {
transform: rotate(-3deg);
}
}
@-moz-keyframes steamLarge {
0% { 0% {
stroke-dashoffset: 13;
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
stroke-dashoffset: 39;
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes steamLarge { @-webkit-keyframes pulse {
0% { 0% {
stroke-dashoffset: 13;
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
stroke-dashoffset: 39;
opacity: 0; opacity: 0;
} }
} }
@-o-keyframes steamLarge { @-o-keyframes pulse {
0% { 0% {
stroke-dashoffset: 13;
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
stroke-dashoffset: 39;
opacity: 0; opacity: 0;
} }
} }
@keyframes steamLarge { @keyframes pulse {
0% { 0% {
stroke-dashoffset: 13;
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
stroke-dashoffset: 39;
opacity: 0; opacity: 0;
} }
} }
@-moz-keyframes steamSmall { @-moz-keyframes swing {
10% { 50% {
stroke-dashoffset: 9; transform: rotate(-3deg);
opacity: 0.6;
}
80% {
stroke-dashoffset: 27;
opacity: 0;
}
100% {
stroke-dashoffset: 27;
opacity: 0;
} }
} }
@-webkit-keyframes steamSmall { @-webkit-keyframes swing {
10% { 50% {
stroke-dashoffset: 9; transform: rotate(-3deg);
opacity: 0.6;
}
80% {
stroke-dashoffset: 27;
opacity: 0;
}
100% {
stroke-dashoffset: 27;
opacity: 0;
} }
} }
@-o-keyframes steamSmall { @-o-keyframes swing {
10% { 50% {
stroke-dashoffset: 9; transform: rotate(-3deg);
opacity: 0.6;
}
80% {
stroke-dashoffset: 27;
opacity: 0;
}
100% {
stroke-dashoffset: 27;
opacity: 0;
} }
} }
@keyframes steamSmall { @keyframes swing {
10% { 50% {
stroke-dashoffset: 9; transform: rotate(-3deg);
opacity: 0.6;
}
80% {
stroke-dashoffset: 27;
opacity: 0;
}
100% {
stroke-dashoffset: 27;
opacity: 0;
} }
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment