Trees interface
1 .gg-trees { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 20px ;
8 border-left: 4px solid transparent;
9 border-right: 3px solid transparent;
10 border-top: 10px solid transparent;
11 box-shadow: inset 2px 0 0 ,inset -2px 0 0 12 } 13 14 .gg-trees::after ,
15 .gg-trees::before { 16 content: "";
17 display: block;
18 position: absolute;
19 box-sizing: border-box;
20 width: 10px ;
21 height: 16px ;
22 border: 2px solid;
23 border-radius: 8px ;
24 left: -4px ;
25 top: -10px 26 } 27 28 .gg-trees::after { 29 width: 8px ;
30 height: 12px ;
31 top: -6px ;
32 left: 4px 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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M12.7401 16.3185 C12.035 17.1126 11.0808 17.6806 10 17.9 V21 C10 21.5523 9.55228 22 9 22 C8.44772 22 8 21.5523 8 21 V17.9 C5.71776 17.4367 4 15.419 4 13 V7 C4 4.23858 6.23858 2 9 2 C11.6087 2 13.7508 3.99781 13.9797 6.54693 C14.5726 6.1993 15.2631 6 16 6 C18.2091 6 20 7.79086 20 10 V14 C20 15.8638 18.7252 17.4299 17 17.874 V21 C17 21.5523 16.5523 22 16 22 C15.4477 22 15 21.5523 15 21 V17.874 C14.0747 17.6358 13.279 17.075 12.7401 16.3185 ZM12 7 V13 C12 14.3062 11.1652 15.4175 10 15.8293 V13 C10 12.4477 9.55228 12 9 12 C8.44772 12 8 12.4477 8 13 V15.8293 C6.83481 15.4175 6 14.3062 6 13 V7 C6 5.34315 7.34315 4 9 4 C10.6569 4 12 5.34315 12 7 ZM17 15.7324 V13 C17 12.4477 16.5523 12 16 12 C15.4477 12 15 12.4477 15 13 V15.7324 C14.4022 15.3866 14 14.7403 14 14 V10 C14 8.89543 14.8954 8 16 8 C17.1046 8 18 8.89543 18 10 V14 C18 14.7403 17.5978 15.3866 17 15.7324 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTrees = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 20px ;12 border-left: 4px solid transparent;13 border-right: 3px solid transparent;14 border-top: 10px solid transparent;15 box-shadow: inset 2px 0 0 , inset -2px 0 0 ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 position: absolute;22 box-sizing: border-box;23 width: 10px ;24 height: 16px ;25 border: 2px solid;26 border-radius: 8px ;27 left: -4px ;28 top: -10px ;29 } 30 &::after { 31 width: 8px ;32 height: 12px ;33 top: -6px ;34 left: 4px ;35 } 36 ` 37 38 export const Trees = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledTrees { ...props} ref={ ref} icon-role="trees" /> 43 </> 44 ) 45 } , 46 ) 47
Trees turned into a pure CSS icon built by practicing properties such as: transform, width, height, border-left, border-right, border-top, box-shadow, border, border-radius,
