Implement "Header" SVG vector icon and logo components

This commit adds some icons of the awesome "Eva Icons" (1) project and
the official Nord logo as SVG components. They are loaded with the SVGR
webpack loader added in #72.

References:
  (1) https://akveo.github.io/eva-icons

GH-64

src/components/atoms/core/vectors/icons/Menu.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as MenuSVGOutline } from "assets/images/icons/eva-icons/menu-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const MenuIconOutline = styled(MenuSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "menu" icon from "Eva Icons" as SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.3.0
+ */
+const Menu = ({ svgRef }) => <MenuIconOutline svgRef={svgRef} />;
+
+Menu.propTypes = iconPropTypes;
+
+Menu.defaultProps = iconDefaultProps;
+
+export default Menu;

src/components/atoms/core/vectors/icons/Moon.jsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as MoonSVGFill } from "assets/images/icons/eva-icons/moon-fill.svg";
+import { ReactComponent as MoonSVGOutline } from "assets/images/icons/eva-icons/moon-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const MoonIconFill = styled(MoonSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const MoonIconOutline = styled(MoonSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "moon" icon from "Eva Icons" as SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.3.0
+ */
+const Moon = ({ outlined, svgRef }) =>
+  outlined ? <MoonIconOutline svgRef={svgRef} /> : <MoonIconFill svgRef={svgRef} />;
+
+Moon.propTypes = iconPropTypes;
+
+Moon.defaultProps = iconDefaultProps;
+
+export default Moon;

src/components/atoms/core/vectors/icons/Sun.jsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as SunSVGFill } from "assets/images/icons/eva-icons/sun-fill.svg";
+import { ReactComponent as SunSVGOutline } from "assets/images/icons/eva-icons/sun-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const SunIconFill = styled(SunSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const SunIconOutline = styled(SunSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "sun" icon from "Eva Icons" as SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.3.0
+ */
+const Sun = ({ outlined, svgRef }) => (outlined ? <SunIconOutline svgRef={svgRef} /> : <SunIconFill svgRef={svgRef} />);
+
+Sun.propTypes = iconPropTypes;
+
+Sun.defaultProps = iconDefaultProps;
+
+export default Sun;

src/components/atoms/core/vectors/icons/index.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides SVG vector graphic icon components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.3.0
+ */
+
+import Menu from "./Menu";
+import Moon from "./Moon";
+import Sun from "./Sun";
+
+export { Menu, Moon, Sun };

src/components/atoms/core/vectors/logos/Nord.jsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { ReactComponent as NordSVG } from "assets/images/logos/nord.svg";
+
+import { themeModeFillColorStyles } from "../shared";
+
+/**
+ * The Nord logo as SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const Nord = styled(NordSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+export default Nord;

src/components/atoms/core/vectors/logos/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides SVG vector graphic logo components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.3.0
+ */
+
+import Nord from "./Nord";
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { Nord };

src/components/atoms/core/vectors/shared/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared vector graphic components and styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.3.0
+ */
+
+import { iconDefaultProps, iconPropTypes } from "./propTypes";
+import { themeModeFillColorStyles } from "./styles";
+
+export { iconDefaultProps, iconPropTypes, themeModeFillColorStyles };

src/components/atoms/core/vectors/shared/propTypes.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared prop types.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://reactjs.org/docs/typechecking-with-proptypes.html
+ * @since 0.3.0
+ */
+
+import PropTypes from "prop-types";
+
+const iconPropTypes = {
+  /**
+   * Flag to toggle the "outline" icon variant.
+   */
+  outlined: PropTypes.bool,
+
+  /**
+   * The React `ref` to be forwarded to the underlying SVG component.
+   */
+  svgRef: PropTypes.func
+};
+
+const iconDefaultProps = {
+  outlined: false,
+  svgRef: () => {}
+};
+
+export { iconDefaultProps, iconPropTypes };

src/components/atoms/core/vectors/shared/styles.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared vector graphic component styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+
+import { css } from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const themeModeFillColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * The value and transition for the fill color based on the active global theme mode.
+ *
+ * @since 0.3.0
+ */
+const themeModeFillColorStyles = css`
+  fill: ${themeModeFillColor};
+  transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}s ease-in-out;
+`;
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { themeModeFillColorStyles };