Signal devices multimedia
1 .gg-signal,
2 .gg-signal::after ,
3 .gg-signal::before { 4 display: block;
5 box-sizing: border-box;
6 width: 2px ;
7 border-radius: 4px ;
8 background: currentColor
9 } 10 11 .gg-signal { 12 position: relative;
13 transform: scale(var(--ggs,1 ));
14 height: 8px 15 } 16 17 .gg-signal::after ,
18 .gg-signal::before { 19 content: "";
20 position: absolute
21 } 22 23 .gg-signal::before { 24 height: 12px ;
25 left: 4px ;
26 bottom: 0 27 } 28 29 .gg-signal::after { 30 height: 4px ;
31 left: -4px ;
32 bottom: 0 33 }
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="M15 7 C15 6.44772 15.4477 6 16 6 C16.5523 6 17 6.44772 17 7 V17 C17 17.5523 16.5523 18 16 18 C15.4477 18 15 17.5523 15 17 V7 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M7 15 C7 14.4477 7.44772 14 8 14 C8.55228 14 9 14.4477 9 15 V17 C9 17.5523 8.55228 18 8 18 C7.44772 18 7 17.5523 7 17 V15 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M12 10 C11.4477 10 11 10.4477 11 11 V17 C11 17.5523 11.4477 18 12 18 C12.5523 18 13 17.5523 13 17 V11 C13 10.4477 12.5523 10 12 10 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSignal = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 2px ;11 border-radius: 4px ;12 background: currentColor;13 } 14 & { 15 position: relative;16 transform: scale(var(--ggs, 1 ));17 height: 8px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 } 24 &::before { 25 height: 12px ;26 left: 4px ;27 bottom: 0 ;28 } 29 &::after { 30 height: 4px ;31 left: -4px ;32 bottom: 0 ;33 } 34 ` 35 36 export const Signal = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledSignal { ...props} ref={ ref} icon-role="signal" /> 41 </> 42 ) 43 } , 44 ) 45
Signal ended up an amazing CSS icon created by practicing attributes like: .gg-signal, width, border-radius, background, transform, height,
