Sketch interface multimedia
1 .gg-sketch { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 18px ;
8 background:
9 linear-gradient(
10 to left,
11 currentColor 16px ,
12 transparent 0 13 ) no-repeat center 6px /6px 2px 14 } 15 16 .gg-sketch::after ,
17 .gg-sketch::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 width: 14px ;
23 border: 2px solid;
24 left: 4px 25 } 26 27 .gg-sketch::before { 28 height: 14px ;
29 border-top-color: transparent;
30 border-right-color: transparent;
31 transform:
32 rotate(-45deg )
33 skew(-8deg ,-8deg );
34 bottom: 4px 35 } 36 37 .gg-sketch::after { 38 height: 7px ;
39 border-bottom: 0 ;
40 transform:
41 perspective(12px )
42 rotateX(35deg )
43 }
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="M5.20879 3 H18.903 L20.1118 10.2527 L12.0559 21.1858 L4 10.2527 L5.20879 3 ZM6.90304 5 L6.11184 9.74726 L12.0559 17.8142 L18 9.74726 L17.2088 5 H6.90304 Z" 12 fill="currentColor" 13 /> 14 <path d="M8.05592 8 H16.0559 V10 H8.05592 V8 Z" fill="currentColor" /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSketch = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 18px ;12 background: linear-gradient(to left, currentColor 16px , transparent 0 ) no-repeat center 6px /6px 13 2px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 14px ;22 border: 2px solid;23 left: 4px ;24 } 25 &::before { 26 height: 14px ;27 border-top-color: transparent;28 border-right-color: transparent;29 transform: rotate(-45deg ) skew(-8deg , -8deg );30 bottom: 4px ;31 } 32 &::after { 33 height: 7px ;34 border-bottom: 0 ;35 transform: perspective(12px ) rotateX(35deg );36 } 37 ` 38 39 export const Sketch = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledSketch { ...props} ref={ ref} icon-role="sketch" /> 44 </> 45 ) 46 } , 47 ) 48
Sketch became a magic 100% CSS icon made by using features such as: transform, width, height, background, border, border-top-color, border-right-color, border-bottom,
