Website design interface
1 .gg-website { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 3px ;
10 box-shadow: 0 -1px 0 11 } 12 13 .gg-website::after ,
14 .gg-website::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 6px ;
20 top: 2px 21 } 22 23 .gg-website::before { 24 background: currentColor;
25 left: 2px ;
26 box-shadow: 0 4px 0 ,0 8px 0 ;
27 border-radius: 3px ;
28 height: 2px 29 } 30 31 .gg-website::after { 32 height: 10px ;
33 border: 2px solid;
34 right: 2px ;
35 border-radius: 1px 36 }
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="M14 7 C13.4477 7 13 7.44772 13 8 V16 C13 16.5523 13.4477 17 14 17 H18 C18.5523 17 19 16.5523 19 16 V8 C19 7.44772 18.5523 7 18 7 H14 ZM17 9 H15 V15 H17 V9 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M6 7 C5.44772 7 5 7.44772 5 8 C5 8.55228 5.44772 9 6 9 H10 C10.5523 9 11 8.55228 11 8 C11 7.44772 10.5523 7 10 7 H6 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M6 11 C5.44772 11 5 11.4477 5 12 C5 12.5523 5.44772 13 6 13 H10 C10.5523 13 11 12.5523 11 12 C11 11.4477 10.5523 11 10 11 H6 Z" 20 fill="currentColor" 21 /> 22 <path 23 d="M5 16 C5 15.4477 5.44772 15 6 15 H10 C10.5523 15 11 15.4477 11 16 C11 16.5523 10.5523 17 10 17 H6 C5.44772 17 5 16.5523 5 16 Z" 24 fill="currentColor" 25 /> 26 <path 27 fill-rule="evenodd" 28 clip-rule="evenodd" 29 d="M4 3 C2.34315 3 1 4.34315 1 6 V18 C1 19.6569 2.34315 21 4 21 H20 C21.6569 21 23 19.6569 23 18 V6 C23 4.34315 21.6569 3 20 3 H4 ZM20 5 H4 C3.44772 5 3 5.44772 3 6 V18 C3 18.5523 3.44772 19 4 19 H20 C20.5523 19 21 18.5523 21 18 V6 C21 5.44772 20.5523 5 20 5 Z" 30 fill="currentColor" 31 /> 32 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledWebsite = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 18px ;12 border: 2px solid;13 border-radius: 3px ;14 box-shadow: 0 -1px 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 6px ;23 top: 2px ;24 } 25 &::before { 26 background: currentColor;27 left: 2px ;28 box-shadow: 0 4px 0 , 0 8px 0 ;29 border-radius: 3px ;30 height: 2px ;31 } 32 &::after { 33 height: 10px ;34 border: 2px solid;35 right: 2px ;36 border-radius: 1px ;37 } 38 ` 39 40 export const Website = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledWebsite { ...props} ref={ ref} icon-role="website" /> 45 </> 46 ) 47 } , 48 ) 49
Website became a wonderful CSS icon made by applying features such as: transform, width, height, border, border-radius, box-shadow,
