Remote signs interface
1 .gg-remote { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-remote,
6 .gg-remote::after ,
7 .gg-remote::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 8px ;
12 height: 8px 13 } 14 15 .gg-remote::after ,
16 .gg-remote::before { 17 content: "";
18 position: absolute;
19 border-left: 2px solid;
20 border-bottom: 2px solid;
21 transform: rotate(45deg ) scaleY(1 )
22 } 23 24 .gg-remote::before { 25 left: 5px ;
26 top: -2px 27 } 28 29 .gg-remote::after { 30 transform: rotate(-45deg ) scaleX(-1 );
31 left: -5px ;
32 top: 2px 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="M17.0514 4.32178 L18.4656 5.73599 L14.223 9.97863 L18.4656 14.2213 L17.0514 15.6355 L11.3946 9.97863 L17.0514 4.32178 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M6.94864 19.6785 L5.53442 18.2643 L9.77706 14.0216 L5.53442 9.77897 L6.94864 8.36476 L12.6055 14.0216 L6.94864 19.6785 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledRemote = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 8px ;15 height: 8px ;16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 border-left: 2px solid;22 border-bottom: 2px solid;23 transform: rotate(45deg ) scaleY(1 );24 } 25 &::before { 26 left: 5px ;27 top: -2px ;28 } 29 &::after { 30 transform: rotate(-45deg ) scaleX(-1 );31 left: -5px ;32 top: 2px ;33 } 34 ` 35 36 export const Remote = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledRemote { ...props} ref={ ref} icon-role="remote" /> 41 </> 42 ) 43 } , 44 ) 45
Remote developed into a wonderful pure CSS icon built by practicing features as follows: transform, width, height, border-left, border-bottom, transform,
