Play List Search
1K Views
42 Downloads - API calls
39 Lines - 808 Bytes
Apr 23, 2020 multimedia interface music
1 .gg-play-list-search { 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-search::after ,
17 .gg-play-list-search::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 bottom: -7px 23 } 24 25 .gg-play-list-search::after { 26 width: 3px ;
27 height: 2px ;
28 background: currentColor;
29 transform: rotate(45deg );
30 right: -4px 31 } 32 33 .gg-play-list-search::before { 34 width: 6px ;
35 height: 6px ;
36 border-radius: 4px ;
37 border: 2px solid;
38 right: -3px 39 }
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.8787 4.87866 H3.87872 V6.87866 H15.8787 V4.87866 Z" fill="currentColor" /> 9 <path d="M15.8787 8.87866 H3.87872 V10.8787 H15.8787 V8.87866 Z" fill="currentColor" /> 10 <path d="M3.87872 12.8787 H11.8787 V14.8787 H3.87872 V12.8787 Z" fill="currentColor" /> 11 <path 12 fill-rule="evenodd" 13 clip-rule="evenodd" 14 d="M13.7574 12.7573 C12.5858 13.9289 12.5858 15.8284 13.7574 17 C14.681 17.9236 16.0571 18.1191 17.1722 17.5864 L18.7071 19.1213 L20.1213 17.7071 L18.5864 16.1722 C19.1191 15.057 18.9236 13.681 18 12.7573 C16.8284 11.5858 14.9289 11.5858 13.7574 12.7573 ZM15.1716 15.5858 C15.5621 15.9763 16.1953 15.9763 16.5858 15.5858 C16.9763 15.1952 16.9763 14.5621 16.5858 14.1716 C16.1953 13.781 15.5621 13.781 15.1716 14.1716 C14.7811 14.5621 14.7811 15.1952 15.1716 15.5858 Z" 15 fill="currentColor" 16 /> 17 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPlayListSearch = 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 bottom: -7px ;23 } 24 &::after { 25 width: 3px ;26 height: 2px ;27 background: currentColor;28 transform: rotate(45deg );29 right: -4px ;30 } 31 &::before { 32 width: 6px ;33 height: 6px ;34 border-radius: 4px ;35 border: 2px solid;36 right: -3px ;37 } 38 ` 39 40 export const PlayListSearch = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPlayListSearch { ...props} ref={ ref} icon-role="play-list-search" /> 45 </> 46 ) 47 } , 48 ) 49
Play List Search turned into an amazing 100% CSS icon created by practicing features such as: transform, width, height, border-top, border-bottom, box-shadow, background, border-radius, border, Some stats, it has: 39 Lines of code at 808b & 585b minified. Actually stunning 🤩 for a CSS designed icon.