Carousel interface
1 .gg-carousel { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 18px 8 } 9 10 .gg-carousel::after ,
11 .gg-carousel::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 border-radius: 3px 17 } 18 19 .gg-carousel::before { 20 width: 22px ;
21 height: 10px ;
22 border: 2px solid
23 } 24 25 .gg-carousel::after { 26 width: 10px ;
27 height: 2px ;
28 background: currentColor;
29 top: 16px ;
30 left: 6px ;
31 box-shadow:
32 -3px -4px 0 ,
33 3px -4px 0 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="M4 3 C2.34315 3 1 4.34315 1 6 V10 C1 11.6569 2.34315 13 4 13 H20 C21.6569 13 23 11.6569 23 10 V6 C23 4.34315 21.6569 3 20 3 H4 ZM20 5 H4 C3.44772 5 3 5.44772 3 6 V10 C3 10.5523 3.44772 11 4 11 H20 C20.5523 11 21 10.5523 21 10 V6 C21 5.44771 20.5523 5 20 5 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M7 20 C7 19.4477 7.44772 19 8 19 H16 C16.5523 19 17 19.4477 17 20 C17 20.5523 16.5523 21 16 21 H8 C7.44772 21 7 20.5523 7 20 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M5 15 C4.44772 15 4 15.4477 4 16 C4 16.5523 4.44772 17 5 17 H19 C19.5523 17 20 16.5523 20 16 C20 15.4477 19.5523 15 19 15 H5 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCarousel = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 18px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 border-radius: 3px ;20 } 21 &::before { 22 width: 22px ;23 height: 10px ;24 border: 2px solid;25 } 26 &::after { 27 width: 10px ;28 height: 2px ;29 background: currentColor;30 top: 16px ;31 left: 6px ;32 box-shadow: -3px -4px 0 , 3px -4px 0 ;33 } 34 ` 35 36 export const Carousel = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledCarousel { ...props} ref={ ref} icon-role="carousel" /> 41 </> 42 ) 43 } , 44 ) 45
Carousel developed into a wonderful CSS icon built by adopting attributes like: transform, width, height, border-radius, border, background, box-shadow,
