Shape Hexagon shapes design
1 .gg-shape-hexagon,
2 .gg-shape-hexagon::after ,
3 .gg-shape-hexagon::before { 4 display: block;
5 box-sizing: border-box;
6 width: 18px ;
7 height: 10px ;
8 border-left: 3px solid currentColor;
9 border-right: 3px solid currentColor
10 } 11 12 .gg-shape-hexagon { 13 position: relative;
14 transform: scale(var(--ggs,1 ))
15 } 16 17 .gg-shape-hexagon::after ,
18 .gg-shape-hexagon::before { 19 content: "";
20 position: absolute;
21 left: -3px 22 } 23 24 .gg-shape-hexagon::before { 25 transform: rotate(60deg )
26 } 27 28 .gg-shape-hexagon::after { 29 transform: rotate(-60deg )
30 }
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="M6 15.2348 L12 18.5681 L18 15.2348 V8.76521 L12 5.43188 L6 8.76521 V15.2348 ZM12 2 L3 7 V17 L12 22 L21 17 V7 L12 2 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledShapeHexagon = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 18px ;11 height: 10px ;12 border-left: 3px solid currentColor;13 border-right: 3px solid currentColor;14 } 15 & { 16 position: relative;17 transform: scale(var(--ggs, 1 ));18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 left: -3px ;24 } 25 &::before { 26 transform: rotate(60deg );27 } 28 &::after { 29 transform: rotate(-60deg );30 } 31 ` 32 33 export const ShapeHexagon = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledShapeHexagon { ...props} ref={ ref} icon-role="shape-hexagon" /> 38 </> 39 ) 40 } , 41 ) 42
Shape Hexagon turned into a pure CSS icon created by adopting features like: .gg-shape-hexagon, width, height, border-left, border-right, transform, .gg-shape-hexagon,
