Stack interface content
1 .gg-stack,
2 .gg-stack::after ,
3 .gg-stack::before { 4 display: block;
5 box-sizing: border-box;
6 width: 14px ;
7 height: 14px ;
8 border: 2px solid
9 } 10 11 .gg-stack { 12 margin-right: 8px ;
13 margin-top: 8px ;
14 transform: scale(var(--ggs,1 ));
15 position: relative
16 } 17 18 .gg-stack::after ,
19 .gg-stack::before { 20 content: "";
21 position: absolute;
22 border-left: 0 ;
23 border-bottom: 0 ;
24 right: -5px ;
25 top: -5px 26 } 27 28 .gg-stack::before { 29 right: -8px ;
30 top: -8px 31 }
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 d="M20 4 V16 H22 V2 H8 V4 H20 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M2 8 V22 H16 V8 H2 ZM14 10 H4 V20 H14 V10 Z" 13 fill="currentColor" 14 /> 15 <path d="M17 7 H5 V5 H19 V19 H17 V7 Z" fill="currentColor" /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledStack = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 14px ;11 height: 14px ;12 border: 2px solid;13 } 14 & { 15 margin-right: 8px ;16 margin-top: 8px ;17 transform: scale(var(--ggs, 1 ));18 position: relative;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 border-left: 0 ;25 border-bottom: 0 ;26 right: -5px ;27 top: -5px ;28 } 29 &::before { 30 right: -8px ;31 top: -8px ;32 } 33 ` 34 35 export const Stack = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledStack { ...props} ref={ ref} icon-role="stack" /> 40 </> 41 ) 42 } , 43 ) 44
Stack turned into a 100% CSS icon made by applying features as follows: .gg-stack, width, height, border, transform, border-left, border-bottom,
