Play List interface music multimedia
1 .gg-play-list { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 12px ;
7 height: 6px ;
8 border-top: 0 solid transparent;
9 border-bottom: 2px solid transparent;
10 box-shadow:
11 inset 0 -2px 0 ,
12 -2px 4px 0 -2px ,
13 0 -2px 0 0 14 } 15 16 .gg-play-list::after { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 0 ;
22 height: 0 ;
23 border-top: 3px solid transparent;
24 border-bottom: 3px solid transparent;
25 border-left: 5px solid;
26 top: 6px ;
27 right: -3px 28 }
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="M16 5 H4 V7 H16 V5 Z" fill="currentColor" /> 9 <path d="M16 9 H4 V11 H16 V9 Z" fill="currentColor" /> 10 <path d="M4 13 H12 V15 H4 V13 Z" fill="currentColor" /> 11 <path d="M20 16 L14 13 V19 L20 16 Z" fill="currentColor" /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPlayList = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 12px ;11 height: 6px ;12 border-top: 0 solid transparent;13 border-bottom: 2px solid transparent;14 box-shadow: inset 0 -2px 0 , -2px 4px 0 -2px , 0 -2px 0 0 ;15 } 16 &::after { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 0 ;22 height: 0 ;23 border-top: 3px solid transparent;24 border-bottom: 3px solid transparent;25 border-left: 5px solid;26 top: 6px ;27 right: -3px ;28 } 29 ` 30 31 export const PlayList = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledPlayList { ...props} ref={ ref} icon-role="play-list" /> 36 </> 37 ) 38 } , 39 ) 40
Play List became a magic 100% CSS icon made by applying attributes as follows: transform, width, height, border-top, border-bottom, box-shadow, border-left,
