Duplicate content
1 .gg-duplicate { 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 border-bottom: 4px solid transparent;
10 box-shadow: 0 0 0 2px ,inset 0 -2px 0 0 ;
11 margin-left: -4px ;
12 margin-top: 4px 13 } 14 15 .gg-duplicate::after ,
16 .gg-duplicate::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute
21 } 22 23 .gg-duplicate::before { 24 background: currentColor;
25 left: 2px ;
26 bottom: -2px ;
27 width: 2px ;
28 height: 6px 29 } 30 31 .gg-duplicate::after { 32 width: 14px ;
33 height: 14px ;
34 border-right: 2px solid;
35 border-top: 2px solid;
36 right: -8px ;
37 top: -8px 38 }
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="M19 5 H7 V3 H21 V17 H19 V5 Z" fill="currentColor" /> 9 <path d="M9 13 V11 H11 V13 H13 V15 H11 V17 H9 V15 H7 V13 H9 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M3 7 H17 V21 H3 V7 ZM5 9 H15 V19 H5 V9 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDuplicate = 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 border-bottom: 4px solid transparent;14 box-shadow: 0 0 0 2px , inset 0 -2px 0 0 ;15 margin-left: -4px ;16 margin-top: 4px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 } 25 &::before { 26 background: currentColor;27 left: 2px ;28 bottom: -2px ;29 width: 2px ;30 height: 6px ;31 } 32 &::after { 33 width: 14px ;34 height: 14px ;35 border-right: 2px solid;36 border-top: 2px solid;37 right: -8px ;38 top: -8px ;39 } 40 ` 41 42 export const Duplicate = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledDuplicate { ...props} ref={ ref} icon-role="duplicate" /> 47 </> 48 ) 49 } , 50 ) 51
Duplicate ended up a wonderful 100% CSS icon made by using properties like: transform, width, height, border, border-bottom, box-shadow, border-right, border-top,
