Implement more brand & social media icon components

This includes the official logo of Arctic Ice Studio, more UI icons as
well as several social media & community sites and services:

- Discord (1)
- GitHub (2)
- Keybase (3)
- Reddit (4)
- Slack (5)
- Spectrum (6)
- Twitter (7)

References:
  (1) https://discordapp.com
  (2) https://github.com
  (3) https://keybase.io
  (4) https://reddit.com
  (5) https://slack.com
  (6) https://spectrum.chat
  (7) https://twitter.com
  https://akveo.github.io/eva-icons
  https://simpleicons.org

Associated epic: GH-74
GH-106

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as DiscordSVG } from "assets/images/icons/simple-icons/discord.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const DiscordIcon = styled(DiscordSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Discord" logo icon from the "Simple Icons" project as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const Discord = ({ className, svgRef }) => <DiscordIcon className={className} svgRef={svgRef} />;
+
+Discord.propTypes = iconPropTypes;
+
+Discord.defaultProps = iconDefaultProps;
+
+export default Discord;

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as GitHubSVG } from "assets/images/icons/simple-icons/github.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const GitHubIcon = styled(GitHubSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "GitHub" logo icon from the "Simple Icons" project as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const GitHub = ({ className, svgRef }) => <GitHubIcon className={className} svgRef={svgRef} />;
+
+GitHub.propTypes = iconPropTypes;
+
+GitHub.defaultProps = iconDefaultProps;
+
+export default GitHub;

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

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as HeartSVGFill } from "assets/images/icons/eva-icons/heart-fill.svg";
+import { ReactComponent as HeartSVGOutline } from "assets/images/icons/eva-icons/heart-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const HeartIconFill = styled(HeartSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const HeartIconOutline = styled(HeartSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "heart" icon from "Eva Icons" as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.5.0
+ */
+const Heart = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <HeartIconOutline className={className} svgRef={svgRef} />
+  ) : (
+    <HeartIconFill className={className} svgRef={svgRef} />
+  );
+
+Heart.propTypes = iconPropTypes;
+
+Heart.defaultProps = iconDefaultProps;
+
+export default Heart;

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as KeybaseSVG } from "assets/images/icons/simple-icons/keybase.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const KeybaseIcon = styled(KeybaseSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Keybase" logo icon from the "Simple Icons" project as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const Keybase = ({ className, svgRef }) => <KeybaseIcon className={className} svgRef={svgRef} />;
+
+Keybase.propTypes = iconPropTypes;
+
+Keybase.defaultProps = iconDefaultProps;
+
+export default Keybase;

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

@@ -19,15 +19,15 @@ const MenuIconOutline = styled(MenuSVGOutline)`
 `;
 
 /**
- * The "menu" icon from "Eva Icons" as SVG vector graphic component.
+ * The "menu" icon from "Eva Icons" as styled 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 <development@arcticicestudio.com>
  * @author Sven Greb <development@svengreb.de>
  * @see https://akveo.github.io/eva-icons
  * @since 0.3.0
  */
-const Menu = ({ svgRef }) => <MenuIconOutline svgRef={svgRef} />;
+const Menu = ({ className, svgRef }) => <MenuIconOutline className={className} svgRef={svgRef} />;
 
 Menu.propTypes = iconPropTypes;
 

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

@@ -24,7 +24,7 @@ const MoonIconOutline = styled(MoonSVGOutline)`
 `;
 
 /**
- * The "moon" icon from "Eva Icons" as SVG vector graphic component.
+ * The "moon" icon from "Eva Icons" as styled 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.
  *
@@ -33,8 +33,12 @@ const MoonIconOutline = styled(MoonSVGOutline)`
  * @see https://akveo.github.io/eva-icons
  * @since 0.3.0
  */
-const Moon = ({ outlined, svgRef }) =>
-  outlined ? <MoonIconOutline svgRef={svgRef} /> : <MoonIconFill svgRef={svgRef} />;
+const Moon = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <MoonIconOutline className={className} svgRef={svgRef} />
+  ) : (
+    <MoonIconFill className={className} svgRef={svgRef} />
+  );
 
 Moon.propTypes = iconPropTypes;
 

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as RedditSVG } from "assets/images/icons/simple-icons/reddit.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const RedditIcon = styled(RedditSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Reddit" logo icon from the "Simple Icons" project as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const Reddit = ({ className, svgRef }) => <RedditIcon className={className} svgRef={svgRef} />;
+
+Reddit.propTypes = iconPropTypes;
+
+Reddit.defaultProps = iconDefaultProps;
+
+export default Reddit;

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as SlackSVG } from "assets/images/icons/simple-icons/slack.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const SlackIcon = styled(SlackSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Slack" logo icon from the "Simple Icons" project as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const Slack = ({ className, svgRef }) => <SlackIcon className={className} svgRef={svgRef} />;
+
+Slack.propTypes = iconPropTypes;
+
+Slack.defaultProps = iconDefaultProps;
+
+export default Slack;

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as SpectrumSVG } from "assets/images/icons/spectrum.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const SpectrumIcon = styled(SpectrumSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Spectrum" logo icon as styled 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @see https://github.com/withspectrum/spectrum/blob/alpha/public/img/mark.svg
+ * @since 0.5.0
+ */
+const Spectrum = ({ className, svgRef }) => <SpectrumIcon className={className} svgRef={svgRef} />;
+
+Spectrum.propTypes = iconPropTypes;
+
+Spectrum.defaultProps = iconDefaultProps;
+
+export default Spectrum;