Track signs interface
1 .gg-track { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 10px ;
8 border: 2px solid transparent;
9 box-shadow:
10 0 0 0 2px ,
11 inset 0 0 0 10px ;
12 border-radius: 100px 13 } 14 15 .gg-track::after ,
16 .gg-track::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 border-radius: 3px 22 } 23 24 .gg-track::before { 25 border-left: 4px solid;
26 border-right: 4px solid;
27 width: 18px ;
28 height: 2px ;
29 left: -6px ;
30 top: 2px 31 } 32 33 .gg-track::after { 34 width: 2px ;
35 height: 18px ;
36 border-top: 4px solid;
37 border-bottom: 4px solid;
38 left: 2px ;
39 top: -6px 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="M12 15 C13.6569 15 15 13.6569 15 12 C15 10.3431 13.6569 9 12 9 C10.3431 9 9 10.3431 9 12 C9 13.6569 10.3431 15 12 15 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M12 3 C12.5523 3 13 3.44772 13 4 V5.07089 C16.0657 5.5094 18.4906 7.93431 18.9291 11 H20 C20.5523 11 21 11.4477 21 12 C21 12.5523 20.5523 13 20 13 H18.9291 C18.4906 16.0657 16.0657 18.4906 13 18.9291 V20 C13 20.5523 12.5523 21 12 21 C11.4477 21 11 20.5523 11 20 V18.9291 C7.93431 18.4906 5.5094 16.0657 5.07089 13 H4 C3.44772 13 3 12.5523 3 12 C3 11.4477 3.44772 11 4 11 H5.07089 C5.5094 7.93431 7.93431 5.5094 11 5.07089 V4 C11 3.44772 11.4477 3 12 3 ZM7 12 C7 9.23858 9.23858 7 12 7 C14.7614 7 17 9.23858 17 12 C17 14.7614 14.7614 17 12 17 C9.23858 17 7 14.7614 7 12 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTrack = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 10px ;12 border: 2px solid transparent;13 box-shadow: 0 0 0 2px , inset 0 0 0 10px ;14 border-radius: 100px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 border-radius: 3px ;23 } 24 &::before { 25 border-left: 4px solid;26 border-right: 4px solid;27 width: 18px ;28 height: 2px ;29 left: -6px ;30 top: 2px ;31 } 32 &::after { 33 width: 2px ;34 height: 18px ;35 border-top: 4px solid;36 border-bottom: 4px solid;37 left: 2px ;38 top: -6px ;39 } 40 ` 41 42 export const Track = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledTrack { ...props} ref={ ref} icon-role="track" /> 47 </> 48 ) 49 } , 50 ) 51
Track became an amazing pure CSS icon made by practicing attributes like: transform, width, height, border, box-shadow, border-radius, border-right, border-top, border-bottom,
