Implemented EdsIcon component

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   [#207](https://github.com/equinor/webviz-core-components/pull/207) - Added `storybook` and stories for each component. Added publishment of `storybook` to GitHub workflow. Added `storybook` link to README.
 -   [#219](https://github.com/equinor/webviz-core-components/pull/219) - Implemented components required by the new Webviz Layout Framework (WLF)
+-   [#227](https://github.com/equinor/webviz-core-components/pull/227) - Added `EdsIcon` component in order to use icons from the Equinor Design System (EDS) directly in Python.
 
 ### Changed
 

react/src/lib/components/EdsIcon/EdsIcon.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { EdsIcon, EdsIconProps } from "./EdsIcon";
+
+export default {
+    title: "Components/EdsIcon",
+    component: EdsIcon,
+} as ComponentMeta<typeof EdsIcon>;
+
+const Template: ComponentStory<typeof EdsIcon> = (args: EdsIconProps) => (
+    <EdsIcon {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+    id: "Icon",
+    color: "#000000",
+    size: 32,
+    icon: "world",
+};

react/src/lib/components/EdsIcon/EdsIcon.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import * as edsIcons from "@equinor/eds-icons";
+import { IconData } from "@equinor/eds-icons";
+import { Icon } from "@equinor/eds-core-react";
+import { Tooltip } from "@material-ui/core";
+
+export type EdsIconProps = {
+    id?: string;
+    icon: string;
+    size?: 16 | 24 | 32 | 40 | 48;
+    color?: string;
+};
+
+export const EdsIcon: React.FC<EdsIconProps> = (props) => {
+    let icon: IconData | undefined = undefined;
+    if (props.icon) {
+        icon = Object.values(edsIcons).find((el) => el.name === props.icon);
+    }
+
+    if (!icon) {
+        return (
+            <Tooltip
+                title={
+                    `An icon with name "${props.icon}" does not exist.` +
+                    ` Please check the icon name for typos. ` +
+                    `An overview of all available icons can be found at ` +
+                    `https://eds-storybook-react.azurewebsites.net/?path=/story/icons--preview.`
+                }
+            >
+                <Icon
+                    id={props.id}
+                    data={edsIcons.report}
+                    color="hsla(0, 100%, 50%, 1)"
+                    className={"IconNotFound"}
+                    size={props.size}
+                />
+            </Tooltip>
+        );
+    }
+
+    return (
+        <Icon id={props.id} data={icon} size={props.size} color={props.color} />
+    );
+};
+
+EdsIcon.propTypes = {
+    id: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.oneOf([16, 24, 32, 40, 48]),
+    color: PropTypes.string,
+};

react/src/lib/components/EdsIcon/index.ts

@@ -0,0 +1 @@
+export { EdsIcon } from "./EdsIcon";

react/src/lib/components/Menu/components/Icon/Icon.tsx

@@ -24,7 +24,7 @@ export const Icon: React.FC<IconProps> = (props) => {
                     `An icon with name "${props.icon}" does not exist.` +
                     ` Please check the icon name for typos. ` +
                     `An overview of all available icons can be found at ` +
-                    `https://eds.equinor.com/assets/system-icons/library/.`
+                    `https://eds-storybook-react.azurewebsites.net/?path=/story/icons--preview.`
                 }
             >
                 <EdsIcon

react/src/lib/index.ts

@@ -31,6 +31,7 @@ import { WebvizSettingsGroup } from "./components/WebvizSettingsGroup";
 import { WebvizPluginLayoutColumn } from "./components/WebvizPluginLayoutColumn/WebvizPluginLayoutColumn";
 import { WebvizPluginLayoutRow } from "./components/WebvizPluginLayoutRow/WebvizPluginLayoutRow";
 import { WebvizPluginLoadingIndicator } from "./components/WebvizPluginLoadingIndicator";
+import { EdsIcon } from "./components/EdsIcon";
 
 import "./components/FlexBox/flexbox.css";
 import "./components/Layout";
@@ -60,4 +61,5 @@ export {
     Overlay,
     ScrollArea,
     Dialog,
+    EdsIcon,
 };