Play List Add music multimedia interface
1 .gg-play-list-add { 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-add::after ,
17 .gg-play-list-add::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 width: 10px ;
23 height: 2px ;
24 background: currentColor;
25 top: 6px ;
26 right: -8px 27 } 28 29 .gg-play-list-add::before { 30 width: 2px ;
31 height: 10px ;
32 top: 2px ;
33 right: -4px 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 d="M2 5 H14 V7 H2 V5 Z" fill="currentColor" /> 9 <path d="M2 9 H14 V11 H2 V9 Z" fill="currentColor" /> 10 <path d="M10 13 H2 V15 H10 V13 Z" fill="currentColor" /> 11 <path d="M16 9 H18 V13 H22 V15 H18 V19 H16 V15 H12 V13 H16 V9 Z" fill="currentColor" /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPlayListAdd = 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 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 10px ;23 height: 2px ;24 background: currentColor;25 top: 6px ;26 right: -8px ;27 } 28 &::before { 29 width: 2px ;30 height: 10px ;31 top: 2px ;32 right: -4px ;33 } 34 ` 35 36 export const PlayListAdd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledPlayListAdd { ...props} ref={ ref} icon-role="play-list-add" /> 41 </> 42 ) 43 } , 44 ) 45
Play List Add is a magic 100% CSS icon created by applying attributes like: transform, width, height, border-top, border-bottom, box-shadow, background,
