Ui Kit multimedia interface
1 .gg-ui-kit,
2 .gg-ui-kit::after ,
3 .gg-ui-kit::before { 4 display: block;
5 box-sizing: border-box
6 } 7 8 .gg-ui-kit { 9 position: relative;
10 transform: scale(var(--ggs,1 ));
11 width: 10px ;
12 height: 16px ;
13 border-radius: 3px ;
14 border: 2px solid
15 } 16 17 .gg-ui-kit::after ,
18 .gg-ui-kit::before { 19 content: "";
20 position: absolute;
21 border: 2px solid;
22 width: 6px ;
23 height: 12px 24 } 25 26 .gg-ui-kit::before { 27 border-right: 0 ;
28 border-top-left-radius: 3px ;
29 border-bottom-left-radius: 3px ;
30 transform:
31 perspective(10px )
32 rotateY(30deg );
33 left: -8px 34 } 35 36 .gg-ui-kit::after { 37 border-top-right-radius: 3px ;
38 border-bottom-right-radius: 3px ;
39 transform:
40 perspective(10px )
41 rotateY(-30deg );
42 border-left: 0 ;
43 right: -8px 44 }
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 6 H10 C9.44772 6 9 6.44772 9 7 V17 C9 17.5523 9.44772 18 10 18 H14 C14.5523 18 15 17.5523 15 17 V7 C15 6.44772 14.5523 6 14 6 ZM10 4 C8.34315 4 7 5.34315 7 7 V17 C7 18.6569 8.34315 20 10 20 H14 C15.6569 20 17 18.6569 17 17 V7 C17 5.34315 15.6569 4 14 4 H10 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M6 7.45936 L3.4932 7.04156 C1.6646 6.73679 0 8.14692 0 10.0007 V14.918 C0 16.7718 1.6646 18.1819 3.4932 17.8772 L6 17.4594 V15.4318 L3.1644 15.9044 C2.55487 16.006 2 15.5359 2 14.918 V10.0007 C2 9.3828 2.55487 8.91276 3.1644 9.01435 L6 9.48695 V7.45936 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M18 7.45936 L20.5068 7.04156 C22.3354 6.73679 24 8.14692 24 10.0007 V14.918 C24 16.7718 22.3354 18.1819 20.5068 17.8772 L18 17.4594 V15.4318 L20.8356 15.9044 C21.4451 16.006 22 15.5359 22 14.918 V10.0007 C22 9.3828 21.4451 8.91276 20.8356 9.01435 L18 9.48695 V7.45936 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledUiKit = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 } 11 & { 12 position: relative;13 transform: scale(var(--ggs, 1 ));14 width: 10px ;15 height: 16px ;16 border-radius: 3px ;17 border: 2px solid;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 border: 2px solid;24 width: 6px ;25 height: 12px ;26 } 27 &::before { 28 border-right: 0 ;29 border-top-left-radius: 3px ;30 border-bottom-left-radius: 3px ;31 transform: perspective(10px ) rotateY(30deg );32 left: -8px ;33 } 34 &::after { 35 border-top-right-radius: 3px ;36 border-bottom-right-radius: 3px ;37 transform: perspective(10px ) rotateY(-30deg );38 border-left: 0 ;39 right: -8px ;40 } 41 ` 42 43 export const UiKit = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledUiKit { ...props} ref={ ref} icon-role="ui-kit" /> 48 </> 49 ) 50 } , 51 ) 52
Ui Kit turned into an amazing 100% CSS icon created by adopting features as follows: .gg-ui-kit, transform, width, height, border-radius, border, border-left,
