Music
3K Views
70 Downloads - 19 API calls
34 Lines - 621 Bytes
Apr 23, 2020 music multimedia interface
1 .gg-music,
2 .gg-music::after ,
3 .gg-music::before { 4 display: block;
5 box-sizing: border-box;
6 border: 2px solid
7 } 8 9 .gg-music { 10 border-top-left-radius: 4px ;
11 border-top-right-radius: 4px ;
12 border-bottom: 0 ;
13 margin-top: -4px ;
14 position: relative;
15 transform: skewY(-15deg ) scale(var(--ggs,1 ));
16 width: 14px ;
17 height: 16px 18 } 19 20 .gg-music::after ,
21 .gg-music::before { 22 content: "";
23 position: absolute;
24 width: 7px ;
25 height: 7px ;
26 top: 9px ;
27 left: -7px ;
28 transform: skewY(15deg );
29 border-radius: 10px 30 } 31 32 .gg-music::after { 33 left: 5px 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="M22 6.00086 C22 3.54932 19.8148 1.6746 17.3918 2.04737 L10.3918 3.1243 C8.44044 3.4245 7 5.1035 7 7.07778 V15.8407 C6.54537 15.6248 6.0368 15.5039 5.5 15.5039 C3.567 15.5039 2 17.0709 2 19.0039 C2 20.9369 3.567 22.5039 5.5 22.5039 C7.43296 22.5039 8.99994 20.937 9 19.004 V7.07778 C9 6.09064 9.72022 5.25114 10.6959 5.10104 L17.6959 4.02412 C18.9074 3.83773 20 4.77509 20 6.00086 V12.8407 C19.5454 12.6248 19.0368 12.5039 18.5 12.5039 C16.567 12.5039 15 14.0709 15 16.0039 C15 17.9369 16.567 19.5039 18.5 19.5039 C20.433 19.5039 21.9999 17.937 22 16.004 V6.00086 ZM20 16.0039 C20 15.1755 19.3284 14.5039 18.5 14.5039 C17.6716 14.5039 17 15.1755 17 16.0039 C17 16.8323 17.6716 17.5039 18.5 17.5039 C19.3284 17.5039 19.9999 16.8323 20 16.0039 ZM7 19.0039 C7 18.1755 6.32843 17.5039 5.5 17.5039 C4.67157 17.5039 4 18.1755 4 19.0039 C4 19.8323 4.67157 20.5039 5.5 20.5039 C6.32839 20.5039 6.99994 19.8323 7 19.0039 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMusic = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border: 2px solid;11 } 12 & { 13 border-top-left-radius: 4px ;14 border-top-right-radius: 4px ;15 border-bottom: 0 ;16 margin-top: -4px ;17 position: relative;18 transform: skewY(-15deg ) scale(var(--ggs, 1 ));19 width: 14px ;20 height: 16px ;21 } 22 &::after , 23 &::before { 24 content: '';25 position: absolute;26 width: 7px ;27 height: 7px ;28 top: 9px ;29 left: -7px ;30 transform: skewY(15deg );31 border-radius: 10px ;32 } 33 &::after { 34 left: 5px ;35 } 36 ` 37 38 export const Music = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledMusic { ...props} ref={ ref} icon-role="music" /> 43 </> 44 ) 45 } , 46 ) 47
Music became a 100% CSS icon made by using features such as: .gg-music, border, border-bottom, transform, width, height, border-radius, .gg-music, Fun facts, it has: 34 Lines of code at 621b & 451b after compiling. Actually amazing 😲 for a icon designed by code.