Alarm time alerts interface
1 .gg-alarm { 2 background:
3 linear-gradient( to left,
4 currentColor 5px , transparent 0 )
5 no-repeat 4.5px 6px /5px 2px ,
6 linear-gradient( to left,
7 currentColor 7px , transparent 0 )
8 no-repeat 4.5px 2px /2px 6px ;
9 box-sizing: border-box;
10 position: relative;
11 display: block;
12 width: 16px ;
13 height: 16px ;
14 border-radius: 100% ;
15 border: 2px solid transparent;
16 transform: scale(var(--ggs,1 ));
17 box-shadow: 0 0 0 2px 18 } 19 20 .gg-alarm::after ,
21 .gg-alarm::before { 22 content: "";
23 display: block;
24 box-sizing: border-box;
25 position: absolute;
26 width: 6px ;
27 height: 2px ;
28 background: currentColor;
29 top: -4px 30 } 31 32 .gg-alarm::before { 33 left: -5px ;
34 transform: rotate(-42deg )
35 } 36 37 .gg-alarm::after { 38 transform: rotate(42deg );
39 right: -5px 40 }
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="M5.45887 2 L1 6.01478 L2.33826 7.50107 L6.79713 3.48629 L5.45887 2 Z" 10 fill="currentColor" 11 /> 12 <path d="M11 8 H13 V12 H16 V14 H11 V8 Z" fill="currentColor" /> 13 <path 14 fill-rule="evenodd" 15 clip-rule="evenodd" 16 d="M3 12 C3 7.02944 7.02944 3 12 3 C16.9706 3 21 7.02944 21 12 C21 16.9706 16.9706 21 12 21 C7.02944 21 3 16.9706 3 12 ZM5 12 C5 8.13401 8.13401 5 12 5 C15.866 5 19 8.13401 19 12 C19 15.866 15.866 19 12 19 C8.13401 19 5 15.866 5 12 Z" 17 fill="currentColor" 18 /> 19 <path 20 d="M18.5411 2 L23 6.01478 L21.6617 7.50107 L17.2029 3.48629 L18.5411 2 Z" 21 fill="currentColor" 22 /> 23 </svg> 24
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledAlarm = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat 4.5px 6px /5px 7 2px , 8 linear-gradient(to left, currentColor 7px , transparent 0 ) no-repeat 4.5px 2px /2px 6px ; 9 box-sizing: border-box;10 position: relative;11 display: block;12 width: 16px ;13 height: 16px ;14 border-radius: 100% ;15 border: 2px solid transparent;16 transform: scale(var(--ggs, 1 ));17 box-shadow: 0 0 0 2px ;18 } 19 &::after , 20 &::before { 21 content: '';22 display: block;23 box-sizing: border-box;24 position: absolute;25 width: 6px ;26 height: 2px ;27 background: currentColor;28 top: -4px ;29 } 30 &::before { 31 left: -5px ;32 transform: rotate(-42deg );33 } 34 &::after { 35 transform: rotate(42deg );36 right: -5px ;37 } 38 ` 39 40 export const Alarm = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledAlarm { ...props} ref={ ref} icon-role="alarm" /> 45 </> 46 ) 47 } , 48 ) 49
Alarm developed into a magic pure CSS icon created by practicing features like: background, width, height, border-radius, border, transform, box-shadow, background,
