Disc multimedia
1 .gg-disc,
2 .gg-disc::after ,
3 .gg-disc::before { 4 display: block;
5 box-sizing: border-box;
6 border: 2px solid;
7 border-radius: 50% 8 } 9 10 .gg-disc { 11 border-top-color: transparent;
12 border-bottom-color: transparent;
13 transform: rotate(45deg ) scale(var(--ggs,1 ));
14 position: relative;
15 width: 14px ;
16 height: 14px 17 } 18 19 .gg-disc::after ,
20 .gg-disc::before { 21 content: "";
22 position: absolute;
23 width: 6px ;
24 height: 6px ;
25 top: 2px ;
26 left: 2px 27 } 28 29 .gg-disc::after { 30 width: 22px ;
31 height: 22px ;
32 border-radius: 100% ;
33 top: -6px ;
34 left: -6px 35 }
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="M12 9 C10.3431 9 9 10.3431 9 12 C9 13.6569 10.3431 15 12 15 C13.6569 15 15 13.6569 15 12 C15 10.3431 13.6569 9 12 9 ZM11 12 C11 12.5523 11.4477 13 12 13 C12.5523 13 13 12.5523 13 12 C13 11.4477 12.5523 11 12 11 C11.4477 11 11 11.4477 11 12 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M5 12 C5 8.13401 8.13401 5 12 5 V7 C9.23858 7 7 9.23858 7 12 H5 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M12 17 C14.7614 17 17 14.7614 17 12 H19 C19 15.866 15.866 19 12 19 V17 Z" 20 fill="currentColor" 21 /> 22 <path 23 fill-rule="evenodd" 24 clip-rule="evenodd" 25 d="M12 1 C5.92487 1 1 5.92487 1 12 C1 18.0751 5.92487 23 12 23 C18.0751 23 23 18.0751 23 12 C23 5.92487 18.0751 1 12 1 ZM3 12 C3 16.9706 7.02944 21 12 21 C16.9706 21 21 16.9706 21 12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 Z" 26 fill="currentColor" 27 /> 28 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDisc = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border: 2px solid;11 border-radius: 50% ;12 } 13 & { 14 border-top-color: transparent;15 border-bottom-color: transparent;16 transform: rotate(45deg ) scale(var(--ggs, 1 ));17 position: relative;18 width: 14px ;19 height: 14px ;20 } 21 &::after , 22 &::before { 23 content: '';24 position: absolute;25 width: 6px ;26 height: 6px ;27 top: 2px ;28 left: 2px ;29 } 30 &::after { 31 width: 22px ;32 height: 22px ;33 border-radius: 100% ;34 top: -6px ;35 left: -6px ;36 } 37 ` 38 39 export const Disc = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledDisc { ...props} ref={ ref} icon-role="disc" /> 44 </> 45 ) 46 } , 47 ) 48
Disc developed into an amazing CSS icon built by practicing attributes as follows: .gg-disc, border, border-radius, border-bottom-color, transform, width, height,
