Format Color interface content
1 .gg-format-color { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 9px ;
6 height: 2px ;
7 background: currentColor;
8 transform: scale(var(--ggs,1 ));
9 border-radius: 3px ;
10 box-shadow:
11 -2px 8px 0 0 ,
12 2px 8px 0 0 13 } 14 15 .gg-format-color::after ,
16 .gg-format-color::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 border-radius: 3px ;
22 width: 2px ;
23 height: 14px ;
24 background: currentColor;
25 top: -8px 26 } 27 28 .gg-format-color::before { 29 transform: rotate(25deg );
30 left: 1px 31 } 32 33 .gg-format-color::after { 34 transform: rotate(-25deg );
35 right: 1px 36 }
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.9479 3.20946 C12.7721 2.83236 12.391 2.61645 11.9997 2.63269 C11.6086 2.61666 11.2278 2.83255 11.0521 3.20948 L5.1354 15.8978 C4.90199 16.3983 5.11855 16.9933 5.61909 17.2267 C6.11963 17.4601 6.71461 17.2436 6.94801 16.743 L8.39869 13.632 H15.6013 L17.052 16.743 C17.2854 17.2435 17.8804 17.4601 18.3809 17.2267 C18.8814 16.9933 19.098 16.3983 18.8646 15.8978 L12.9479 3.20946 ZM14.6687 11.632 L12 5.909 L9.33131 11.632 H14.6687 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M6 19.3682 C5.44772 19.3682 5 19.816 5 20.3682 C5 20.9205 5.44772 21.3682 6 21.3682 H18 C18.5523 21.3682 19 20.9205 19 20.3682 C19 19.816 18.5523 19.3682 18 19.3682 H6 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFormatColor = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 9px ;10 height: 2px ;11 background: currentColor;12 transform: scale(var(--ggs, 1 ));13 border-radius: 3px ;14 box-shadow: -2px 8px 0 0 , 2px 8px 0 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 border-radius: 3px ;23 width: 2px ;24 height: 14px ;25 background: currentColor;26 top: -8px ;27 } 28 &::before { 29 transform: rotate(25deg );30 left: 1px ;31 } 32 &::after { 33 transform: rotate(-25deg );34 right: 1px ;35 } 36 ` 37 38 export const FormatColor = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledFormatColor { ...props} ref={ ref} icon-role="format-color" /> 43 </> 44 ) 45 } , 46 ) 47
Format Color became a wonderful 100% CSS icon created by applying attributes like: width, height, background, transform, border-radius, box-shadow,
