Layout Pin
1K Views
46 Downloads - 8 API calls
25 Lines - 500 Bytes
Apr 23, 2020 content interface design
1 .gg-layout-pin { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-layout-pin::after { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute;
17 width: 6px ;
18 height: 6px ;
19 border-radius: 4px ;
20 top: 3px ;
21 left: 3px ;
22 box-shadow:
23 -7px 0 0 ,7px 0 0 ,
24 0 -7px 0 ,0 7px 0 25 }
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="M16.9307 4.01587 H14.7655 C14.3582 2.84239 13.2428 2 11.9307 2 C10.6185 2 9.50313 2.84239 9.09581 4.01587 H6.93066 C5.27381 4.01587 3.93066 5.35901 3.93066 7.01587 V9.21205 C2.80183 9.64283 2 10.7357 2 12.0159 C2 13.296 2.80183 14.3889 3.93066 14.8197 V17.0159 C3.93066 18.6727 5.27381 20.0159 6.93066 20.0159 H9.08467 C9.48247 21.2064 10.6064 22.0645 11.9307 22.0645 C13.255 22.0645 14.3789 21.2064 14.7767 20.0159 H16.9307 C18.5875 20.0159 19.9307 18.6727 19.9307 17.0159 V14.8446 C21.095 14.4322 21.929 13.3214 21.929 12.0159 C21.929 10.7103 21.095 9.5995 19.9307 9.18718 V7.01587 C19.9307 5.35901 18.5875 4.01587 16.9307 4.01587 ZM5.93066 14.8687 V17.0159 C5.93066 17.5682 6.37838 18.0159 6.93066 18.0159 H9.11902 C9.54426 16.8761 10.6427 16.0645 11.9307 16.0645 C13.2187 16.0645 14.3171 16.8761 14.7423 18.0159 H16.9307 C17.4829 18.0159 17.9307 17.5682 17.9307 17.0159 V14.8458 C16.7646 14.4344 15.929 13.3227 15.929 12.0159 C15.929 10.709 16.7646 9.59732 17.9307 9.18597 V7.01587 C17.9307 6.46358 17.4829 6.01587 16.9307 6.01587 H14.7543 C14.338 7.17276 13.2309 8 11.9307 8 C10.6304 8 9.52331 7.17276 9.10703 6.01587 H6.93066 C6.37838 6.01587 5.93066 6.46358 5.93066 7.01587 V9.16302 C7.13193 9.55465 8 10.6839 8 12.0159 C8 13.3479 7.13193 14.4771 5.93066 14.8687 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLayoutPin = 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: 16px ;12 border: 2px solid;13 border-radius: 3px ;14 } 15 &::after { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 6px ;21 height: 6px ;22 border-radius: 4px ;23 top: 3px ;24 left: 3px ;25 box-shadow: -7px 0 0 , 7px 0 0 , 0 -7px 0 , 0 7px 0 ;26 } 27 ` 28 29 export const LayoutPin = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 30 (props, ref) => { 31 return ( 32 <> 33 <StyledLayoutPin { ...props} ref={ ref} icon-role="layout-pin" /> 34 </> 35 ) 36 } , 37 ) 38
Layout Pin turned into an amazing 100% CSS icon created by applying properties as follows: transform, width, height, border, border-radius, box-shadow, Fun to know, it has: 25 Lines of code at 500b & 345b after compiling. Pretty marvelous 💎 don't you think ?.