chore: add a Close icon component

4 files changed, 62 insertions, 0 deletions

diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss
new file mode 100644
index 0000000..4a5d18d
--- /dev/null
+++ b/src/components/atoms/icons/close.module.scss
@@ -0,0 +1,12 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.line {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
new file mode 100644
index 0000000..265df7a
--- /dev/null
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CloseIcon from './close';
+
+export default {
+  title: 'Atoms/Icons',
+  component: CloseIcon,
+} as ComponentMeta<typeof CloseIcon>;
+
+const Template: ComponentStory<typeof CloseIcon> = (args) => (
+  <CloseIcon {...args} />
+);
+
+export const Close = Template.bind({});
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
new file mode 100644
index 0000000..0357bec
--- /dev/null
+++ b/src/components/atoms/icons/close.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import Close from './close';
+
+describe('Close', () => {
+  it('renders a Close icon', () => {
+    const { container } = render(<Close />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
new file mode 100644
index 0000000..80d904e
--- /dev/null
+++ b/src/components/atoms/icons/close.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import styles from './close.module.scss';
+
+/**
+ * Close component
+ *
+ * Render a close svg icon.
+ */
+const Close: FC = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.line}
+        d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
+      />
+      <path
+        className={styles.line}
+        d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
+      />
+    </svg>
+  );
+};
+
+export default Close;