feat(flat-components): add flat icons (#1368)

netless-io · Feb 16, 2022 · cf4c9d7 · cf4c9d7
1 parent 59a9ec2
commit cf4c9d7
Show file tree

Hide file tree

Showing 128 changed files with 2,992 additions and 0 deletions.
diff --git a/packages/flat-components/src/components/FlatIcons/FlatIcon.stories.tsx b/packages/flat-components/src/components/FlatIcons/FlatIcon.stories.tsx
@@ -0,0 +1,208 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { chunk } from "lodash-es";
+
+const storyMeta: Meta = {
+    title: "Icons/FlatIcons",
+    parameters: {
+        backgrounds: {
+            default: "Homepage Background",
+        },
+    },
+};
+
+export default storyMeta;
+
+const FIconTable: React.FC<{ icons: string[]; column: number; title: string }> = props => {
+    const rows = chunk(props.icons, props.column);
+
+    return (
+        <div className="box center" style={{ maxWidth: props.column * 200 }}>
+            <h1 className="title tc">{props.title}</h1>
+            <div
+                className="mw8 center"
+                style={{ fontSize: 12, color: "var(--grey-3)", wordBreak: "break-all" }}
+            >
+                {rows.map((row, i) => (
+                    <div key={i} className="ph3-ns">
+                        <div className="cf ph2-ns">
+                            {row.map(name => (
+                                <div className={`fl w-100 w-${Math.floor(100 / props.column)}-ns`}>
+                                    <div className="tc pv3 ph1">
+                                        {React.createElement(
+                                            require(`./icons/SVG${name}`).default,
+                                            {
+                                                style: { width: 24, height: 24 },
+                                            },
+                                        )}
+                                        <div className="tc">SVG{name}</div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export const DirectionalIcons: Story = () => (
+    <FIconTable
+        column={5}
+        icons={[
+            "Up",
+            "Down",
+            "Left",
+            "Right",
+            "DoubleUp",
+            "DoubleDown",
+            "DoubleLeft",
+            "DoubleRight",
+            "ArrowUp",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowRight",
+            "ToUp",
+            "ToDown",
+            "ToLeft",
+            "ToRight",
+            "CircleUpOutlined",
+            "CircleDownOutlined",
+            "CircleLeftOutlined",
+            "CircleRightOutlined",
+            "CircleUpFilled",
+            "CircleDownFilled",
+            "CircleLeftFilled",
+            "CircleRightFilled",
+            "MenuFold",
+            "MenuUnfold",
+            "VideoFold",
+            "VideoUnfold",
+            "SortVertical",
+            "SortHorizontal",
+        ]}
+        title="Directional Icons"
+    />
+);
+
+export const SuggestedIcons: Story = () => (
+    <FIconTable
+        column={3}
+        icons={[
+            "Plus",
+            "CirclePlusOutlined",
+            "CirclePlusFilled",
+            "Minus",
+            "CircleMinusOutlined",
+            "CircleMinusFilled",
+            "Question",
+            "CircleQuestionOutlined",
+            "CircleQuestionFilled",
+            "Check",
+            "CircleCheckOutlined",
+            "CircleCheckFilled",
+            "Close",
+            "CircleCloseOutlined",
+            "CircleCloseFilled",
+            "Exclamation",
+            "CircleExclamationO",
+            "CircleExclamationF",
+            "Info",
+            "CircleInfoOutlined",
+            "CircleInfoFilled",
+            "Load",
+        ]}
+        title="Suggested Icons"
+    />
+);
+
+export const MediaIcons: Story = () => (
+    <FIconTable
+        column={4}
+        icons={[
+            "Camera",
+            "CameraMute",
+            "Microphone",
+            "MicrophoneMute",
+            "Sound",
+            "SoundSilent",
+            "SoundMute",
+            "Loop",
+            "Play",
+            "Pause",
+            "Next",
+            "Last",
+            "Fullscreen",
+            "FullscreenExit",
+            "Record",
+            "RecordStop",
+            "File",
+            "FileVideo",
+            "FileAudio",
+            "FileImage",
+            "FileWord",
+            "FilePowerpoint",
+            "FileExcel",
+            "FileOneNote",
+            "FileICE",
+            "FileVF",
+            "Folder",
+            "FolderAdd",
+        ]}
+        title="Media Icons"
+    />
+);
+
+export const InteractiveIcons: Story = () => (
+    <FIconTable
+        column={4}
+        icons={[
+            "More",
+            "MoreVertical",
+            "Apps",
+            "AppsAdd",
+            "Chat",
+            "ChatBanning",
+            "Whiteboard",
+            "WhiteboardAdd",
+            "Send",
+            "Cloud",
+            "Exit",
+            "ScreenSharing",
+            "User",
+            "UserInvite",
+            "UserRemove",
+            "UserGroup",
+            "Redo",
+            "Undo",
+            "Setting",
+            "General",
+            "System",
+            "Shortcut",
+            "Update",
+            "Feedback",
+            "Calendar",
+            "Time",
+            "ToolbarFullscreen",
+            "Edit",
+            "ModeLecture",
+            "ClassStart",
+            "ClassPause",
+            "ClassEnd",
+            "HomeOutlined",
+            "CloudOutlined",
+            "HomeFilled",
+            "CloudFilled",
+            "Test",
+            "Github",
+            "Copy",
+            "HandUp",
+            "Delete",
+            "Reset",
+            "Download",
+            "ModeInteractive",
+        ]}
+        title="Interactive Icons"
+    />
+);
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGApps.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGApps.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGApps: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="M5 5h6v6H5zm8 0h6v6h-6zm-8 8h6v6H5zm8 0h6v6h-6z"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGApps;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGAppsAdd.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGAppsAdd.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGAppsAdd: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="M5 5h6v6H5zm8 0h6v6h-6zm0 11h6m-3-3v6M5 13h6v6H5z"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGAppsAdd;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGArrowDown.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGArrowDown.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGArrowDown: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="m16 14-2 2-2 2-2-2-2-2m4 4V6"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGArrowDown;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGArrowLeft.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGArrowLeft.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGArrowLeft: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="m10 8-2 2-2 2 2 2 2 2m-4-4h12"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGArrowLeft;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGArrowRight.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGArrowRight.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGArrowRight: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="m14 8 2 2 2 2-2 2-2 2m4-4H6"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGArrowRight;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGArrowUp.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGArrowUp.tsx
@@ -0,0 +1,16 @@
+import "../style.less";
+import React from "react";
+
+export const SVGArrowUp: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="m16 10-2-2-2-2-2 2-2 2m4-4v12"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGArrowUp;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGCalendar.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGCalendar.tsx
@@ -0,0 +1,27 @@
+import "../style.less";
+import React from "react";
+
+export const SVGCalendar: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect
+            className="flat-icon-stroke"
+            height="14"
+            rx="1"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+            width="16"
+            x="4"
+            y="6"
+        ></rect>
+        <path
+            className="flat-icon-stroke"
+            d="M8 4v4m8-4v4m-9 2h10"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGCalendar;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGCamera.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGCamera.tsx
@@ -0,0 +1,35 @@
+import "../style.less";
+import React from "react";
+
+export const SVGCamera: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle
+            className="flat-icon-stroke"
+            cx="12"
+            cy="11"
+            r="7"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></circle>
+        <circle
+            className="flat-icon-stroke"
+            cx="12"
+            cy="11"
+            r="3"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></circle>
+        <circle className="flat-icon-fill" cx="14.625" cy="6.625" fill="#5D6066" r=".625"></circle>
+        <path
+            className="flat-icon-stroke"
+            d="M7 18.25a8.004 8.004 0 0 0 10 0"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+    </svg>
+);
+
+export default SVGCamera;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGCameraMute.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGCameraMute.tsx
@@ -0,0 +1,23 @@
+import "../style.less";
+import React from "react";
+
+export const SVGCameraMute: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            className="flat-icon-stroke"
+            d="m5 5 14 14"
+            stroke="#5D6066"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+        ></path>
+        <path
+            className="flat-icon-fill"
+            clipRule="evenodd"
+            d="m15.72 18.373.91.909a8.63 8.63 0 0 1-9.788-.364l-.232-.18.78-.976a7.38 7.38 0 0 0 8.33.61Zm2.434-2.87A7.625 7.625 0 0 0 7.497 4.846l.897.896a6.375 6.375 0 0 1 8.864 8.864l.896.897Zm-3.857 1.446.952.951A7.625 7.625 0 0 1 5.1 7.751l.951.952a6.375 6.375 0 0 0 8.246 8.246Zm.956-4.348a3.625 3.625 0 0 0-4.854-4.854l.964.964a2.378 2.378 0 0 1 2.926 2.926l.964.964Zm-.628-5.351a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25Z"
+            fill="#5D6066"
+            fillRule="evenodd"
+        ></path>
+    </svg>
+);
+
+export default SVGCameraMute;