mirror of
https://github.com/outline/outline.git
synced 2026-06-13 11:25:03 +03:00
Update integrations directory to color icons (#11516)
This commit is contained in:
Tom Moor
@@ -1,4 +1,3 @@
|
||||
import type { Icon } from "outline-icons";
|
||||
import {
|
||||
EmailIcon,
|
||||
ProfileIcon,
|
||||
@@ -19,7 +18,6 @@ import {
|
||||
SmileyIcon,
|
||||
BuildingBlocksIcon,
|
||||
} from "outline-icons";
|
||||
import type { ComponentProps } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { integrationSettingsPath } from "@shared/utils/routeHelpers";
|
||||
@@ -54,7 +52,11 @@ const CustomEmojis = lazy(() => import("~/scenes/Settings/CustomEmojis"));
|
||||
export type ConfigItem = {
|
||||
name: string;
|
||||
path: string;
|
||||
icon: React.FC<ComponentProps<typeof Icon>>;
|
||||
icon: React.FC<{
|
||||
size?: number;
|
||||
fill?: string;
|
||||
monochrome?: boolean;
|
||||
}>;
|
||||
component: React.ComponentType;
|
||||
description?: string;
|
||||
preload?: () => void;
|
||||
|
||||
@@ -5,7 +5,6 @@ import { s, ellipsis, hover } from "@shared/styles";
|
||||
import type { ConfigItem } from "~/hooks/useSettingsConfig";
|
||||
import Button from "../../../components/Button";
|
||||
import Text from "../../../components/Text";
|
||||
import { HStack } from "~/components/primitives/HStack";
|
||||
import { VStack } from "~/components/primitives/VStack";
|
||||
import { Status } from "./Status";
|
||||
import Flex from "@shared/components/Flex";
|
||||
@@ -20,14 +19,14 @@ function IntegrationCard({ integration, isConnected }: Props) {
|
||||
|
||||
return (
|
||||
<Card as={Link} to={integration.path}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<HStack>
|
||||
<integration.icon size={32} />
|
||||
<VStack spacing={0} align="flex-start">
|
||||
<Flex justify="space-between" align="flex-start">
|
||||
<VStack align="flex-start">
|
||||
<integration.icon size={32} monochrome={false} />
|
||||
<VStack spacing={2} align="flex-start">
|
||||
<Name>{integration.name}</Name>
|
||||
{isConnected && <Status>{t("Connected")}</Status>}
|
||||
</VStack>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Button as="span" neutral>
|
||||
{isConnected ? t("Configure") : t("Connect")}
|
||||
</Button>
|
||||
|
||||
@@ -5,9 +5,15 @@ type Props = {
|
||||
size?: number;
|
||||
/** The color of the icon, defaults to the current text color */
|
||||
fill?: string;
|
||||
/** Whether to render the monochrome version, defaults to true */
|
||||
monochrome?: boolean;
|
||||
};
|
||||
|
||||
export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
export default function Icon({
|
||||
size = 24,
|
||||
fill = "currentColor",
|
||||
monochrome = true,
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
@@ -16,11 +22,36 @@ export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.3259 5.24514H9.3371C8.23873 5.24514 7.34832 6.0674 7.34832 7.08171C7.34832 8.09602 8.23873 8.91828 9.3371 8.91828H11.3259V5.24514ZM11.3259 4H12.6742H14.663C16.5061 4 18 5.37972 18 7.08171C18 8.08609 17.4798 8.97825 16.6745 9.54085C17.4798 10.1035 18 10.9956 18 12C18 13.702 16.5061 15.0817 14.663 15.0817C13.9178 15.0817 13.2296 14.8561 12.6742 14.4749V15.0817V16.9183C12.6742 18.6203 11.1801 20 9.3371 20C7.49406 20 6 18.6203 6 16.9183C6 15.9138 6.52029 15.0218 7.32556 14.4591C6.52029 13.8965 6 13.0044 6 12C6 10.9956 6.5203 10.1035 7.32559 9.54086C6.5203 8.97825 6 8.08609 6 7.08171C6 5.37972 7.49406 4 9.3371 4H11.3259ZM12.6742 5.24514V8.91828H14.663C15.7614 8.91828 16.6517 8.09602 16.6517 7.08171C16.6517 6.0674 15.7614 5.24514 14.663 5.24514H12.6742ZM9.3371 13.8366H11.3259V12.0047V12V11.9953V10.1634H9.3371C8.23873 10.1634 7.34832 10.9857 7.34832 12C7.34832 13.0119 8.23447 13.8326 9.32921 13.8366L9.3371 13.8366ZM7.34832 16.9183C7.34832 15.9064 8.23447 15.0856 9.32921 15.0817L9.3371 15.0817H11.3259V16.9183C11.3259 17.9326 10.4355 18.7549 9.3371 18.7549C8.23873 18.7549 7.34832 17.9326 7.34832 16.9183ZM12.6742 11.9963C12.6763 10.9837 13.5659 10.1634 14.663 10.1634C15.7614 10.1634 16.6517 10.9857 16.6517 12C16.6517 13.0143 15.7614 13.8366 14.663 13.8366C13.5659 13.8366 12.6763 13.0163 12.6742 12.0037V11.9963Z"
|
||||
/>
|
||||
{monochrome ? (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.3259 5.24514H9.3371C8.23873 5.24514 7.34832 6.0674 7.34832 7.08171C7.34832 8.09602 8.23873 8.91828 9.3371 8.91828H11.3259V5.24514ZM11.3259 4H12.6742H14.663C16.5061 4 18 5.37972 18 7.08171C18 8.08609 17.4798 8.97825 16.6745 9.54085C17.4798 10.1035 18 10.9956 18 12C18 13.702 16.5061 15.0817 14.663 15.0817C13.9178 15.0817 13.2296 14.8561 12.6742 14.4749V15.0817V16.9183C12.6742 18.6203 11.1801 20 9.3371 20C7.49406 20 6 18.6203 6 16.9183C6 15.9138 6.52029 15.0218 7.32556 14.4591C6.52029 13.8965 6 13.0044 6 12C6 10.9956 6.5203 10.1035 7.32559 9.54086C6.5203 8.97825 6 8.08609 6 7.08171C6 5.37972 7.49406 4 9.3371 4H11.3259ZM12.6742 5.24514V8.91828H14.663C15.7614 8.91828 16.6517 8.09602 16.6517 7.08171C16.6517 6.0674 15.7614 5.24514 14.663 5.24514H12.6742ZM9.3371 13.8366H11.3259V12.0047V12V11.9953V10.1634H9.3371C8.23873 10.1634 7.34832 10.9857 7.34832 12C7.34832 13.0119 8.23447 13.8326 9.32921 13.8366L9.3371 13.8366ZM7.34832 16.9183C7.34832 15.9064 8.23447 15.0856 9.32921 15.0817L9.3371 15.0817H11.3259V16.9183C11.3259 17.9326 10.4355 18.7549 9.3371 18.7549C8.23873 18.7549 7.34832 17.9326 7.34832 16.9183ZM12.6742 11.9963C12.6763 10.9837 13.5659 10.1634 14.663 10.1634C15.7614 10.1634 16.6517 10.9857 16.6517 12C16.6517 13.0143 15.7614 13.8366 14.663 13.8366C13.5659 13.8366 12.6763 13.0163 12.6742 12.0037V11.9963Z"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<path
|
||||
d="M6 18C6 16.3432 7.34316 15 9 15H12V18C12 19.6568 10.6568 21 9 21C7.34316 21 6 19.6568 6 18Z"
|
||||
fill="#24CB71"
|
||||
/>
|
||||
<path
|
||||
d="M12 3V9H15C16.6568 9 18 7.65684 18 6C18 4.34316 16.6568 3 15 3H12Z"
|
||||
fill="#FF7237"
|
||||
/>
|
||||
<path
|
||||
d="M15 15C16.6569 15 18 13.6569 18 12C18 10.3431 16.6569 9 15 9C13.3431 9 12 10.3431 12 12C12 13.6569 13.3431 15 15 15Z"
|
||||
fill="#00B6FF"
|
||||
/>
|
||||
<path
|
||||
d="M6 6C6 7.65684 7.34316 9 9 9H12V3H9C7.34316 3 6 4.34316 6 6Z"
|
||||
fill="#FF3737"
|
||||
/>
|
||||
<path
|
||||
d="M6 12C6 13.6568 7.34316 15 9 15H12V9H9C7.34316 9 6 10.3432 6 12Z"
|
||||
fill="#874FFF"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
import * as React from "react";
|
||||
|
||||
type Props = {
|
||||
/** The size of the icon, 24px is default to match standard icons */
|
||||
size?: number;
|
||||
/** The color of the icon, defaults to the current text color */
|
||||
fill?: string;
|
||||
/** Whether to render the monochrome version, defaults to true */
|
||||
monochrome?: boolean;
|
||||
};
|
||||
|
||||
export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
export default function Icon({
|
||||
size = 24,
|
||||
fill = "currentColor",
|
||||
monochrome = true,
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
@@ -16,10 +20,22 @@ export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
viewBox="80 70 220 220"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M265.26416,174.37243l-.2134-.55822-21.19899-55.30908c-.4236-1.08359-1.18542-1.99642-2.17699-2.62689-.98837-.63373-2.14749-.93253-3.32305-.87014-1.1689.06239-2.29195.48925-3.20809,1.21821-.90957.73554-1.56629,1.73047-1.87493,2.85346l-14.31327,43.80662h-57.90965l-14.31327-43.80662c-.30864-1.12299-.96536-2.11791-1.87493-2.85346-.91614-.72895-2.03911-1.15582-3.20809-1.21821-1.17548-.06239-2.33468.23641-3.32297.87014-.99166.63047-1.75348,1.5433-2.17707,2.62689l-21.19891,55.31237-.21348.55493c-6.28158,16.38521-.92929,34.90803,13.05891,45.48782.02621.01641.04922.03611.07552.05582l.18719.14119,32.29094,24.17392,15.97151,12.09024,9.71951,7.34871c2.34117,1.77316,5.57877,1.77316,7.92002,0l9.71943-7.34871,15.96822-12.09024,32.48142-24.31511c.02958-.02299.05588-.04269.08538-.06568,13.97834-10.57977,19.32735-29.09604,13.04905-45.47796Z" />
|
||||
<path d="M265.26416,174.37243l-.2134-.55822c-10.5174,2.16062-20.20405,6.6099-28.49844,12.81593-.1346.0985-25.20497,19.05805-46.55171,35.19699,15.84998,11.98517,29.6477,22.40405,29.6477,22.40405l32.48142-24.31511c.02958-.02299.05588-.04269.08538-.06568,13.97834-10.57977,19.32735-29.09604,13.04905-45.47796Z" />
|
||||
<path d="M160.34962,244.23117l15.97151,12.09024,9.71951,7.34871c2.34117,1.77316,5.57877,1.77316,7.92002,0l9.71943-7.34871,15.96822-12.09024s-13.79772-10.41888-29.6477-22.40405c-15.85327,11.98517-29.65099,22.40405-29.65099,22.40405Z" />
|
||||
<path d="M143.44561,186.63014c-8.29111-6.20274-17.97446-10.65531-28.49507-12.81264l-.21348.55493c-6.28158,16.38521-.92929,34.90803,13.05891,45.48782.02621.01641.04922.03611.07552.05582l.18719.14119,32.29094,24.17392s13.79772-10.41888,29.65099-22.40405c-21.34673-16.13894-46.42031-35.09848-46.55499-35.19699Z" />
|
||||
<path
|
||||
fill={monochrome ? undefined : "#e24329"}
|
||||
d="M265.26416,174.37243l-.2134-.55822-21.19899-55.30908c-.4236-1.08359-1.18542-1.99642-2.17699-2.62689-.98837-.63373-2.14749-.93253-3.32305-.87014-1.1689.06239-2.29195.48925-3.20809,1.21821-.90957.73554-1.56629,1.73047-1.87493,2.85346l-14.31327,43.80662h-57.90965l-14.31327-43.80662c-.30864-1.12299-.96536-2.11791-1.87493-2.85346-.91614-.72895-2.03911-1.15582-3.20809-1.21821-1.17548-.06239-2.33468.23641-3.32297.87014-.99166.63047-1.75348,1.5433-2.17707,2.62689l-21.19891,55.31237-.21348.55493c-6.28158,16.38521-.92929,34.90803,13.05891,45.48782.02621.01641.04922.03611.07552.05582l.18719.14119,32.29094,24.17392,15.97151,12.09024,9.71951,7.34871c2.34117,1.77316,5.57877,1.77316,7.92002,0l9.71943-7.34871,15.96822-12.09024,32.48142-24.31511c.02958-.02299.05588-.04269.08538-.06568,13.97834-10.57977,19.32735-29.09604,13.04905-45.47796Z"
|
||||
/>
|
||||
<path
|
||||
fill={monochrome ? undefined : "#fc6d26"}
|
||||
d="M265.26416,174.37243l-.2134-.55822c-10.5174,2.16062-20.20405,6.6099-28.49844,12.81593-.1346.0985-25.20497,19.05805-46.55171,35.19699,15.84998,11.98517,29.6477,22.40405,29.6477,22.40405l32.48142-24.31511c.02958-.02299.05588-.04269.08538-.06568,13.97834-10.57977,19.32735-29.09604,13.04905-45.47796Z"
|
||||
/>
|
||||
<path
|
||||
fill={monochrome ? undefined : "#fc6d26"}
|
||||
d="M160.34962,244.23117l15.97151,12.09024,9.71951,7.34871c2.34117,1.77316,5.57877,1.77316,7.92002,0l9.71943-7.34871,15.96822-12.09024s-13.79772-10.41888-29.6477-22.40405c-15.85327,11.98517-29.65099,22.40405-29.65099,22.40405Z"
|
||||
/>
|
||||
<path
|
||||
fill={monochrome ? undefined : "#fc6d26"}
|
||||
d="M143.44561,186.63014c-8.29111-6.20274-17.97446-10.65531-28.49507-12.81264l-.21348.55493c-6.28158,16.38521-.92929,34.90803,13.05891,45.48782.02621.01641.04922.03611.07552.05582l.18719.14119,32.29094,24.17392s13.79772-10.41888,29.65099-22.40405c-21.34673-16.13894-46.42031-35.09848-46.55499-35.19699Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,10 +5,15 @@ type Props = {
|
||||
size?: number;
|
||||
/** The color of the icon, defaults to the current text color */
|
||||
fill?: string;
|
||||
className?: string;
|
||||
/** Whether to render the monochrome version, defaults to true */
|
||||
monochrome?: boolean;
|
||||
};
|
||||
|
||||
function GoogleLogo({ size = 24, fill = "currentColor", className }: Props) {
|
||||
function GoogleLogo({
|
||||
size = 24,
|
||||
fill = "currentColor",
|
||||
monochrome = true,
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
@@ -16,9 +21,19 @@ function GoogleLogo({ size = 24, fill = "currentColor", className }: Props) {
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<path d="M19.2312 10.5455H11.8276V13.6364H16.0892C15.6919 15.6 14.0306 16.7273 11.8276 16.7273C9.22733 16.7273 7.13267 14.6182 7.13267 12C7.13267 9.38182 9.22733 7.27273 11.8276 7.27273C12.9472 7.27273 13.9584 7.67273 14.7529 8.32727L17.0643 6C15.6558 4.76364 13.85 4 11.8276 4C7.42159 4 3.88232 7.56364 3.88232 12C3.88232 16.4364 7.42159 20 11.8276 20C15.8002 20 19.4117 17.0909 19.4117 12C19.4117 11.5273 19.3395 11.0182 19.2312 10.5455Z" />
|
||||
<path
|
||||
d="M15.0562 5.7088V18.1034C15.0562 19.4903 16.014 20.2631 17.0281 20.2631C17.9671 20.2631 19 19.6058 19 18.1034V5.8027C19 4.53132 18.061 3.73694 17.0281 3.73694C15.9952 3.73694 15.0562 4.61301 15.0562 5.7088Z"
|
||||
fill={monochrome ? undefined : "#F9AB00"}
|
||||
/>
|
||||
<path
|
||||
d="M9.89185 12V18.1034C9.89185 19.4903 10.8496 20.2631 11.8637 20.2631C12.8027 20.2631 13.8356 19.6058 13.8356 18.1034V12.0939C13.8356 10.8225 12.8966 10.0281 11.8637 10.0281C10.8308 10.0281 9.89185 10.9042 9.89185 12Z"
|
||||
fill={monochrome ? undefined : "#E37400"}
|
||||
/>
|
||||
<path
|
||||
d="M6.69923 20.2631C7.78827 20.2631 8.67111 19.3802 8.67111 18.2912C8.67111 17.2022 7.78827 16.3193 6.69923 16.3193C5.6102 16.3193 4.72736 17.2022 4.72736 18.2912C4.72736 19.3802 5.6102 20.2631 6.69923 20.2631Z"
|
||||
fill={monochrome ? undefined : "#E37400"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,15 @@ type Props = {
|
||||
size?: number;
|
||||
/** The color of the icon, defaults to the current text color */
|
||||
fill?: string;
|
||||
/** Whether to render the monochrome version, defaults to true */
|
||||
monochrome?: boolean;
|
||||
};
|
||||
|
||||
export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
export default function Icon({
|
||||
size = 24,
|
||||
fill = "currentColor",
|
||||
monochrome = true,
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
@@ -16,7 +22,28 @@ export default function Icon({ size = 24, fill = "currentColor" }: Props) {
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
>
|
||||
<path d="M7.36156 14.1107C7.36156 15.0358 6.60586 15.7915 5.68078 15.7915C4.7557 15.7915 4 15.0358 4 14.1107C4 13.1857 4.7557 12.43 5.68078 12.43H7.36156V14.1107ZM8.20847 14.1107C8.20847 13.1857 8.96417 12.43 9.88925 12.43C10.8143 12.43 11.57 13.1857 11.57 14.1107V18.3192C11.57 19.2443 10.8143 20 9.88925 20C8.96417 20 8.20847 19.2443 8.20847 18.3192V14.1107ZM9.88925 7.36156C8.96417 7.36156 8.20847 6.60586 8.20847 5.68078C8.20847 4.7557 8.96417 4 9.88925 4C10.8143 4 11.57 4.7557 11.57 5.68078V7.36156H9.88925ZM9.88925 8.20847C10.8143 8.20847 11.57 8.96417 11.57 9.88925C11.57 10.8143 10.8143 11.57 9.88925 11.57H5.68078C4.7557 11.57 4 10.8143 4 9.88925C4 8.96417 4.7557 8.20847 5.68078 8.20847H9.88925ZM16.6384 9.88925C16.6384 8.96417 17.3941 8.20847 18.3192 8.20847C19.2443 8.20847 20 8.96417 20 9.88925C20 10.8143 19.2443 11.57 18.3192 11.57H16.6384V9.88925ZM15.7915 9.88925C15.7915 10.8143 15.0358 11.57 14.1107 11.57C13.1857 11.57 12.43 10.8143 12.43 9.88925V5.68078C12.43 4.7557 13.1857 4 14.1107 4C15.0358 4 15.7915 4.7557 15.7915 5.68078V9.88925ZM14.1107 16.6384C15.0358 16.6384 15.7915 17.3941 15.7915 18.3192C15.7915 19.2443 15.0358 20 14.1107 20C13.1857 20 12.43 19.2443 12.43 18.3192V16.6384H14.1107ZM14.1107 15.7915C13.1857 15.7915 12.43 15.0358 12.43 14.1107C12.43 13.1857 13.1857 12.43 14.1107 12.43H18.3192C19.2443 12.43 20 13.1857 20 14.1107C20 15.0358 19.2443 15.7915 18.3192 15.7915H14.1107Z" />
|
||||
{monochrome ? (
|
||||
<path d="M7.36156 14.1107C7.36156 15.0358 6.60586 15.7915 5.68078 15.7915C4.7557 15.7915 4 15.0358 4 14.1107C4 13.1857 4.7557 12.43 5.68078 12.43H7.36156V14.1107ZM8.20847 14.1107C8.20847 13.1857 8.96417 12.43 9.88925 12.43C10.8143 12.43 11.57 13.1857 11.57 14.1107V18.3192C11.57 19.2443 10.8143 20 9.88925 20C8.96417 20 8.20847 19.2443 8.20847 18.3192V14.1107ZM9.88925 7.36156C8.96417 7.36156 8.20847 6.60586 8.20847 5.68078C8.20847 4.7557 8.96417 4 9.88925 4C10.8143 4 11.57 4.7557 11.57 5.68078V7.36156H9.88925ZM9.88925 8.20847C10.8143 8.20847 11.57 8.96417 11.57 9.88925C11.57 10.8143 10.8143 11.57 9.88925 11.57H5.68078C4.7557 11.57 4 10.8143 4 9.88925C4 8.96417 4.7557 8.20847 5.68078 8.20847H9.88925ZM16.6384 9.88925C16.6384 8.96417 17.3941 8.20847 18.3192 8.20847C19.2443 8.20847 20 8.96417 20 9.88925C20 10.8143 19.2443 11.57 18.3192 11.57H16.6384V9.88925ZM15.7915 9.88925C15.7915 10.8143 15.0358 11.57 14.1107 11.57C13.1857 11.57 12.43 10.8143 12.43 9.88925V5.68078C12.43 4.7557 13.1857 4 14.1107 4C15.0358 4 15.7915 4.7557 15.7915 5.68078V9.88925ZM14.1107 16.6384C15.0358 16.6384 15.7915 17.3941 15.7915 18.3192C15.7915 19.2443 15.0358 20 14.1107 20C13.1857 20 12.43 19.2443 12.43 18.3192V16.6384H14.1107ZM14.1107 15.7915C13.1857 15.7915 12.43 15.0358 12.43 14.1107C12.43 13.1857 13.1857 12.43 14.1107 12.43H18.3192C19.2443 12.43 20 13.1857 20 14.1107C20 15.0358 19.2443 15.7915 18.3192 15.7915H14.1107Z" />
|
||||
) : (
|
||||
<>
|
||||
<path
|
||||
d="M7.42675 14.0788C7.42675 14.9984 6.68345 15.7418 5.76376 15.7418C4.84408 15.7418 4.10077 14.9984 4.10077 14.0788C4.10077 13.1591 4.84408 12.4158 5.76376 12.4158H7.42675V14.0788ZM8.25825 14.0788C8.25825 13.1591 9.00156 12.4158 9.92124 12.4158C10.8409 12.4158 11.5842 13.1591 11.5842 14.0788V18.2362C11.5842 19.1559 10.8409 19.8992 9.92124 19.8992C9.00156 19.8992 8.25825 19.1559 8.25825 18.2362V14.0788Z"
|
||||
fill="#E01E5A"
|
||||
/>
|
||||
<path
|
||||
d="M9.92127 7.40155C9.00158 7.40155 8.25827 6.65824 8.25827 5.73855C8.25827 4.81887 9.00158 4.07556 9.92127 4.07556C10.841 4.07556 11.5843 4.81887 11.5843 5.73855V7.40155H9.92127ZM9.92127 8.24564C10.841 8.24564 11.5843 8.98895 11.5843 9.90863C11.5843 10.8283 10.841 11.5716 9.92127 11.5716H5.75119C4.8315 11.5716 4.0882 10.8283 4.0882 9.90863C4.0882 8.98895 4.8315 8.24564 5.75119 8.24564H9.92127Z"
|
||||
fill="#36C5F0"
|
||||
/>
|
||||
<path
|
||||
d="M16.5858 9.90863C16.5858 8.98895 17.3291 8.24564 18.2488 8.24564C19.1685 8.24564 19.9118 8.98895 19.9118 9.90863C19.9118 10.8283 19.1685 11.5716 18.2488 11.5716H16.5858V9.90863ZM15.7543 9.90863C15.7543 10.8283 15.011 11.5716 14.0913 11.5716C13.1717 11.5716 12.4283 10.8283 12.4283 9.90863V5.73855C12.4283 4.81887 13.1717 4.07556 14.0913 4.07556C15.011 4.07556 15.7543 4.81887 15.7543 5.73855V9.90863Z"
|
||||
fill="#2EB67D"
|
||||
/>
|
||||
<path
|
||||
d="M14.0913 16.5733C15.011 16.5733 15.7543 17.3166 15.7543 18.2362C15.7543 19.1559 15.011 19.8992 14.0913 19.8992C13.1717 19.8992 12.4283 19.1559 12.4283 18.2362V16.5733H14.0913ZM14.0913 15.7418C13.1717 15.7418 12.4283 14.9984 12.4283 14.0788C12.4283 13.1591 13.1717 12.4158 14.0913 12.4158H18.2614C19.1811 12.4158 19.9244 13.1591 19.9244 14.0788C19.9244 14.9984 19.1811 15.7418 18.2614 15.7418H14.0913Z"
|
||||
fill="#ECB22E"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,17 +5,20 @@ type Props = {
|
||||
size?: number;
|
||||
/** The color of the icon, defaults to the current text color */
|
||||
color?: string;
|
||||
/** Whether to render the monochrome version, defaults to true */
|
||||
monochrome?: boolean;
|
||||
};
|
||||
|
||||
export default function ZapierIcon({
|
||||
size = 24,
|
||||
color = "currentColor",
|
||||
monochrome = true,
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
fill={monochrome ? color : "#FF4A00"}
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user