Bell alerts interface time
1 .gg-bell,
2 .gg-bell::before { 3 border-top-left-radius: 100px ;
4 border-top-right-radius: 100px 5 } 6 7 .gg-bell { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 transform: scale(var(--ggs,1 ));
12 border: 2px solid;
13 border-bottom: 0 ;
14 width: 14px ;
15 height: 14px 16 } 17 18 .gg-bell::after ,
19 .gg-bell::before { 20 content: "";
21 display: block;
22 box-sizing: border-box;
23 position: absolute
24 } 25 26 .gg-bell::before { 27 background: currentColor;
28 width: 4px ;
29 height: 4px ;
30 top: -4px ;
31 left: 3px 32 } 33 34 .gg-bell::after { 35 border-radius: 3px ;
36 width: 16px ;
37 height: 10px ;
38 border: 6px solid transparent;
39 border-top: 1px solid transparent;
40 box-shadow:
41 inset 0 0 0 4px ,
42 0 -2px 0 0 ;
43 top: 14px ;
44 left: -3px ;
45 border-bottom-left-radius: 100px ;
46 border-bottom-right-radius: 100px 47 }
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="M14 3 V3.28988 C16.8915 4.15043 19 6.82898 19 10 V17 H20 V19 H4 V17 H5 V10 C5 6.82898 7.10851 4.15043 10 3.28988 V3 C10 1.89543 10.8954 1 12 1 C13.1046 1 14 1.89543 14 3 ZM7 17 H17 V10 C17 7.23858 14.7614 5 12 5 C9.23858 5 7 7.23858 7 10 V17 ZM14 21 V20 H10 V21 C10 22.1046 10.8954 23 12 23 C13.1046 23 14 22.1046 14 21 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBell = styled.i` 5 &, 6 &::before { 7 border-top-left-radius: 100px ;8 border-top-right-radius: 100px ;9 } 10 & { 11 box-sizing: border-box;12 position: relative;13 display: block;14 transform: scale(var(--ggs, 1 ));15 border: 2px solid;16 border-bottom: 0 ;17 width: 14px ;18 height: 14px ;19 } 20 &::after , 21 &::before { 22 content: '';23 display: block;24 box-sizing: border-box;25 position: absolute;26 } 27 &::before { 28 background: currentColor;29 width: 4px ;30 height: 4px ;31 top: -4px ;32 left: 3px ;33 } 34 &::after { 35 border-radius: 3px ;36 width: 16px ;37 height: 10px ;38 border: 6px solid transparent;39 border-top: 1px solid transparent;40 box-shadow: inset 0 0 0 4px , 0 -2px 0 0 ;41 top: 14px ;42 left: -3px ;43 border-bottom-left-radius: 100px ;44 border-bottom-right-radius: 100px ;45 } 46 ` 47 48 export const Bell = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 49 (props, ref) => { 50 return ( 51 <> 52 <StyledBell { ...props} ref={ ref} icon-role="bell" /> 53 </> 54 ) 55 } , 56 ) 57
Bell ended up a CSS icon built by practicing features like: .gg-bell, transform, border, border-bottom, width, height, border-top, box-shadow,
