chore: add a magnifying glass icon component

4 files changed, 88 insertions, 0 deletions

diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss
new file mode 100644
index 0000000..dca76fb
--- /dev/null
+++ b/src/components/atoms/icons/magnifying-glass.module.scss
@@ -0,0 +1,30 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.big-handle {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.glass {
+  fill: var(--color-bg-opacity);
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
+
+.upright {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.small-handle {
+  fill: var(--color-primary);
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
new file mode 100644
index 0000000..69c5b50
--- /dev/null
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import MagnifyingGlassIcon from './magnifying-glass';
+
+export default {
+  title: 'Atoms/Icons',
+  component: MagnifyingGlassIcon,
+} as ComponentMeta<typeof MagnifyingGlassIcon>;
+
+const Template: ComponentStory<typeof MagnifyingGlassIcon> = (args) => (
+  <MagnifyingGlassIcon {...args} />
+);
+
+export const MagnifyingGlass = Template.bind({});
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
new file mode 100644
index 0000000..8e788f7
--- /dev/null
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import MagnifyingGlass from './magnifying-glass';
+
+describe('MagnifyingGlass', () => {
+  it('renders a magnifying glass icon', () => {
+    const { container } = render(<MagnifyingGlass />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
new file mode 100644
index 0000000..547dd00
--- /dev/null
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import styles from './magnifying-glass.module.scss';
+
+/**
+ * MagnifyingGlass component
+ *
+ * Render a magnifying glass svg icon.
+ */
+const MagnifyingGlass: FC = () => {
+  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 MagnifyingGlass;