chore: add a career icon component

4 files changed, 139 insertions, 0 deletions

diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss
new file mode 100644
index 0000000..c5d65eb
--- /dev/null
+++ b/src/components/atoms/icons/career.module.scss
@@ -0,0 +1,53 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.lock {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.lines {
+  fill: var(--color-fg);
+  stroke-width: 4;
+}
+
+.seal-top {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
+
+.seal-bottom {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
+
+.diploma {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.top {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.handle {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.bottom {
+  fill: var(--color-primary);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
new file mode 100644
index 0000000..2c1d93a
--- /dev/null
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CareerIcon from './career';
+
+export default {
+  title: 'Atoms/Icons',
+  component: CareerIcon,
+} as ComponentMeta<typeof CareerIcon>;
+
+const Template: ComponentStory<typeof CareerIcon> = (args) => (
+  <CareerIcon {...args} />
+);
+
+export const Career = Template.bind({});
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
new file mode 100644
index 0000000..62ffc14
--- /dev/null
+++ b/src/components/atoms/icons/career.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import Career from './career';
+
+describe('Career', () => {
+  it('renders a Career icon', () => {
+    const { container } = render(<Career />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
new file mode 100644
index 0000000..aecab1e
--- /dev/null
+++ b/src/components/atoms/icons/career.tsx
@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import styles from './career.module.scss';
+
+/**
+ * Career Component
+ *
+ * Render a career svg icon.
+ */
+const Career: FC = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.bottom}
+        d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z"
+      />
+      <path
+        className={styles.handle}
+        d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
+      />
+      <path
+        className={styles.top}
+        d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z"
+      />
+      <path
+        className={styles.diploma}
+        d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z"
+      />
+      <path
+        className={styles['seal-bottom']}
+        d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z"
+      />
+      <path
+        className={styles['seal-top']}
+        d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z"
+      />
+      <path
+        className={styles.lock}
+        d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z"
+      />
+    </svg>
+  );
+};
+
+export default Career;