Notifications interface
1 .gg-notifications { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px ;
8 background:
9 linear-gradient(
10 to left,currentColor 10px ,transparent 0 )
11 no-repeat right bottom/2px 8px ,
12 linear-gradient(
13 to left,currentColor 10px ,transparent 0 )
14 no-repeat left top/8px 2px 15 } 16 17 .gg-notifications::after ,
18 .gg-notifications::before { 19 content: "";
20 position: absolute;
21 display: block;
22 box-sizing: border-box
23 } 24 25 .gg-notifications::before { 26 width: 14px ;
27 height: 14px ;
28 border-left: 2px solid;
29 border-bottom: 2px solid
30 } 31 32 .gg-notifications::after { 33 width: 6px ;
34 height: 6px ;
35 border-radius: 4px ;
36 background: currentColor;
37 top: -2px ;
38 right: -2px 39 }
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 d="M20 7 C20 8.65685 18.6569 10 17 10 C15.3431 10 14 8.65685 14 7 C14 5.34315 15.3431 4 17 4 C18.6569 4 20 5.34315 20 7 Z" 10 fill="currentColor" 11 /> 12 <path d="M12 6 H4 V20 H18 V12 H16 V18 H6 V8 H12 V6 Z" fill="currentColor" /> 13 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledNotifications = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 background: linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat right13 bottom/2px 8px , 14 linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat left top/8px 2px ; 15 } 16 &::after , 17 &::before { 18 content: '';19 position: absolute;20 display: block;21 box-sizing: border-box;22 } 23 &::before { 24 width: 14px ;25 height: 14px ;26 border-left: 2px solid;27 border-bottom: 2px solid;28 } 29 &::after { 30 width: 6px ;31 height: 6px ;32 border-radius: 4px ;33 background: currentColor;34 top: -2px ;35 right: -2px ;36 } 37 ` 38 39 export const Notifications = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledNotifications { ...props} ref={ ref} icon-role="notifications" /> 44 </> 45 ) 46 } , 47 ) 48
Notifications became an amazing pure CSS icon built by using features as follows: transform, width, height, background, border-left, border-bottom, border-radius,
