chore: add a Home icon component

4 files changed, 111 insertions, 0 deletions

diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss
new file mode 100644
index 0000000..48dcc6c
--- /dev/null
+++ b/src/components/atoms/icons/home.module.scss
@@ -0,0 +1,41 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.wall {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.indoor {
+  fill: var(--color-shadow-dark);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.door {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.roof {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.chimney {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.lines {
+  fill: var(--color-primary-darker);
+  stroke-width: 4;
+}
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
new file mode 100644
index 0000000..59eb477
--- /dev/null
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import HomeIcon from './home';
+
+export default {
+  title: 'Atoms/Icons',
+  component: HomeIcon,
+} as ComponentMeta<typeof HomeIcon>;
+
+const Template: ComponentStory<typeof HomeIcon> = (args) => (
+  <HomeIcon {...args} />
+);
+
+export const Home = Template.bind({});
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
new file mode 100644
index 0000000..a08a3cf
--- /dev/null
+++ b/src/components/atoms/icons/home.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import Home from './home';
+
+describe('Home', () => {
+  it('renders a home icon', () => {
+    const { container } = render(<Home />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
new file mode 100644
index 0000000..90d3a14
--- /dev/null
+++ b/src/components/atoms/icons/home.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import styles from './home.module.scss';
+
+/**
+ * Home component.
+ *
+ * Render a home svg icon.
+ */
+const Home: FC = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.wall}
+        d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
+      />
+      <path
+        className={styles.indoor}
+        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+      />
+      <path
+        className={styles.door}
+        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+      />
+      <path
+        className={styles.roof}
+        d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
+      />
+      <path
+        className={styles.chimney}
+        d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
+      />
+      <path
+        className={styles.lines}
+        d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
+      />
+    </svg>
+  );
+};
+
+export default Home;