Album interface multimedia
1 .gg-album { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 18px ;
6 height: 18px ;
7 transform: scale(var(--ggs,1 ));
8 border-left: 7px solid transparent;
9 border-right: 3px solid transparent;
10 border-bottom: 8px solid transparent;
11 box-shadow: 0 0 0 2px ,
12 inset 6px 4px 0 -4px ,
13 inset -6px 4px 0 -4px ;
14 border-radius: 3px 15 } 16 17 .gg-album::after ,
18 .gg-album::before { 19 content: "";
20 display: block;
21 box-sizing: border-box;
22 position: absolute;
23 width: 2px ;
24 height: 5px ;
25 background: currentColor;
26 transform: rotate(46deg );
27 top: 5px ;
28 right: 4px 29 } 30 31 .gg-album::after { 32 transform: rotate(-46deg );
33 right: 2px 34 }
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="M2 19 C2 20.6569 3.34315 22 5 22 H19 C20.6569 22 22 20.6569 22 19 V5 C22 3.34315 20.6569 2 19 2 H5 C3.34315 2 2 3.34315 2 5 V19 ZM20 19 C20 19.5523 19.5523 20 19 20 H5 C4.44772 20 4 19.5523 4 19 V5 C4 4.44772 4.44772 4 5 4 H10 V12.0111 L12.395 12.0112 L14.0001 9.86419 L15.6051 12.0112 H18.0001 L18 4 H19 C19.5523 4 20 4.44772 20 5 V19 ZM16 4 H12 V9.33585 L14.0001 6.66046 L16 9.33571 V4 Z" 12 fill="currentColor" 13 /> 14 </svg> 15
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledAlbum = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 18px ;10 height: 18px ;11 transform: scale(var(--ggs, 1 ));12 border-left: 7px solid transparent;13 border-right: 3px solid transparent;14 border-bottom: 8px solid transparent;15 box-shadow: 0 0 0 2px , inset 6px 4px 0 -4px , inset -6px 4px 0 -4px ;16 border-radius: 3px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 width: 2px ;25 height: 5px ;26 background: currentColor;27 transform: rotate(46deg );28 top: 5px ;29 right: 4px ;30 } 31 &::after { 32 transform: rotate(-46deg );33 right: 2px ;34 } 35 ` 36 37 export const Album = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledAlbum { ...props} ref={ ref} icon-role="album" /> 42 </> 43 ) 44 } , 45 ) 46
Album ended up an amazing CSS icon made by using properties such as: width, height, transform, border-left, border-right, border-bottom, box-shadow, border-radius, background,
