diff options
Diffstat (limited to 'src/components/Icons/Search')
| -rw-r--r-- | src/components/Icons/Search/Search.module.scss | 31 | ||||
| -rw-r--r-- | src/components/Icons/Search/Search.tsx | 30 |
2 files changed, 61 insertions, 0 deletions
diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss new file mode 100644 index 0000000..5016ae1 --- /dev/null +++ b/src/components/Icons/Search/Search.module.scss @@ -0,0 +1,31 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.big-handle { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.glass { + fill: var(--color-bg-opacity); + stroke: var(--color-border); + stroke-width: 2; +} + +.upright { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.small-handle { + fill: var(--color-primary); + stroke: var(--color-border); + stroke-width: 2; +} diff --git a/src/components/Icons/Search/Search.tsx b/src/components/Icons/Search/Search.tsx new file mode 100644 index 0000000..abb7b53 --- /dev/null +++ b/src/components/Icons/Search/Search.tsx @@ -0,0 +1,30 @@ +import styles from './Search.module.scss'; + +const SearchIcon = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles['small-handle']} + d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" + /> + <path + className={styles.upright} + d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" + /> + <path + className={styles.glass} + d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" + /> + <path + className={styles['big-handle']} + d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" + /> + </svg> + ); +}; + +export default SearchIcon; |
