diff --git a/src/assets/images/icons/eva-icons/heart-fill.svg b/src/assets/images/icons/eva-icons/heart-fill.svg new file mode 100755 index 00000000..b37023aa --- /dev/null +++ b/src/assets/images/icons/eva-icons/heart-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/eva-icons/heart-outline.svg b/src/assets/images/icons/eva-icons/heart-outline.svg new file mode 100755 index 00000000..aec33fe9 --- /dev/null +++ b/src/assets/images/icons/eva-icons/heart-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/discord.svg b/src/assets/images/icons/simple-icons/discord.svg new file mode 100755 index 00000000..4380f9f6 --- /dev/null +++ b/src/assets/images/icons/simple-icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/github.svg b/src/assets/images/icons/simple-icons/github.svg new file mode 100755 index 00000000..922b47b6 --- /dev/null +++ b/src/assets/images/icons/simple-icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/keybase.svg b/src/assets/images/icons/simple-icons/keybase.svg new file mode 100755 index 00000000..08018c59 --- /dev/null +++ b/src/assets/images/icons/simple-icons/keybase.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/icons/simple-icons/reddit.svg b/src/assets/images/icons/simple-icons/reddit.svg new file mode 100755 index 00000000..ef3b25d3 --- /dev/null +++ b/src/assets/images/icons/simple-icons/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/slack.svg b/src/assets/images/icons/simple-icons/slack.svg new file mode 100755 index 00000000..88801ae1 --- /dev/null +++ b/src/assets/images/icons/simple-icons/slack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/icons/simple-icons/twitter.svg b/src/assets/images/icons/simple-icons/twitter.svg new file mode 100755 index 00000000..8c49818b --- /dev/null +++ b/src/assets/images/icons/simple-icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/spectrum.svg b/src/assets/images/icons/spectrum.svg new file mode 100644 index 00000000..a1de462c --- /dev/null +++ b/src/assets/images/icons/spectrum.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/arcticicestudio.svg b/src/assets/images/logos/arcticicestudio.svg new file mode 100644 index 00000000..62affec4 --- /dev/null +++ b/src/assets/images/logos/arcticicestudio.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/atoms/core/vectors/icons/Discord.jsx b/src/components/atoms/core/vectors/icons/Discord.jsx new file mode 100644 index 00000000..121cd9e1 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Discord.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Discord = ({ className, svgRef }) => ; + +Discord.propTypes = iconPropTypes; + +Discord.defaultProps = iconDefaultProps; + +export default Discord; diff --git a/src/components/atoms/core/vectors/icons/GitHub.jsx b/src/components/atoms/core/vectors/icons/GitHub.jsx new file mode 100644 index 00000000..4a92e560 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/GitHub.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const GitHub = ({ className, svgRef }) => ; + +GitHub.propTypes = iconPropTypes; + +GitHub.defaultProps = iconDefaultProps; + +export default GitHub; diff --git a/src/components/atoms/core/vectors/icons/Heart.jsx b/src/components/atoms/core/vectors/icons/Heart.jsx new file mode 100644 index 00000000..d64acfcc --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Heart.jsx @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://akveo.github.io/eva-icons + * @since 0.5.0 + */ +const Heart = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); + +Heart.propTypes = iconPropTypes; + +Heart.defaultProps = iconDefaultProps; + +export default Heart; diff --git a/src/components/atoms/core/vectors/icons/Keybase.jsx b/src/components/atoms/core/vectors/icons/Keybase.jsx new file mode 100644 index 00000000..9ca6c410 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Keybase.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Keybase = ({ className, svgRef }) => ; + +Keybase.propTypes = iconPropTypes; + +Keybase.defaultProps = iconDefaultProps; + +export default Keybase; diff --git a/src/components/atoms/core/vectors/icons/Menu.jsx b/src/components/atoms/core/vectors/icons/Menu.jsx index 5bdcdd28..c0f8f7d8 100644 --- a/src/components/atoms/core/vectors/icons/Menu.jsx +++ b/src/components/atoms/core/vectors/icons/Menu.jsx @@ -19,7 +19,7 @@ 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 @@ -27,7 +27,7 @@ const MenuIconOutline = styled(MenuSVGOutline)` * @see https://akveo.github.io/eva-icons * @since 0.3.0 */ -const Menu = ({ svgRef }) => ; +const Menu = ({ className, svgRef }) => ; Menu.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Moon.jsx b/src/components/atoms/core/vectors/icons/Moon.jsx index f7f7d3b7..a165a444 100644 --- a/src/components/atoms/core/vectors/icons/Moon.jsx +++ b/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 ? : ; +const Moon = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); Moon.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Reddit.jsx b/src/components/atoms/core/vectors/icons/Reddit.jsx new file mode 100644 index 00000000..b61b55f9 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Reddit.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Reddit = ({ className, svgRef }) => ; + +Reddit.propTypes = iconPropTypes; + +Reddit.defaultProps = iconDefaultProps; + +export default Reddit; diff --git a/src/components/atoms/core/vectors/icons/Slack.jsx b/src/components/atoms/core/vectors/icons/Slack.jsx new file mode 100644 index 00000000..d47bb75a --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Slack.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Slack = ({ className, svgRef }) => ; + +Slack.propTypes = iconPropTypes; + +Slack.defaultProps = iconDefaultProps; + +export default Slack; diff --git a/src/components/atoms/core/vectors/icons/Spectrum.jsx b/src/components/atoms/core/vectors/icons/Spectrum.jsx new file mode 100644 index 00000000..e1f265ae --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Spectrum.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @see https://github.com/withspectrum/spectrum/blob/alpha/public/img/mark.svg + * @since 0.5.0 + */ +const Spectrum = ({ className, svgRef }) => ; + +Spectrum.propTypes = iconPropTypes; + +Spectrum.defaultProps = iconDefaultProps; + +export default Spectrum; diff --git a/src/components/atoms/core/vectors/icons/Sun.jsx b/src/components/atoms/core/vectors/icons/Sun.jsx index 69a0bce4..f5ba4331 100644 --- a/src/components/atoms/core/vectors/icons/Sun.jsx +++ b/src/components/atoms/core/vectors/icons/Sun.jsx @@ -24,7 +24,7 @@ const SunIconOutline = styled(SunSVGOutline)` `; /** - * The "sun" icon from "Eva Icons" as SVG vector graphic component. + * The "sun" 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,7 +33,12 @@ const SunIconOutline = styled(SunSVGOutline)` * @see https://akveo.github.io/eva-icons * @since 0.3.0 */ -const Sun = ({ outlined, svgRef }) => (outlined ? : ); +const Sun = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); Sun.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Twitter.jsx b/src/components/atoms/core/vectors/icons/Twitter.jsx new file mode 100644 index 00000000..205eb7f3 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Twitter.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as TwitterSVG } from "assets/images/icons/simple-icons/twitter.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const TwitterIcon = styled(TwitterSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Twitter" 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 + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Twitter = ({ className, svgRef }) => ; + +Twitter.propTypes = iconPropTypes; + +Twitter.defaultProps = iconDefaultProps; + +export default Twitter; diff --git a/src/components/atoms/core/vectors/icons/index.js b/src/components/atoms/core/vectors/icons/index.js index f1c8e068..df76a86c 100644 --- a/src/components/atoms/core/vectors/icons/index.js +++ b/src/components/atoms/core/vectors/icons/index.js @@ -15,8 +15,16 @@ * @since 0.3.0 */ +import Discord from "./Discord"; +import GitHub from "./GitHub"; +import Heart from "./Heart"; +import Keybase from "./Keybase"; import Menu from "./Menu"; import Moon from "./Moon"; +import Reddit from "./Reddit"; +import Slack from "./Slack"; +import Spectrum from "./Spectrum"; import Sun from "./Sun"; +import Twitter from "./Twitter"; -export { Menu, Moon, Sun }; +export { Discord, GitHub, Heart, Keybase, Menu, Moon, Reddit, Slack, Spectrum, Sun, Twitter }; diff --git a/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx b/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx new file mode 100644 index 00000000..a1919b42 --- /dev/null +++ b/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as ArcticIceStudioSVG } from "assets/images/logos/arcticicestudio.svg"; + +import { themeModeFillColorStyles } from "../shared"; + +/** + * The Arctic Ice Studio 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 + * @author Sven Greb + * @see https://arcticicestudio.com + * @since 0.5.0 + */ +const ArcticIceStudio = styled(ArcticIceStudioSVG)` + ${themeModeFillColorStyles}; +`; + +export default ArcticIceStudio; diff --git a/src/components/atoms/core/vectors/logos/index.js b/src/components/atoms/core/vectors/logos/index.js index 9aff104b..68f7bc0d 100644 --- a/src/components/atoms/core/vectors/logos/index.js +++ b/src/components/atoms/core/vectors/logos/index.js @@ -15,7 +15,7 @@ * @since 0.3.0 */ +import ArcticIceStudio from "./ArcticIceStudio"; import Nord from "./Nord"; -/* eslint-disable-next-line import/prefer-default-export */ -export { Nord }; +export { ArcticIceStudio, Nord };