refactor back to old icons system
This commit is contained in:
Maze Winther
parent
1d40795009
commit
de9b7a7350
|
|
@ -1650,31 +1650,44 @@ ui.ts
|
|||
|
||||
## packages/ui/src/icons
|
||||
|
||||
base-icon.tsx
|
||||
export function BaseIcon({
|
||||
title,
|
||||
size = 24,
|
||||
viewBox = "0 0 24 24",
|
||||
children,
|
||||
...props
|
||||
}: BaseIconProps)
|
||||
brand.tsx
|
||||
export function OcGoogleIcon({ className }: { className?: string })
|
||||
export function OcGithubIcon({ className }: { className?: string })
|
||||
export function OcVercelIcon({ className }: { className?: string })
|
||||
export function OcMarbleIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
export function OcDataBuddyIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
|
||||
create-icon.tsx
|
||||
export function createIcon({ definition }: CreateIconParams)
|
||||
|
||||
index.tsx
|
||||
export const OcGoogleIcon
|
||||
export const OcGithubIcon
|
||||
export const OcVercelIcon
|
||||
export const OcDataBuddyIcon
|
||||
export const OcMarbleIcon
|
||||
export const OcBackgroundIcon
|
||||
export const OcSocialsIcon
|
||||
export const OcTransitionUpIcon
|
||||
export const OcMenuIcon
|
||||
export const OcPencilIcon
|
||||
export const OcLeftArrowIcon
|
||||
export const OcTrashIcon
|
||||
editor.tsx
|
||||
export function OcBackgroundIcon({ className }: { className?: string })
|
||||
export function OcSocialsIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
export function OcTransitionUpIcon({
|
||||
className = "",
|
||||
size = 16,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
|
||||
types.ts
|
||||
export type IconProps = Omit<
|
||||
|
|
@ -1692,10 +1705,37 @@ types.ts
|
|||
nodes: IconNode;
|
||||
}
|
||||
|
||||
## packages/ui/src/icons/registry
|
||||
ui.tsx
|
||||
export function OcMenuIcon({
|
||||
className = "",
|
||||
size = 16,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
export function OcPencilIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
export function OcLeftArrowIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
export function OcTrashIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
})
|
||||
|
||||
brand.ts
|
||||
export const BRAND_ICONS
|
||||
## packages/ui/src/icons/registry
|
||||
|
||||
editor.ts
|
||||
export const EDITOR_ICONS
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./icons": "./src/icons/index.tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import { useId, type ReactNode } from "react";
|
||||
import type { IconProps } from "./types";
|
||||
|
||||
type BaseIconProps = Omit<IconProps, "title"> & {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function BaseIcon({
|
||||
title,
|
||||
size = 24,
|
||||
viewBox = "0 0 24 24",
|
||||
children,
|
||||
...props
|
||||
}: BaseIconProps) {
|
||||
const titleId = useId();
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={viewBox}
|
||||
role="img"
|
||||
aria-labelledby={titleId}
|
||||
>
|
||||
<title id={titleId}>{title}</title>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
export function OcGoogleIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24">
|
||||
<title>Google</title>
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcGithubIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
viewBox="0 -3.5 256 256"
|
||||
preserveAspectRatio="xMinYMin meet"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<g fill="currentColor">
|
||||
<path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0" />
|
||||
|
||||
<path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcVercelIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="20"
|
||||
height="18"
|
||||
viewBox="0 0 76 65"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Vercel</title>
|
||||
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcMarbleIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
fill="none"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<title>Marble</title>
|
||||
<path fill="#202027" d="M0 0h256v256H0z" />
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcDataBuddyIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
viewBox="0 0 8 8"
|
||||
shapeRendering="crispEdges"
|
||||
>
|
||||
<title>Data Buddy</title>
|
||||
<path d="M0 0h8v8H0z" />
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { BaseIcon } from "./base-icon";
|
||||
import type { IconDefinition, IconNode, IconProps } from "./types";
|
||||
import type { JSX } from "react";
|
||||
|
||||
type CreateIconParams = {
|
||||
definition: IconDefinition;
|
||||
};
|
||||
|
||||
function renderIconNodes({ nodes }: { nodes: IconNode }) {
|
||||
const elements: Array<JSX.Element> = [];
|
||||
|
||||
for (const [index, node] of nodes.entries()) {
|
||||
const Element = node.element;
|
||||
const children = node.children
|
||||
? renderIconNodes({ nodes: node.children })
|
||||
: undefined;
|
||||
|
||||
elements.push(
|
||||
<Element key={`${node.element}-${index}`} {...node.props}>
|
||||
{children}
|
||||
</Element>,
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
export function createIcon({ definition }: CreateIconParams) {
|
||||
function Icon({ title, size, ...props }: IconProps) {
|
||||
const iconTitle = title ?? definition.title;
|
||||
|
||||
return (
|
||||
<BaseIcon
|
||||
title={iconTitle}
|
||||
size={size}
|
||||
viewBox={definition.viewBox}
|
||||
{...props}
|
||||
>
|
||||
{renderIconNodes({ nodes: definition.nodes })}
|
||||
</BaseIcon>
|
||||
);
|
||||
}
|
||||
|
||||
Icon.displayName = `${definition.title}Icon`;
|
||||
|
||||
return Icon;
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
export function OcBackgroundIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="353"
|
||||
height="353"
|
||||
viewBox="0 0 353 353"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<title>Background</title>
|
||||
<g clipPath="url(#clip0_1_3)">
|
||||
<rect
|
||||
x="-241.816"
|
||||
y="233.387"
|
||||
width="592.187"
|
||||
height="17.765"
|
||||
transform="rotate(-37 -241.816 233.387)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="-189.907"
|
||||
y="306.804"
|
||||
width="592.187"
|
||||
height="17.765"
|
||||
transform="rotate(-37 -189.907 306.804)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="-146.928"
|
||||
y="389.501"
|
||||
width="592.187"
|
||||
height="17.765"
|
||||
transform="rotate(-37 -146.928 389.501)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="-103.144"
|
||||
y="477.904"
|
||||
width="592.187"
|
||||
height="17.765"
|
||||
transform="rotate(-37 -103.144 477.904)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="-57.169"
|
||||
y="570.714"
|
||||
width="592.187"
|
||||
height="17.765"
|
||||
transform="rotate(-37 -57.169 570.714)"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_3">
|
||||
<rect width="353" height="353" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcSocialsIcon({
|
||||
className = "",
|
||||
size = 32,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 345 243"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<title>Socials</title>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z"
|
||||
fill="#FFFC00"
|
||||
/>
|
||||
<path
|
||||
d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z"
|
||||
stroke="black"
|
||||
strokeWidth="7"
|
||||
/>
|
||||
<path
|
||||
d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z"
|
||||
stroke="black"
|
||||
strokeWidth="7"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M133.5 4H321.5C334.48 4 345 14.5205 345 27.5V215.5C345 228.48 334.48 239 321.5 239H133.5C120.52 239 110 228.48 110 215.5V27.5C110 14.5205 120.52 4 133.5 4Z"
|
||||
fill="#010101"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M261.497 99.4086C271.784 106.758 284.388 111.083 297.999 111.083V84.9035C295.423 84.9045 292.854 84.6357 290.333 84.1016V104.709C276.723 104.709 264.121 100.384 253.831 93.0345V146.459C253.831 173.185 232.155 194.85 205.417 194.85C195.44 194.85 186.167 191.835 178.464 186.665C187.256 195.65 199.516 201.224 213.08 201.224C239.821 201.224 261.498 179.56 261.498 152.833L261.497 99.4086ZM270.953 72.9965C265.696 67.2559 262.244 59.8365 261.497 51.634V48.267H254.233C256.061 58.6916 262.298 67.5981 270.953 72.9965ZM195.376 166.157C192.438 162.308 190.851 157.598 190.858 152.756C190.858 140.533 200.773 130.622 213.005 130.622C215.285 130.621 217.551 130.97 219.723 131.659V104.894C217.185 104.547 214.622 104.399 212.061 104.454V125.286C209.887 124.597 207.62 124.247 205.34 124.249C193.107 124.249 183.193 134.159 183.193 146.384C183.193 155.027 188.149 162.512 195.376 166.157Z"
|
||||
fill="#EE1D52"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M253.831 93.0345C264.121 100.384 276.723 104.709 290.333 104.709V84.1016C282.736 82.4848 276.011 78.5162 270.953 72.9965C262.298 67.5981 256.061 58.6916 254.233 48.267H235.152V152.832C235.108 165.022 225.21 174.892 213.004 174.892C205.811 174.892 199.422 171.465 195.376 166.157C188.149 162.512 183.193 155.027 183.193 146.384C183.193 134.159 193.107 124.249 205.34 124.249C207.683 124.249 209.942 124.614 212.061 125.286V104.454C185.792 104.996 164.665 126.449 164.665 152.833C164.665 166.003 169.926 177.942 178.464 186.665C186.167 191.835 195.44 194.85 205.417 194.85C232.155 194.85 253.831 173.185 253.831 146.459V93.0345Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M290.333 84.1016V78.5293C283.482 78.5396 276.766 76.6229 270.953 72.9965C276.099 78.6269 282.874 82.5087 290.333 84.1016ZM254.233 48.267C254.058 47.2708 253.924 46.2679 253.831 45.2608V41.8938H227.485V146.459C227.443 158.648 217.545 168.518 205.339 168.518C201.754 168.518 198.372 167.669 195.376 166.157C199.422 171.465 205.811 174.892 213.004 174.892C225.21 174.892 235.108 165.022 235.152 152.832V48.267H254.233ZM212.061 104.454L212.061 98.5212C209.859 98.2202 207.64 98.0698 205.418 98.071C178.676 98.071 157 119.736 157 146.459C157 163.214 165.518 177.979 178.464 186.665C169.926 177.942 164.666 166.002 164.666 152.832C164.666 126.449 185.791 104.996 212.061 104.454Z"
|
||||
fill="#69C9D0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcTransitionUpIcon({
|
||||
className = "",
|
||||
size = 16,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<title>Transition Up</title>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2.5 12.6667C2.5 13.4951 3.17157 14.1667 4 14.1667H12C12.8284 14.1667 13.5 13.4951 13.5 12.6667V11.3333C13.5 10.5049 12.8284 9.83333 12 9.83333H4C3.17157 9.83333 2.5 10.5049 2.5 11.3333V12.6667ZM4 15.1667C2.61929 15.1667 1.5 14.0474 1.5 12.6667V11.3333C1.5 9.95262 2.61929 8.83333 4 8.83333H12C13.3807 8.83333 14.5 9.95262 14.5 11.3333V12.6667C14.5 14.0474 13.3807 15.1667 12 15.1667H4Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2 5.83333C1.72386 5.83333 1.5 5.60947 1.5 5.33333L1.5 4C1.5 2.2511 2.91777 0.833332 4.66667 0.833332L11.3333 0.833332C13.0822 0.833332 14.5 2.2511 14.5 4V5.33333C14.5 5.60947 14.2761 5.83333 14 5.83333C13.7239 5.83333 13.5 5.60947 13.5 5.33333V4C13.5 2.80338 12.53 1.83333 11.3333 1.83333L4.66667 1.83333C3.47005 1.83333 2.5 2.80338 2.5 4V5.33333C2.5 5.60947 2.27614 5.83333 2 5.83333Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.35355 3.64645C8.15829 3.45118 7.84171 3.45118 7.64645 3.64645L5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355C5.84171 6.54882 6.15829 6.54882 6.35355 6.35355L7.5 5.20711L7.5 9.33333C7.5 9.60948 7.72386 9.83333 8 9.83333C8.27614 9.83333 8.5 9.60948 8.5 9.33333V5.20711L9.64645 6.35355C9.84171 6.54882 10.1583 6.54882 10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L8.35355 3.64645Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,54 +1,3 @@
|
|||
import { createIcon } from "./create-icon";
|
||||
import { ICON_DEFINITIONS } from "./registry";
|
||||
|
||||
export const OcGoogleIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.google,
|
||||
});
|
||||
|
||||
export const OcGithubIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.github,
|
||||
});
|
||||
|
||||
export const OcVercelIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.vercel,
|
||||
});
|
||||
|
||||
export const OcDataBuddyIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.databuddy,
|
||||
});
|
||||
|
||||
export const OcMarbleIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.marble,
|
||||
});
|
||||
|
||||
export const OcBackgroundIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.background,
|
||||
});
|
||||
|
||||
export const OcSocialsIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.socials,
|
||||
});
|
||||
|
||||
export const OcTransitionUpIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.transitionUp,
|
||||
});
|
||||
|
||||
export const OcMenuIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.menu,
|
||||
});
|
||||
|
||||
export const OcPencilIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.pencil,
|
||||
});
|
||||
|
||||
export const OcLeftArrowIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.leftArrow,
|
||||
});
|
||||
|
||||
export const OcTrashIcon = createIcon({
|
||||
definition: ICON_DEFINITIONS.trash,
|
||||
});
|
||||
|
||||
export type { IconDefinition, IconNode, IconProps } from "./types";
|
||||
export { BaseIcon } from "./base-icon";
|
||||
export { createIcon } from "./create-icon";
|
||||
export * from "./brand";
|
||||
export * from "./editor";
|
||||
export * from "./ui";
|
||||
|
|
|
|||
|
|
@ -1,116 +0,0 @@
|
|||
import type { IconDefinition } from "../types";
|
||||
|
||||
export const BRAND_ICONS = {
|
||||
google: {
|
||||
title: "Google",
|
||||
viewBox: "0 0 24 24",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#4285F4",
|
||||
d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#34A853",
|
||||
d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#FBBC05",
|
||||
d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#EA4335",
|
||||
d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
github: {
|
||||
title: "GitHub",
|
||||
viewBox: "0 -3.5 256 256",
|
||||
nodes: [
|
||||
{
|
||||
element: "g",
|
||||
props: {
|
||||
fill: "currentColor",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
vercel: {
|
||||
title: "Vercel",
|
||||
viewBox: "0 0 76 65",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M37.5274 0L75.0548 65H0L37.5274 0Z",
|
||||
fill: "currentColor",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
marble: {
|
||||
title: "Marble",
|
||||
viewBox: "0 0 256 256",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#202027",
|
||||
d: "M0 0h256v256H0z",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#fff",
|
||||
d: "M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
databuddy: {
|
||||
title: "Data Buddy",
|
||||
viewBox: "0 0 8 8",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M0 0h8v8H0z",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fill: "#fff",
|
||||
d: "M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies Record<string, IconDefinition>;
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
import type { IconDefinition } from "../types";
|
||||
|
||||
export const EDITOR_ICONS = {
|
||||
background: {
|
||||
title: "Background",
|
||||
viewBox: "0 0 353 353",
|
||||
nodes: [
|
||||
{
|
||||
element: "g",
|
||||
props: {
|
||||
clipPath: "url(#clip0_1_3)",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
x: "-241.816",
|
||||
y: "233.387",
|
||||
width: "592.187",
|
||||
height: "17.765",
|
||||
transform: "rotate(-37 -241.816 233.387)",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
x: "-189.907",
|
||||
y: "306.804",
|
||||
width: "592.187",
|
||||
height: "17.765",
|
||||
transform: "rotate(-37 -189.907 306.804)",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
x: "-146.928",
|
||||
y: "389.501",
|
||||
width: "592.187",
|
||||
height: "17.765",
|
||||
transform: "rotate(-37 -146.928 389.501)",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
x: "-103.144",
|
||||
y: "477.904",
|
||||
width: "592.187",
|
||||
height: "17.765",
|
||||
transform: "rotate(-37 -103.144 477.904)",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
x: "-57.169",
|
||||
y: "570.714",
|
||||
width: "592.187",
|
||||
height: "17.765",
|
||||
transform: "rotate(-37 -57.169 570.714)",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
element: "defs",
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
element: "clipPath",
|
||||
props: {
|
||||
id: "clip0_1_3",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
width: "353",
|
||||
height: "353",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
socials: {
|
||||
title: "Socials",
|
||||
viewBox: "0 0 345 243",
|
||||
nodes: [
|
||||
{
|
||||
element: "g",
|
||||
props: {
|
||||
opacity: "0.5",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z",
|
||||
fill: "#FFFC00",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z",
|
||||
stroke: "black",
|
||||
strokeWidth: "7",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z",
|
||||
stroke: "black",
|
||||
strokeWidth: "7",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M133.5 4H321.5C334.48 4 345 14.5205 345 27.5V215.5C345 228.48 334.48 239 321.5 239H133.5C120.52 239 110 228.48 110 215.5V27.5C110 14.5205 120.52 4 133.5 4Z",
|
||||
fill: "#010101",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M261.497 99.4086C271.784 106.758 284.388 111.083 297.999 111.083V84.9035C295.423 84.9045 292.854 84.6357 290.333 84.1016V104.709C276.723 104.709 264.121 100.384 253.831 93.0345V146.459C253.831 173.185 232.155 194.85 205.417 194.85C195.44 194.85 186.167 191.835 178.464 186.665C187.256 195.65 199.516 201.224 213.08 201.224C239.821 201.224 261.498 179.56 261.498 152.833L261.497 99.4086ZM270.953 72.9965C265.696 67.2559 262.244 59.8365 261.497 51.634V48.267H254.233C256.061 58.6916 262.298 67.5981 270.953 72.9965ZM195.376 166.157C192.438 162.308 190.851 157.598 190.858 152.756C190.858 140.533 200.773 130.622 213.005 130.622C215.285 130.621 217.551 130.97 219.723 131.659V104.894C217.185 104.547 214.622 104.399 212.061 104.454V125.286C209.887 124.597 207.62 124.247 205.34 124.249C193.107 124.249 183.193 134.159 183.193 146.384C183.193 155.027 188.149 162.512 195.376 166.157Z",
|
||||
fill: "#EE1D52",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M253.831 93.0345C264.121 100.384 276.723 104.709 290.333 104.709V84.1016C282.736 82.4848 276.011 78.5162 270.953 72.9965C262.298 67.5981 256.061 58.6916 254.233 48.267H235.152V152.832C235.108 165.022 225.21 174.892 213.004 174.892C205.811 174.892 199.422 171.465 195.376 166.157C188.149 162.512 183.193 155.027 183.193 146.384C183.193 134.159 193.107 124.249 205.34 124.249C207.683 124.249 209.942 124.614 212.061 125.286V104.454C185.792 104.996 164.665 126.449 164.665 152.833C164.665 166.003 169.926 177.942 178.464 186.665C186.167 191.835 195.44 194.85 205.417 194.85C232.155 194.85 253.831 173.185 253.831 146.459V93.0345Z",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M290.333 84.1016V78.5293C283.482 78.5396 276.766 76.6229 270.953 72.9965C276.099 78.6269 282.874 82.5087 290.333 84.1016ZM254.233 48.267C254.058 47.2708 253.924 46.2679 253.831 45.2608V41.8938H227.485V146.459C227.443 158.648 217.545 168.518 205.339 168.518C201.754 168.518 198.372 167.669 195.376 166.157C199.422 171.465 205.811 174.892 213.004 174.892C225.21 174.892 235.108 165.022 235.152 152.832V48.267H254.233ZM212.061 104.454L212.061 98.5212C209.859 98.2202 207.64 98.0698 205.418 98.071C178.676 98.071 157 119.736 157 146.459C157 163.214 165.518 177.979 178.464 186.665C169.926 177.942 164.666 166.002 164.666 152.832C164.666 126.449 185.791 104.996 212.061 104.454Z",
|
||||
fill: "#69C9D0",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
transitionUp: {
|
||||
title: "Transition Up",
|
||||
viewBox: "0 0 16 16",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M2.5 12.6667C2.5 13.4951 3.17157 14.1667 4 14.1667H12C12.8284 14.1667 13.5 13.4951 13.5 12.6667V11.3333C13.5 10.5049 12.8284 9.83333 12 9.83333H4C3.17157 9.83333 2.5 10.5049 2.5 11.3333V12.6667ZM4 15.1667C2.61929 15.1667 1.5 14.0474 1.5 12.6667V11.3333C1.5 9.95262 2.61929 8.83333 4 8.83333H12C13.3807 8.83333 14.5 9.95262 14.5 11.3333V12.6667C14.5 14.0474 13.3807 15.1667 12 15.1667H4Z",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M2 5.83333C1.72386 5.83333 1.5 5.60947 1.5 5.33333L1.5 4C1.5 2.2511 2.91777 0.833332 4.66667 0.833332L11.3333 0.833332C13.0822 0.833332 14.5 2.2511 14.5 4V5.33333C14.5 5.60947 14.2761 5.83333 14 5.83333C13.7239 5.83333 13.5 5.60947 13.5 5.33333V4C13.5 2.80338 12.53 1.83333 11.3333 1.83333L4.66667 1.83333C3.47005 1.83333 2.5 2.80338 2.5 4V5.33333C2.5 5.60947 2.27614 5.83333 2 5.83333Z",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
d: "M8.35355 3.64645C8.15829 3.45118 7.84171 3.45118 7.64645 3.64645L5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355C5.84171 6.54882 6.15829 6.54882 6.35355 6.35355L7.5 5.20711L7.5 9.33333C7.5 9.60948 7.72386 9.83333 8 9.83333C8.27614 9.83333 8.5 9.60948 8.5 9.33333V5.20711L9.64645 6.35355C9.84171 6.54882 10.1583 6.54882 10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L8.35355 3.64645Z",
|
||||
fill: "white",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies Record<string, IconDefinition>;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import type { IconDefinition } from "../types";
|
||||
import { BRAND_ICONS } from "./brand";
|
||||
import { UI_ICONS } from "./ui";
|
||||
import { EDITOR_ICONS } from "./editor";
|
||||
|
||||
export const ICON_DEFINITIONS = {
|
||||
...BRAND_ICONS,
|
||||
...UI_ICONS,
|
||||
...EDITOR_ICONS,
|
||||
} satisfies Record<string, IconDefinition>;
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
import type { IconDefinition } from "../types";
|
||||
|
||||
export const UI_ICONS = {
|
||||
menu: {
|
||||
title: "Menu",
|
||||
viewBox: "0 0 141 111",
|
||||
nodes: [
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
y: "19.5",
|
||||
width: "141",
|
||||
height: "12",
|
||||
rx: "7.5",
|
||||
fill: "currentColor",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "rect",
|
||||
props: {
|
||||
y: "67.5",
|
||||
width: "141",
|
||||
height: "12",
|
||||
rx: "7.5",
|
||||
fill: "currentColor",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
pencil: {
|
||||
title: "Edit",
|
||||
viewBox: "0 0 24 24",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M14.0737 3.88545C14.8189 3.07808 15.1915 2.6744 15.5874 2.43893C16.5427 1.87076 17.7191 1.85309 18.6904 2.39232C19.0929 2.6158 19.4769 3.00812 20.245 3.79276C21.0131 4.5774 21.3972 4.96972 21.6159 5.38093C22.1438 6.37312 22.1265 7.57479 21.5703 8.5507C21.3398 8.95516 20.9446 9.33578 20.1543 10.097L10.7506 19.1543C9.25288 20.5969 8.504 21.3182 7.56806 21.6837C6.63212 22.0493 5.6032 22.0224 3.54536 21.9686L3.26538 21.9613C2.63891 21.9449 2.32567 21.9367 2.14359 21.73C1.9615 21.5234 1.98636 21.2043 2.03608 20.5662L2.06308 20.2197C2.20301 18.4235 2.27297 17.5255 2.62371 16.7182C2.97444 15.9109 3.57944 15.2555 4.78943 13.9445L14.0737 3.88545Z",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
fill: "none",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M13 4L20 11",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
fill: "none",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
leftArrow: {
|
||||
title: "Left Arrow",
|
||||
viewBox: "0 0 24 24",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M5.5 12.002H19",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M10.9999 18.002C10.9999 18.002 4.99998 13.583 4.99997 12.0019C4.99996 10.4208 11 6.00195 11 6.00195",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
trash: {
|
||||
title: "Trash",
|
||||
viewBox: "0 0 24 24",
|
||||
nodes: [
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
fill: "none",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
fill: "none",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M9.5 16.5L9.5 10.5",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "path",
|
||||
props: {
|
||||
d: "M14.5 16.5L14.5 10.5",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies Record<string, IconDefinition>;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import type { SVGProps, JSX } from "react";
|
||||
|
||||
export type IconProps = Omit<
|
||||
SVGProps<SVGSVGElement>,
|
||||
"children" | "width" | "height"
|
||||
> & {
|
||||
size?: number;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
export type IconNode = Array<{
|
||||
element: keyof JSX.IntrinsicElements;
|
||||
props: Record<string, string | number | undefined>;
|
||||
children?: IconNode;
|
||||
}>;
|
||||
|
||||
export type IconDefinition = {
|
||||
title: string;
|
||||
viewBox?: string;
|
||||
nodes: IconNode;
|
||||
};
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
export function OcMenuIcon({
|
||||
className = "",
|
||||
size = 16,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 141 111"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<title>Menu</title>
|
||||
<rect y="19.5" width="141" height="12" rx="7.5" fill="currentColor" />
|
||||
<rect y="67.5" width="141" height="12" rx="7.5" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcPencilIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
color="currentColor"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
>
|
||||
<title>Edit</title>
|
||||
<path d="M14.0737 3.88545C14.8189 3.07808 15.1915 2.6744 15.5874 2.43893C16.5427 1.87076 17.7191 1.85309 18.6904 2.39232C19.0929 2.6158 19.4769 3.00812 20.245 3.79276C21.0131 4.5774 21.3972 4.96972 21.6159 5.38093C22.1438 6.37312 22.1265 7.57479 21.5703 8.5507C21.3398 8.95516 20.9446 9.33578 20.1543 10.097L10.7506 19.1543C9.25288 20.5969 8.504 21.3182 7.56806 21.6837C6.63212 22.0493 5.6032 22.0224 3.54536 21.9686L3.26538 21.9613C2.63891 21.9449 2.32567 21.9367 2.14359 21.73C1.9615 21.5234 1.98636 21.2043 2.03608 20.5662L2.06308 20.2197C2.20301 18.4235 2.27297 17.5255 2.62371 16.7182C2.97444 15.9109 3.57944 15.2555 4.78943 13.9445L14.0737 3.88545Z" />
|
||||
<path d="M13 4L20 11" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcLeftArrowIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
color="currentColor"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
>
|
||||
<title>Left Arrow</title>
|
||||
<path d="M5.5 12.002H19" />
|
||||
<path d="M10.9999 18.002C10.9999 18.002 4.99998 13.583 4.99997 12.0019C4.99996 10.4208 11 6.00195 11 6.00195" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OcTrashIcon({
|
||||
className = "",
|
||||
size = 24,
|
||||
}: {
|
||||
className?: string;
|
||||
size?: number;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
color="currentColor"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
>
|
||||
<title>Trash</title>
|
||||
<path d="M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5" />
|
||||
<path d="M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5" />
|
||||
<path d="M9.5 16.5L9.5 10.5" />
|
||||
<path d="M14.5 16.5L14.5 10.5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from "./icons";
|
||||
Loading…
Reference in New Issue