From f861e6a269ba9f62700776d3cd13b644a9e836d4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Sep 2023 16:38:54 +0200
Subject: refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.
---
 src/components/atoms/icons/arrow.stories.tsx       |  2 +-
 src/components/atoms/icons/arrow.test.tsx          |  2 +-
 src/components/atoms/icons/arrow.tsx               | 28 +++++++++-------------
 src/components/atoms/icons/career.stories.tsx      |  2 +-
 src/components/atoms/icons/career.test.tsx         |  2 +-
 src/components/atoms/icons/career.tsx              | 21 ++++------------
 src/components/atoms/icons/cc-by-sa.stories.tsx    |  2 +-
 src/components/atoms/icons/cc-by-sa.test.tsx       |  2 +-
 src/components/atoms/icons/cc-by-sa.tsx            | 14 ++++-------
 src/components/atoms/icons/close.stories.tsx       |  2 +-
 src/components/atoms/icons/close.test.tsx          |  2 +-
 src/components/atoms/icons/close.tsx               | 21 ++++------------
 src/components/atoms/icons/cog.stories.tsx         |  2 +-
 src/components/atoms/icons/cog.test.tsx            |  2 +-
 src/components/atoms/icons/cog.tsx                 | 21 ++++------------
 .../atoms/icons/computer-screen.stories.tsx        |  2 +-
 .../atoms/icons/computer-screen.test.tsx           |  2 +-
 src/components/atoms/icons/computer-screen.tsx     | 21 ++++------------
 src/components/atoms/icons/envelop.stories.tsx     |  2 +-
 src/components/atoms/icons/envelop.test.tsx        |  2 +-
 src/components/atoms/icons/envelop.tsx             | 21 ++++------------
 src/components/atoms/icons/feed.stories.tsx        |  2 +-
 src/components/atoms/icons/feed.test.tsx           |  2 +-
 src/components/atoms/icons/feed.tsx                | 21 ++++------------
 src/components/atoms/icons/hamburger.stories.tsx   |  2 +-
 src/components/atoms/icons/hamburger.test.tsx      |  2 +-
 src/components/atoms/icons/hamburger.tsx           |  5 +---
 src/components/atoms/icons/home.stories.tsx        |  2 +-
 src/components/atoms/icons/home.test.tsx           |  2 +-
 src/components/atoms/icons/home.tsx                | 21 ++++------------
 src/components/atoms/icons/index.ts                | 15 ++++++++++++
 .../atoms/icons/magnifying-glass.stories.tsx       |  2 +-
 .../atoms/icons/magnifying-glass.test.tsx          |  2 +-
 src/components/atoms/icons/magnifying-glass.tsx    | 21 ++++------------
 src/components/atoms/icons/moon.stories.tsx        |  2 +-
 src/components/atoms/icons/moon.test.tsx           |  2 +-
 src/components/atoms/icons/moon.tsx                | 20 ++++------------
 src/components/atoms/icons/plus-minus.stories.tsx  |  2 +-
 src/components/atoms/icons/plus-minus.test.tsx     |  2 +-
 src/components/atoms/icons/plus-minus.tsx          |  8 +++----
 src/components/atoms/icons/posts-stack.stories.tsx |  2 +-
 src/components/atoms/icons/posts-stack.test.tsx    |  2 +-
 src/components/atoms/icons/posts-stack.tsx         | 24 +++++++------------
 src/components/atoms/icons/sun.stories.tsx         |  2 +-
 src/components/atoms/icons/sun.test.tsx            |  2 +-
 src/components/atoms/icons/sun.tsx                 | 18 ++++----------
 46 files changed, 121 insertions(+), 239 deletions(-)
 create mode 100644 src/components/atoms/icons/index.ts

(limited to 'src/components/atoms/icons')

diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 9234886..a49be55 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ArrowIcon from './arrow';
+import { Arrow as ArrowIcon } from './arrow';
 
 /**
  * Arrow icon - Storybook Meta
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
index 9985717..ed1d1e2 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Arrow from './arrow';
+import { Arrow } from './arrow';
 
 describe('Arrow', () => {
   it('renders an arrow icon oriented to the right', () => {
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
index 8aec5a1..2ef0185 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -1,17 +1,9 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './arrow.module.scss';
 
 export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
 
-export type ArrowProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type ArrowProps = SVGAttributes<SVGElement> & {
   /**
    * The arrow direction. Default: right.
    */
@@ -23,17 +15,21 @@ export type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
+export const Arrow: FC<ArrowProps> = ({
+  className = '',
+  direction,
+  ...props
+}) => {
   const directionClass = styles[`icon--${direction}`];
   const classes = `${styles.icon} ${directionClass} ${className}`;
 
   if (direction === 'top') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -50,10 +46,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'bottom') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -70,10 +66,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'left') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 64.644997 23.476001"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -89,10 +85,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
 
   return (
     <svg
+      {...props}
       className={classes}
       viewBox="0 0 64.644997 23.476001"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       <path
         className="arrow-head"
@@ -105,5 +101,3 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
     </svg>
   );
 };
-
-export default Arrow;
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 400ed21..5c3ae12 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CareerIcon from './career';
+import { Career as CareerIcon } from './career';
 
 /**
  * Career icon - Storybook Meta
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
index 0c47262..7e53f6e 100644
--- a/src/components/atoms/icons/career.test.tsx
+++ b/src/components/atoms/icons/career.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Career from './career';
+import { Career } from './career';
 
 describe('Career', () => {
   it('renders a Career icon', () => {
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index 009c2b4..6456d40 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './career.module.scss';
 
-export type CareerProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CareerProps = SVGAttributes<SVGElement>;
 
 /**
  * Career Component
  *
  * Render a career svg icon.
  */
-const Career: FC<CareerProps> = ({ className = '', ...props }) => {
+export const Career: FC<CareerProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.bottom}
@@ -72,5 +63,3 @@ const Career: FC<CareerProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Career;
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index 4229725..2a29ee3 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySAIcon from './cc-by-sa';
+import { CCBySA as CCBySAIcon } from './cc-by-sa';
 
 /**
  * CC BY SA icon - Storybook Meta
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index 2bcb437..a23059d 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from './cc-by-sa';
+import { CCBySA } from './cc-by-sa';
 
 describe('CCBySA', () => {
   it('renders a CC BY SA icon', () => {
diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx
index 8239154..ba6d278 100644
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ b/src/components/atoms/icons/cc-by-sa.tsx
@@ -1,24 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './cc-by-sa.module.scss';
 
-export type CCBySAProps = {
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CCBySAProps = SVGAttributes<SVGElement>;
 
 /**
  * CCBySA component
  *
  * Render a CC BY SA svg icon.
  */
-const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
+export const CCBySA: FC<CCBySAProps> = ({ className = '', ...props }) => {
   const intl = useIntl();
 
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 211.99811 63.999996"
       xmlns="http://www.w3.org/2000/svg"
@@ -41,5 +37,3 @@ const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
     </svg>
   );
 };
-
-export default CCBySA;
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index 05251c5..d075141 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CloseIcon from './close';
+import { Close as CloseIcon } from './close';
 
 /**
  * Close icon - Storybook Meta
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
index dc82a2d..058b793 100644
--- a/src/components/atoms/icons/close.test.tsx
+++ b/src/components/atoms/icons/close.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Close from './close';
+import { Close } from './close';
 
 describe('Close', () => {
   it('renders a Close icon', () => {
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index 14239a1..5db8620 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './close.module.scss';
 
-export type CloseProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CloseProps = SVGAttributes<SVGElement>;
 
 /**
  * Close component
  *
  * Render a close svg icon.
  */
-const Close: FC<CloseProps> = ({ className = '', ...props }) => {
+export const Close: FC<CloseProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.line}
@@ -36,5 +27,3 @@ const Close: FC<CloseProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Close;
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index 74228ca..1b6d440 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CogIcon from './cog';
+import { Cog as CogIcon } from './cog';
 
 /**
  * Cogs icon - Storybook Meta
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
index 9d201b1..016ef15 100644
--- a/src/components/atoms/icons/cog.test.tsx
+++ b/src/components/atoms/icons/cog.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Cog from './cog';
+import { Cog } from './cog';
 
 describe('Cog', () => {
   it('renders a Cog icon', () => {
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index 5431f9e..6e44708 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -1,34 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './cog.module.scss';
 
-export type CogProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CogProps = SVGAttributes<SVGElement>;
 
 /**
  * Cog component
  *
  * Render a cog svg icon.
  */
-const Cog: FC<CogProps> = ({ className = '', ...props }) => {
+export const Cog: FC<CogProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
       <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
     </svg>
   );
 };
-
-export default Cog;
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index ad457a9..d4b257b 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ComputerScreenIcon from './computer-screen';
+import { ComputerScreen as ComputerScreenIcon } from './computer-screen';
 
 /**
  * Computer Screen icon - Storybook Meta
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
index baa2c78..d74933a 100644
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import ComputerScreen from './computer-screen';
+import { ComputerScreen } from './computer-screen';
 
 describe('ComputerScreen', () => {
   it('renders a computer screen icon', () => {
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index 9293316..32f41a0 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './computer-screen.module.scss';
 
-export type ComputerScreenProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type ComputerScreenProps = SVGAttributes<SVGElement>;
 
 /**
  * ComputerScreen component
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: FC<ComputerScreenProps> = ({
+export const ComputerScreen: FC<ComputerScreenProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
@@ -83,5 +74,3 @@ const ComputerScreen: FC<ComputerScreenProps> = ({
     </svg>
   );
 };
-
-export default ComputerScreen;
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index 3d24d2e..666cd86 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import EnvelopIcon from './envelop';
+import { Envelop as EnvelopIcon } from './envelop';
 
 /**
  * Envelop icon - Storybook Meta
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
index c040134..1829fe2 100644
--- a/src/components/atoms/icons/envelop.test.tsx
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Envelop from './envelop';
+import { Envelop } from './envelop';
 
 describe('Envelop', () => {
   it('renders an envelop icon', () => {
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index 99a003b..968c51f 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './envelop.module.scss';
 
-export type EnvelopProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type EnvelopProps = SVGAttributes<SVGElement>;
 
 /**
  * Envelop Component
  *
  * Render an envelop svg icon.
  */
-const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
+export const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -68,5 +59,3 @@ const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Envelop;
diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx
index 5e4615f..1a297e9 100644
--- a/src/components/atoms/icons/feed.stories.tsx
+++ b/src/components/atoms/icons/feed.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FeedIcon from './feed';
+import { Feed as FeedIcon } from './feed';
 
 /**
  * Feed icon - Storybook Meta
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
index 630089d..ca6f331 100644
--- a/src/components/atoms/icons/feed.test.tsx
+++ b/src/components/atoms/icons/feed.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Feed from './feed';
+import { Feed } from './feed';
 
 describe('Feed', () => {
   it('renders a feed icon', () => {
diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx
index 4428eb9..40b3156 100644
--- a/src/components/atoms/icons/feed.tsx
+++ b/src/components/atoms/icons/feed.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './feed.module.scss';
 
-export type FeedProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type FeedProps = SVGAttributes<SVGElement>;
 
 /**
  * Feed Component
  *
  * Render a feed svg icon.
  */
-const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
+export const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 256 256"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <defs>
         <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
@@ -75,5 +66,3 @@ const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Feed;
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index 0a8a8cc..b2416c6 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HamburgerIcon from './hamburger';
+import { Hamburger as HamburgerIcon } from './hamburger';
 
 /**
  * Hamburger icon - Storybook Meta
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index 4f6a457..b208a42 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Hamburger from './hamburger';
+import { Hamburger } from './hamburger';
 
 describe('Hamburger', () => {
   it('renders a Hamburger icon', () => {
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index 93aed2a..cc4e7b9 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -6,7 +6,6 @@ export type HamburgerProps = {
    * Set additional classnames to the icon wrapper.
    */
   className?: string;
-
   /**
    * Set additional classnames to the icon.
    */
@@ -18,7 +17,7 @@ export type HamburgerProps = {
  *
  * Render a Hamburger icon.
  */
-const Hamburger: FC<HamburgerProps> = ({
+export const Hamburger: FC<HamburgerProps> = ({
   className = '',
   iconClassName = '',
 }) => {
@@ -28,5 +27,3 @@ const Hamburger: FC<HamburgerProps> = ({
     </span>
   );
 };
-
-export default Hamburger;
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index 90650fc..7492af7 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HomeIcon from './home';
+import { Home as HomeIcon } from './home';
 
 /**
  * Home icon - Storybook Meta
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
index 0473d0b..2fbe42f 100644
--- a/src/components/atoms/icons/home.test.tsx
+++ b/src/components/atoms/icons/home.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Home from './home';
+import { Home } from './home';
 
 describe('Home', () => {
   it('renders a home icon', () => {
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index dd39b15..0081f37 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './home.module.scss';
 
-export type HomeProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type HomeProps = SVGAttributes<SVGElement>;
 
 /**
  * Home component.
  *
  * Render a home svg icon.
  */
-const Home: FC<HomeProps> = ({ className = '', ...props }) => {
+export const Home: FC<HomeProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.wall}
@@ -56,5 +47,3 @@ const Home: FC<HomeProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Home;
diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
new file mode 100644
index 0000000..1b413ba
--- /dev/null
+++ b/src/components/atoms/icons/index.ts
@@ -0,0 +1,15 @@
+export * from './arrow';
+export * from './career';
+export * from './cc-by-sa';
+export * from './close';
+export * from './cog';
+export * from './computer-screen';
+export * from './envelop';
+export * from './feed';
+export * from './hamburger';
+export * from './home';
+export * from './magnifying-glass';
+export * from './moon';
+export * from './plus-minus';
+export * from './posts-stack';
+export * from './sun';
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 0715a11..7dec505 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MagnifyingGlassIcon from './magnifying-glass';
+import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass';
 
 /**
  * Magnifying Glass icon - Storybook Meta
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
index c6ddb18..4e2f449 100644
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import MagnifyingGlass from './magnifying-glass';
+import { MagnifyingGlass } from './magnifying-glass';
 
 describe('MagnifyingGlass', () => {
   it('renders a magnifying glass icon', () => {
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index ad8da39..619adef 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './magnifying-glass.module.scss';
 
-export type MagnifyingGlassProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type MagnifyingGlassProps = SVGAttributes<SVGElement>;
 
 /**
  * MagnifyingGlass component
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
+export const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles['small-handle']}
@@ -47,5 +38,3 @@ const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
     </svg>
   );
 };
-
-export default MagnifyingGlass;
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index 9584e47..a8faf03 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MoonIcon from './moon';
+import { Moon as MoonIcon } from './moon';
 
 /**
  * Moon icon - Storybook Meta
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
index 09415a9..3c1021a 100644
--- a/src/components/atoms/icons/moon.test.tsx
+++ b/src/components/atoms/icons/moon.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Moon from './moon';
+import { Moon } from './moon';
 
 describe('Moon', () => {
   it('renders a moon icon', () => {
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index d04605a..2139ce1 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -1,33 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './moon.module.scss';
 
-export type MoonProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type MoonProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
   title?: string;
 };
 
-const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
+export const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
-      {title !== 'undefined' && <title>{title}</title>}
+      {title ? <title>{title}</title> : null}
       <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
     </svg>
   );
 };
-
-export default Moon;
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
index eebf1e5..c556076 100644
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ b/src/components/atoms/icons/plus-minus.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PlusMinusIcon from './plus-minus';
+import { PlusMinus as PlusMinusIcon } from './plus-minus';
 
 /**
  * Plus/Minus icon - Storybook Meta
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 5105403..174f8e1 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PlusMinus from './plus-minus';
+import { PlusMinus } from './plus-minus';
 
 describe('PlusMinus', () => {
   it('renders a plus/minus icon', () => {
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx
index e8897b7..e2eb55e 100644
--- a/src/components/atoms/icons/plus-minus.tsx
+++ b/src/components/atoms/icons/plus-minus.tsx
@@ -17,15 +17,13 @@ export type PlusMinusProps = {
  *
  * Render a plus or a minus icon.
  */
-const PlusMinus: FC<PlusMinusProps> = ({ className, state }) => {
+export const PlusMinus: FC<PlusMinusProps> = ({ className = '', state }) => {
   const stateClass = `icon--${state}`;
 
   return (
     <div
-      className={`${styles.icon} ${styles[stateClass]} ${className}`}
       aria-hidden={true}
-    ></div>
+      className={`${styles.icon} ${styles[stateClass]} ${className}`}
+    />
   );
 };
-
-export default PlusMinus;
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index f11b13b..7daeecf 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PostsStackIcon from './posts-stack';
+import { PostsStack as PostsStackIcon } from './posts-stack';
 
 /**
  * Posts Stack icon - Storybook Meta
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
index 65e0d3b..3728d1e 100644
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ b/src/components/atoms/icons/posts-stack.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PostsStack from './posts-stack';
+import { PostsStack } from './posts-stack';
 
 describe('PostsStack', () => {
   it('renders a posts stack icon', () => {
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index af070de..c783892 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -1,29 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './posts-stack.module.scss';
 
-export type PostsStackProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type PostsStackProps = SVGAttributes<SVGElement>;
 
 /**
  * Posts stack component.
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
+export const PostsStack: FC<PostsStackProps> = ({
+  className = '',
+  ...props
+}) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -76,5 +70,3 @@ const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default PostsStack;
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index dabda66..a332bcd 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SunIcon from './sun';
+import { Sun as SunIcon } from './sun';
 
 /**
  * Sun icon - Storybook Meta
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
index af52a5f..8a43221 100644
--- a/src/components/atoms/icons/sun.test.tsx
+++ b/src/components/atoms/icons/sun.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Sun from './sun';
+import { Sun } from './sun';
 
 describe('Sun', () => {
   it('renders a sun icon', () => {
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index 1d29ff4..69a3044 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -1,15 +1,7 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './sun.module.scss';
 
-export type SunProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type SunProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
@@ -21,18 +13,16 @@ export type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
+export const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.sun} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       {title !== 'undefined' && <title>{title}</title>}
       <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
     </svg>
   );
 };
-
-export default Sun;
-- 
cgit v1.2.3