Bulb alerts interface
1 .gg-bulb { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid;
9 border-bottom-color: transparent;
10 border-radius: 100px 11 } 12 13 .gg-bulb::after ,
14 .gg-bulb::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute
19 } 20 21 .gg-bulb::before { 22 border-top: 0 ;
23 border-bottom-left-radius: 18px ;
24 border-bottom-right-radius: 18px ;
25 top: 10px ;
26 border-bottom: 2px solid transparent;
27 box-shadow:
28 0 5px 0 -2px ,
29 inset 2px 0 0 0 ,
30 inset -2px 0 0 0 ,
31 inset 0 -4px 0 -2px ;
32 width: 8px ;
33 height: 8px ;
34 left: 2px 35 } 36 37 .gg-bulb::after { 38 width: 12px ;
39 height: 2px ;
40 border-left: 3px solid;
41 border-right: 3px solid;
42 border-radius: 2px ;
43 bottom: 0 ;
44 left: 0 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="M4 9 C4 11.9611 5.60879 14.5465 8 15.9297 V15.9999 C8 18.2091 9.79086 19.9999 12 19.9999 C14.2091 19.9999 16 18.2091 16 15.9999 V15.9297 C18.3912 14.5465 20 11.9611 20 9 C20 4.58172 16.4183 1 12 1 C7.58172 1 4 4.58172 4 9 ZM16 13.4722 C17.2275 12.3736 18 10.777 18 9 C18 5.68629 15.3137 3 12 3 C8.68629 3 6 5.68629 6 9 C6 10.777 6.7725 12.3736 8 13.4722 L10 13.4713 V16 C10 17.1045 10.8954 17.9999 12 17.9999 C13.1045 17.9999 14 17.1045 14 15.9999 V13.4713 L16 13.4722 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M10 21.0064 V21 C10.5883 21.3403 11.2714 21.5351 12 21.5351 C12.7286 21.5351 13.4117 21.3403 14 21 V21.0064 C14 22.111 13.1046 23.0064 12 23.0064 C10.8954 23.0064 10 22.111 10 21.0064 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBulb = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid;13 border-bottom-color: transparent;14 border-radius: 100px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 } 23 &::before { 24 border-top: 0 ;25 border-bottom-left-radius: 18px ;26 border-bottom-right-radius: 18px ;27 top: 10px ;28 border-bottom: 2px solid transparent;29 box-shadow: 0 5px 0 -2px , inset 2px 0 0 0 , inset -2px 0 0 0 , inset 0 -4px 0 -2px ;30 width: 8px ;31 height: 8px ;32 left: 2px ;33 } 34 &::after { 35 width: 12px ;36 height: 2px ;37 border-left: 3px solid;38 border-right: 3px solid;39 border-radius: 2px ;40 bottom: 0 ;41 left: 0 ;42 } 43 ` 44 45 export const Bulb = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledBulb { ...props} ref={ ref} icon-role="bulb" /> 50 </> 51 ) 52 } , 53 ) 54
Bulb ended up a pure CSS icon made by using attributes as follows: transform, width, height, border, border-bottom-color, border-radius, border-bottom, box-shadow, border-left, border-right,
