Filters design interface
1 .gg-filters { 2 display: block;
3 box-sizing: border-box;
4 position: relative;
5 transform: scale(var(--ggs,1 ));
6 width: 19px ;
7 height: 19px ;
8 background:
9 radial-gradient(
10 circle,
11 currentColor 26% ,
12 transparent 26% 13 )
14 } 15 16 .gg-filters::after ,
17 .gg-filters::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 border: 2px solid;
23 border-radius: 100% ;
24 width: 14px ;
25 height: 14px 26 } 27 28 .gg-filters::after { 29 bottom: 0 ;
30 right: 0 31 }
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.70834 15.4397 C5.92663 16.2928 7.3222 16.7038 8.70461 16.7063 C9.17977 18.0045 10.0433 19.1753 11.2616 20.0284 C14.4284 22.2458 18.7932 21.4762 21.0107 18.3093 C23.2281 15.1425 22.4585 10.7777 19.2916 8.56024 C18.0734 7.70719 16.6778 7.29621 15.2954 7.29371 C14.8202 5.99552 13.9567 4.82467 12.7384 3.97161 C9.57158 1.75417 5.20676 2.52381 2.98931 5.69064 C0.771871 8.85748 1.54151 13.2223 4.70834 15.4397 ZM5.8555 13.8014 C6.6016 14.3239 7.44081 14.6142 8.28736 14.6875 C8.20112 13.1725 8.60464 11.6187 9.54254 10.2793 C10.4804 8.9398 11.8025 8.0292 13.2556 7.59209 C12.8972 6.82166 12.3374 6.13235 11.5913 5.60992 C9.32924 4.02603 6.21151 4.57577 4.62762 6.8378 C3.04373 9.09982 3.59347 12.2176 5.8555 13.8014 ZM18.1445 10.1985 C17.3984 9.67611 16.5592 9.38581 15.7126 9.31251 C15.7989 10.8275 15.3953 12.3813 14.4574 13.7207 C13.5195 15.0602 12.1975 15.9708 10.7444 16.4079 C11.1028 17.1783 11.6626 17.8676 12.4087 18.3901 C14.6707 19.9739 17.7885 19.4242 19.3724 17.1622 C20.9562 14.9002 20.4065 11.7824 18.1445 10.1985 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFilters = styled.i` 5 & { 6 display: block;7 box-sizing: border-box;8 position: relative;9 transform: scale(var(--ggs, 1 ));10 width: 19px ;11 height: 19px ;12 background: radial-gradient(circle, currentColor 26% , transparent 26% );13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 border: 2px solid;21 border-radius: 100% ;22 width: 14px ;23 height: 14px ;24 } 25 &::after { 26 bottom: 0 ;27 right: 0 ;28 } 29 ` 30 31 export const Filters = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledFilters { ...props} ref={ ref} icon-role="filters" /> 36 </> 37 ) 38 } , 39 ) 40
Filters ended up a magic pure CSS icon created by applying attributes like: transform, width, height, background, border, border-radius,
