Gym interface
1 .gg-gym { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: rotate(-35deg ) scale(var(--ggs,1 ));
6 width: 8px ;
7 height: 20px ;
8 border-top: 9px solid transparent;
9 border-bottom: 9px solid transparent;
10 box-shadow: inset 0 0 0 2px 11 } 12 13 .gg-gym::after ,
14 .gg-gym::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute
19 } 20 21 .gg-gym::before { 22 box-shadow:
23 -3px 0 0 -1px ,
24 3px 0 0 -1px ,
25 inset 2px 0 0 0 ,
26 inset -2px 0 0 0 ;
27 width: 14px ;
28 height: 8px ;
29 border-left: 1px solid transparent;
30 border-right: 1px solid transparent;
31 top: -3px ;
32 left: -3px 33 } 34 35 .gg-gym::after { 36 width: 22px ;
37 height: 2px ;
38 border-left: 2px solid;
39 border-right: 2px solid;
40 top: 0 ;
41 left: -7px 42 }
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="M20.2739 9.86883 L16.8325 4.95392 L18.4708 3.80676 L21.9122 8.72167 L20.2739 9.86883 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M18.3901 12.4086 L16.6694 9.95121 L8.47783 15.687 L10.1985 18.1444 L8.56023 19.2916 L3.97162 12.7383 L5.60992 11.5912 L7.33068 14.0487 L15.5222 8.31291 L13.8015 5.8554 L15.4398 4.70825 L20.0284 11.2615 L18.3901 12.4086 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M20.7651 7.08331 L22.4034 5.93616 L21.2562 4.29785 L19.6179 5.445 L20.7651 7.08331 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M7.16753 19.046 L3.72607 14.131 L2.08777 15.2782 L5.52923 20.1931 L7.16753 19.046 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M4.38208 18.5549 L2.74377 19.702 L1.59662 18.0637 L3.23492 16.9166 L4.38208 18.5549 Z" 26 fill="currentColor" 27 /> 28 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGym = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(-35deg ) scale(var(--ggs, 1 ));10 width: 8px ;11 height: 20px ;12 border-top: 9px solid transparent;13 border-bottom: 9px solid transparent;14 box-shadow: inset 0 0 0 2px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 } 23 &::before { 24 box-shadow: -3px 0 0 -1px , 3px 0 0 -1px , inset 2px 0 0 0 , inset -2px 0 0 0 ;25 width: 14px ;26 height: 8px ;27 border-left: 1px solid transparent;28 border-right: 1px solid transparent;29 top: -3px ;30 left: -3px ;31 } 32 &::after { 33 width: 22px ;34 height: 2px ;35 border-left: 2px solid;36 border-right: 2px solid;37 top: 0 ;38 left: -7px ;39 } 40 ` 41 42 export const Gym = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledGym { ...props} ref={ ref} icon-role="gym" /> 47 </> 48 ) 49 } , 50 ) 51
Gym is a magic CSS icon built by using features like: transform, width, height, border-top, border-bottom, box-shadow, border-left, border-right,
