Controller interface devices arrows
1 .gg-controller { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 8px ;
7 height: 8px ;
8 border: 2px solid;
9 border-radius: 100px 10 } 11 12 .gg-controller::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute;
17 width: 14px ;
18 height: 14px ;
19 box-shadow:
20 -6px -6px 0 -4px ,
21 6px 6px 0 -4px ,
22 6px -6px 0 -4px ,
23 -6px 6px 0 -4px ;
24 left: -5px ;
25 top: -5px ;
26 transform: rotate(45deg )
27 }
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="M14.8284 6.34313 L16.2426 4.92892 L12 0.686279 L7.75735 4.92892 L9.17156 6.34313 L12 3.51471 L14.8284 6.34313 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M4.92892 16.2426 L6.34313 14.8284 L3.51471 12 L6.34313 9.17156 L4.92892 7.75735 L0.686279 12 L4.92892 16.2426 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M7.75735 19.0711 L12 23.3137 L16.2426 19.0711 L14.8284 17.6568 L12 20.4853 L9.17156 17.6568 L7.75735 19.0711 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M17.6568 9.17156 L20.4853 12 L17.6568 14.8284 L19.0711 16.2426 L23.3137 12 L19.0711 7.75735 L17.6568 9.17156 Z" 22 fill="currentColor" 23 /> 24 <path 25 fill-rule="evenodd" 26 clip-rule="evenodd" 27 d="M12 8 C14.2091 8 16 9.79086 16 12 C16 14.2091 14.2091 16 12 16 C9.79086 16 8 14.2091 8 12 C8 9.79086 9.79086 8 12 8 ZM12 10 C13.1046 10 14 10.8954 14 12 C14 13.1046 13.1046 14 12 14 C10.8954 14 10 13.1046 10 12 C10 10.8954 10.8954 10 12 10 Z" 28 fill="currentColor" 29 /> 30 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledController = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 8px ;11 height: 8px ;12 border: 2px solid;13 border-radius: 100px ;14 } 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 14px ;21 height: 14px ;22 box-shadow: -6px -6px 0 -4px , 6px 6px 0 -4px , 6px -6px 0 -4px , -6px 6px 0 -4px ;23 left: -5px ;24 top: -5px ;25 transform: rotate(45deg );26 } 27 ` 28 29 export const Controller = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 30 (props, ref) => { 31 return ( 32 <> 33 <StyledController { ...props} ref={ ref} icon-role="controller" /> 34 </> 35 ) 36 } , 37 ) 38
Controller is an amazing 100% CSS icon created by using attributes like: transform, width, height, border, border-radius, box-shadow,
