chore: replace svg imports with components

It allows me to control the colors of each SVG paths.

2 files changed, 84 insertions, 0 deletions

diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss
new file mode 100644
index 0000000..2e1df3a
--- /dev/null
+++ b/src/components/Icons/Home/Home.module.scss
@@ -0,0 +1,42 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.wall {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.indoor {
+  fill: var(--color-shadow);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.door {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.roof {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.chimney {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.lines {
+  fill: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/Home/Home.tsx b/src/components/Icons/Home/Home.tsx
new file mode 100644
index 0000000..11c0c8c
--- /dev/null
+++ b/src/components/Icons/Home/Home.tsx
@@ -0,0 +1,42 @@
+import styles from './Home.module.scss';
+
+const HomeIcon = () => {
+  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 HomeIcon;