Play List Check multimedia music interface
1 .gg-play-list-check { 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-check::after { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 5px ;
22 height: 8px ;
23 border-right: 2px solid;
24 border-bottom: 2px solid;
25 transform: rotate(45deg );
26 top: 2px ;
27 right: -4px 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="M15 6 H3 V8 H15 V6 Z" fill="currentColor" /> 9 <path d="M15 10 H3 V12 H15 V10 Z" fill="currentColor" /> 10 <path d="M3 14 H11 V16 H3 V14 Z" fill="currentColor" /> 11 <path 12 d="M11.9905 15.025 L13.4049 13.6106 L15.526 15.7321 L19.7687 11.4895 L21.1829 12.9037 L15.526 18.5606 L11.9905 15.025 Z" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPlayListCheck = 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: 5px ;22 height: 8px ;23 border-right: 2px solid;24 border-bottom: 2px solid;25 transform: rotate(45deg );26 top: 2px ;27 right: -4px ;28 } 29 ` 30 31 export const PlayListCheck = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledPlayListCheck { ...props} ref={ ref} icon-role="play-list-check" /> 36 </> 37 ) 38 } , 39 ) 40
Play List Check turned into a CSS icon created by applying features as follows: transform, width, height, border-top, border-bottom, box-shadow, border-right,
