Cap
2K Views
53 Downloads - 28 API calls
44 Lines - 924 Bytes
Apr 23, 2020 design
1 .gg-cap { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 12px ;
8 border: 2px solid;
9 border-bottom-color: transparent;
10 border-top-left-radius: 100px ;
11 border-top-right-radius: 100px 12 } 13 14 .gg-cap::after ,
15 .gg-cap::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute
20 } 21 22 .gg-cap::after { 23 border-top: 2px solid transparent;
24 border-bottom: 2px solid transparent;
25 border-left: 4px solid transparent;
26 border-right: 4px solid transparent;
27 box-shadow:
28 0 0 0 2px ,
29 inset 12px 0 0 0 ;
30 bottom: -8px ;
31 width: 18px ;
32 height: 6px ;
33 border-radius: 1px ;
34 left: -2px 35 } 36 37 .gg-cap::before { 38 width: 4px ;
39 height: 4px ;
40 background: currentColor;
41 border-radius: 2px ;
42 left: 5px ;
43 top: -4px 44 }
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 d="M8 18 V20 H16 V18 H8 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M13.988 3.2203 C13.9959 3.14796 14 3.07446 14 3 C14 1.89543 13.1046 1 12 1 C10.8954 1 10 1.89543 10 3 C10 3.07446 10.0041 3.14796 10.012 3.2203 C5.99799 4.12533 3 7.71255 3 12 C3 12.3883 3.02459 12.7709 3.0723 13.1462 C1.86949 13.5369 1 14.6669 1 16 V20 C1 21.6569 2.34315 23 4 23 H20 C21.6569 23 23 21.6569 23 20 V16 C23 14.6669 22.1305 13.5369 20.9277 13.1462 C20.9754 12.7709 21 12.3883 21 12 C21 7.71255 18.002 4.12533 13.988 3.2203 ZM12 5 C8.13401 5 5 8.13401 5 12 C5 12.3402 5.02412 12.674 5.07063 13 H18.9294 C18.9759 12.674 19 12.3402 19 12 C19 8.13401 15.866 5 12 5 ZM3 16 C3 15.4477 3.44772 15 4 15 H20 C20.5523 15 21 15.4477 21 16 V20 C21 20.5523 20.5523 21 20 21 H4 C3.44772 21 3 20.5523 3 20 V16 Z" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCap = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 12px ;12 border: 2px solid;13 border-bottom-color: transparent;14 border-top-left-radius: 100px ;15 border-top-right-radius: 100px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 } 24 &::after { 25 border-top: 2px solid transparent;26 border-bottom: 2px solid transparent;27 border-left: 4px solid transparent;28 border-right: 4px solid transparent;29 box-shadow: 0 0 0 2px , inset 12px 0 0 0 ;30 bottom: -8px ;31 width: 18px ;32 height: 6px ;33 border-radius: 1px ;34 left: -2px ;35 } 36 &::before { 37 width: 4px ;38 height: 4px ;39 background: currentColor;40 border-radius: 2px ;41 left: 5px ;42 top: -4px ;43 } 44 ` 45 46 export const Cap = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 47 (props, ref) => { 48 return ( 49 <> 50 <StyledCap { ...props} ref={ ref} icon-role="cap" /> 51 </> 52 ) 53 } , 54 ) 55
Cap is an amazing 100% CSS icon made by practicing properties such as: transform, width, height, border, border-bottom-color, border-bottom, border-left, border-right, box-shadow, border-radius, background, Fun to know, it has: 44 Lines of code at 924b & 669b minified. Pretty stunning 🤩 .