Database interface multimedia
1 .gg-database { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 14px ;
8 border: 2px solid transparent;
9 border-top: 2px solid transparent;
10 border-bottom: 2px solid transparent;
11 border-left: 6px solid transparent;
12 box-shadow: 0 0 0 2px ,
13 inset 0 2px 0 0 ,
14 inset 0 -2px 0 0 ;
15 border-radius: 1px 16 } 17 18 .gg-database::after ,
19 .gg-database::before { 20 content: "";
21 display: block;
22 box-sizing: border-box;
23 position: absolute
24 } 25 26 .gg-database::before { 27 background: currentColor;
28 width: 20px ;
29 height: 2px ;
30 top: 4px ;
31 left: -8px 32 } 33 34 .gg-database::after { 35 width: 2px ;
36 height: 10px ;
37 border-bottom: 2px solid;
38 border-top: 2px solid;
39 top: 0 ;
40 left: -4px 41 }
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="M5 9 V7 H7 V9 H5 Z" fill="currentColor" /> 9 <path d="M9 9 H19 V7 H9 V9 Z" fill="currentColor" /> 10 <path d="M5 15 V17 H7 V15 H5 Z" fill="currentColor" /> 11 <path d="M19 17 H9 V15 H19 V17 Z" fill="currentColor" /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M1 6 C1 4.34315 2.34315 3 4 3 H20 C21.6569 3 23 4.34315 23 6 V18 C23 19.6569 21.6569 21 20 21 H4 C2.34315 21 1 19.6569 1 18 V6 ZM4 5 H20 C20.5523 5 21 5.44772 21 6 V11 H3 V6 C3 5.44772 3.44772 5 4 5 ZM3 13 V18 C3 18.5523 3.44772 19 4 19 H20 C20.5523 19 21 18.5523 21 18 V13 H3 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDatabase = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 14px ;12 border: 2px solid transparent;13 border-top: 2px solid transparent;14 border-bottom: 2px solid transparent;15 border-left: 6px solid transparent;16 box-shadow: 0 0 0 2px , inset 0 2px 0 0 , inset 0 -2px 0 0 ;17 border-radius: 1px ;18 } 19 &::after , 20 &::before { 21 content: '';22 display: block;23 box-sizing: border-box;24 position: absolute;25 } 26 &::before { 27 background: currentColor;28 width: 20px ;29 height: 2px ;30 top: 4px ;31 left: -8px ;32 } 33 &::after { 34 width: 2px ;35 height: 10px ;36 border-bottom: 2px solid;37 border-top: 2px solid;38 top: 0 ;39 left: -4px ;40 } 41 ` 42 43 export const Database = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledDatabase { ...props} ref={ ref} icon-role="database" /> 48 </> 49 ) 50 } , 51 ) 52
Database became a 100% CSS icon built by practicing attributes as follows: transform, width, height, border, border-top, border-bottom, border-left, box-shadow, border-radius,
