Component with svg icons (#119)

This component has a list of SVG icons which we use in our design

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordcloud/gnui",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "git://github.com/nordcloud/gnui.git",

src/components/index.ts

@@ -30,3 +30,4 @@ export * from "./multiselect";
 export * from "./selectbutton";
 export * from "./datepicker";
 export * from "./message";
+export * from "./svgicon";

src/components/svgicon/SVGIcon.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import theme from "../../theme";
+import { getViewBox } from "../../utils/svgicons";
+import { getPath } from "../../utils/svgicons";
+
+export interface SVGIconProps {
+  name: string;
+  color?: "success" | "danger" | "warning" | "notification" | "white";
+  size?: "sm" | "md" | "lg" | "xl" | "xxl";
+  [x: string]: any;
+}
+
+const StyledSVGIcon = styled.svg<SVGIconProps>`
+  fill: ${theme.colors.primary};
+  width: ${theme.iconSize.md};
+  height: ${theme.iconSize.md};
+
+  ${({ color }) =>
+    color &&
+    css`
+      fill: ${theme.colors[color]};
+    `}
+
+  ${({ size }) =>
+    size &&
+    css`
+      width: ${theme.iconSize[size]};
+      height: ${theme.iconSize[size]};
+    `}
+`;
+
+export const SVGIcon: React.FC<SVGIconProps> = ({ name, ...props }) => {
+  const ViewBox = getViewBox(name);
+  const Path = getPath(name);
+
+  return (
+    <StyledSVGIcon
+      {...props}
+      viewBox={ViewBox}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      {Path}
+    </StyledSVGIcon>
+  );
+};

src/components/svgicon/index.tsx

@@ -0,0 +1 @@
+export * from "./SVGIcon";

src/stories/SVGIcon.stories.mdx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+import { SVGIcon } from "../components/svgicon";
+import { Container, Flex } from "../components/container";
+
+<Meta title="Components/SVGIcon" component={SVGIcon} />
+
+# SVGIcon
+
+## Props
+
+- `name`: `string` — **required**
+- `size`: `string` — **optional**: "sm" | "md" | "lg" | "xl" | "xxl"
+- `color`: `string` — **optional**: "success" | "danger" | "warning" | "notification" | "white"
+
+### Icons Sizes
+
+<Preview>
+  <Story name="size">
+    <Flex justifyContent="space-evenly">
+        <SVGIcon name="dashboard" size="sm" />
+        <SVGIcon name="dashboard" />
+        <SVGIcon name="dashboard" size="lg" />
+        <SVGIcon name="dashboard" size="xl" />
+        <SVGIcon name="dashboard" size="xxl" />
+    </Flex>
+  </Story>
+</Preview>
+
+### Icons colors
+
+<Preview>
+  <Story name="colors">
+    <Flex justifyContent="space-evenly">
+        <SVGIcon name="dashboard" />
+        <SVGIcon name="dashboard" color="success"/>
+        <SVGIcon name="dashboard" color="danger"/>
+        <SVGIcon name="dashboard" color="warning"/>
+        <SVGIcon name="dashboard" color="notification"/>
+    </Flex>
+  </Story>
+</Preview>
+
+### Menu Icons
+
+<Preview>
+  <Story name="menu">
+    <Flex justifyContent="space-evenly">
+        <SVGIcon name="dashboard" size="lg" />
+        <SVGIcon name="application" size="lg" />
+        <SVGIcon name="cloudAccounts" size="lg" />
+        <SVGIcon name="resource" size="lg" />
+        <SVGIcon name="organizationalStructure" size="lg" />
+        <SVGIcon name="contactPersons" size="lg" />
+        <SVGIcon name="users" size="lg" />
+        <SVGIcon name="mappingRules" size="lg" />
+        <SVGIcon name="costSplittingRules" size="lg" />
+        <SVGIcon name="actionLog" size="lg" />
+        <SVGIcon name="businessUnitType" size="lg" />
+    </Flex>
+  </Story>
+</Preview>
+
+### UI Icons
+
+<Preview>
+  <Story name="ui">
+    <Flex justifyContent="space-evenly">
+        <SVGIcon name="danger" />
+        <SVGIcon name="success" />
+        <SVGIcon name="info" />
+        <SVGIcon name="help" />
+        <SVGIcon name="plus" />
+        <SVGIcon name="minus" />
+    </Flex>
+  </Story>
+</Preview>
+

src/theme/index.tsx

@@ -35,6 +35,8 @@ type ZIndex = {
   [zIndex: string]: number | any;
 };
 
+type IconSize = { [key: string]: string };
+
 export interface ThemeInterface {
   colors: Colors;
   typography: Typography;
@@ -45,6 +47,7 @@ export interface ThemeInterface {
   breakpoints: Breakpoints;
   zindex: ZIndex;
   [aliases: string]: any;
+  iconSize: IconSize;
 }
 
 const theme: ThemeInterface = {
@@ -144,6 +147,14 @@ const theme: ThemeInterface = {
     xl: 1200,
   },
 
+  iconSize: {
+    sm: "0.875rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "3rem",
+    xxl: "5rem",
+  },
+
   opacity: 0.7,
 };