chore(web): copy Icon component from classic (#455)

Co-authored-by: koji endo <kouendou@fab.pasona.tech> Co-authored-by: 長田淳史 <> Co-authored-by: keiya sasaki <keiya.s.0210@gmail.com>
reearth · Jun 1, 2023 · 9942876 · 9942876
1 parent ed84fc2
commit 9942876
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 0 deletions.
diff --git a/web/src/beta/components/Icon/Icons/fileIcon.svg b/web/src/beta/components/Icon/Icons/fileIcon.svg
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
@@ -0,0 +1,7 @@
+
+// Dataset
+import File from "./Icons/fileIcon.svg";
+
+export default {
+  file: File,
+};
diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/react";
+
+import Icon from ".";
+
+const icon =
+  '<svg stroke="white" fill="#00A0E8" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="css-1t9xarj" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>';
+
+export default {
+  title: "Icon",
+  component: Icon,
+} as Meta;
+
+export const Default = () => <Icon icon="file" alt="icon" size={20} />;
+export const Color = () => <Icon icon="file" color="red" alt="icon" size={20} />;
+export const Image = () => <Icon icon={`/sample.svg`} alt="icon" size={20} />;
+export const Svg = () => <Icon icon={icon} alt="icon" size={20} />;
+export const Wrapped = () => (
+  <Icon icon={icon} alt="icon" size={20} style={{ background: "green" }} />
+);
diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx
@@ -0,0 +1,106 @@
+import svgToMiniDataURI from "mini-svg-data-uri";
+import React, { AriaAttributes, AriaRole, CSSProperties, memo, useMemo } from "react";
+import SVG from "react-inlinesvg";
+
+import { ariaProps } from "@reearth/classic/util/aria";
+import { styled } from "@reearth/services/theme";
+
+import Icons from "./icons";
+
+export type Icons = keyof typeof Icons;
+
+export type Props = {
+  className?: string;
+  icon?: string;
+  size?: string | number;
+  alt?: string;
+  color?: string;
+  stroke?: string;
+  style?: CSSProperties;
+  role?: AriaRole;
+  notransition?: boolean;
+  transitionDuration?: string;
+  onClick?: () => void;
+} & AriaAttributes;
+
+const Icon: React.FC<Props> = ({
+  className,
+  icon,
+  alt,
+  style,
+  color,
+  stroke,
+  size,
+  role,
+  notransition,
+  transitionDuration,
+  onClick,
+  ...props
+}) => {
+  const src = useMemo(
+    () => (icon?.startsWith("<svg ") ? svgToMiniDataURI(icon) : Icons[icon as Icons]),
+    [icon],
+  );
+  if (!icon) return null;
+
+  const aria = ariaProps(props);
+  const sizeStr = typeof size === "number" ? `${size}px` : size;
+  if (!src) {
+    return (
+      <StyledImg
+        className={className}
+        src={icon}
+        alt={alt}
+        style={style}
+        role={role}
+        size={sizeStr}
+        notransition={notransition}
+        onClick={onClick}
+        {...aria}
+      />
+    );
+  }
+
+  return (
+    <StyledSvg
+      className={className}
+      src={src}
+      role={role}
+      color={color}
+      stroke={stroke}
+      size={sizeStr}
+      onClick={onClick}
+      style={{
+        ...style,
+        // To prevent annoying errors from being output to the console, specify transitions without Emotion.
+        transitionDuration:
+          !notransition && !style?.transitionDuration
+            ? transitionDuration || "0.3s"
+            : style?.transitionDuration,
+      }}
+      {...aria}
+    />
+  );
+};
+
+const StyledImg = styled.img<{ size?: string; notransition?: boolean }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  ${({ notransition }) => !notransition && "transition: all 0.3s;"}
+`;
+
+const StyledSvg = styled(SVG)<{
+  color?: string;
+  stroke?: string;
+  size?: string;
+}>`
+  font-size: 0;
+  display: inline-block;
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  color: ${({ color }) => color};
+  ${({ stroke }) => `stroke: ${stroke};`}
+  transition-property: color, background;
+`;
+
+export default memo(Icon);