Heart
10K Views
76 Downloads - 190 API calls
45 Lines - 848 Bytes
Apr 23, 2020 design
1 .gg-heart,
2 .gg-heart::after { 3 border: 2px solid;
4 border-top-left-radius: 100px ;
5 border-top-right-radius: 100px ;
6 width: 10px ;
7 height: 8px ;
8 border-bottom: 0 9 } 10 11 .gg-heart { 12 box-sizing: border-box;
13 position: relative;
14 transform:
15 translate(
16 calc(-10px / 2 * var(--ggs,1 )),
17 calc(-6px / 2 * var(--ggs,1 ))
18 )
19 rotate(-45deg )
20 scale(var(--ggs,1 ));
21 display: block
22 } 23 24 .gg-heart::after ,
25 .gg-heart::before { 26 content: "";
27 display: block;
28 box-sizing: border-box;
29 position: absolute
30 } 31 32 .gg-heart::after { 33 right: -9px ;
34 transform: rotate(90deg );
35 top: 5px 36 } 37 38 .gg-heart::before { 39 width: 11px ;
40 height: 11px ;
41 border-left: 2px solid;
42 border-bottom: 2px solid;
43 left: -2px ;
44 top: 3px 45 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M12.0122 5.57169 L10.9252 4.48469 C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469 C0.999162 6.63258 0.999162 10.115 3.14705 12.2629 L11.9859 21.1017 L11.9877 21.0999 L12.014 21.1262 L20.8528 12.2874 C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923 C18.705 2.36134 15.2226 2.36134 13.0747 4.50923 L12.0122 5.57169 ZM11.9877 18.2715 L16.9239 13.3352 L18.3747 11.9342 L18.3762 11.9356 L19.4386 10.8732 C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344 C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344 L12.0133 8.39904 L12.006 8.3918 L12.005 8.39287 L9.51101 5.89891 C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891 C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487 L7.10068 13.3881 L7.10248 13.3863 L11.9877 18.2715 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledHeart = styled.i` 5 &, 6 &::after { 7 border: 2px solid;8 border-top-left-radius: 100px ;9 border-top-right-radius: 100px ;10 width: 10px ;11 height: 8px ;12 border-bottom: 0 ;13 } 14 & { 15 box-sizing: border-box;16 position: relative;17 transform: translate(calc(-10px / 2 * var(--ggs, 1 )), calc(-6px / 2 * var(--ggs, 1 )))18 rotate(-45deg ) scale(var(--ggs, 1 )); 19 display: block;20 } 21 &::after , 22 &::before { 23 content: '';24 display: block;25 box-sizing: border-box;26 position: absolute;27 } 28 &::after { 29 right: -9px ;30 transform: rotate(90deg );31 top: 5px ;32 } 33 &::before { 34 width: 11px ;35 height: 11px ;36 border-left: 2px solid;37 border-bottom: 2px solid;38 left: -2px ;39 top: 3px ;40 } 41 ` 42 43 export const Heart = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledHeart { ...props} ref={ ref} icon-role="heart" /> 48 </> 49 ) 50 } , 51 ) 52
Heart turned into a pure CSS icon created by using attributes like: .gg-heart, width, height, border-bottom, transform, border-left, Fun to know, it has: 45 Lines of code at 848b & 585b after compression. Actually marvelous 💎 for a icon designed by code.