Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add types for SVG imports, remove unused #318

Merged
merged 3 commits into from
Nov 18, 2024
Merged

fix: add types for SVG imports, remove unused #318

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33fa5c7
fix: define SVG imports as SVGComponent
stefl Oct 29, 2024
f410c13
fix: add types for SVG imports, remove unused
stefl Oct 29, 2024
81b5fb0
Merge branch 'main' into fix/types_for_svgs
codeincontext Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 0 additions & 121 deletions apps/nextjs/src/components/AppComponents/Chat/ui/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,58 +20,6 @@ function IconOpenAI({ className, ...props }: React.ComponentProps<"svg">) {
);
}

function IconVercel({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
aria-label="Vercel logomark"
role="img"
viewBox="0 0 74 64"
className={cn("h-10 w-10", className)}
{...props}
>
<path
d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
fill="currentColor"
></path>
</svg>
);
}

function IconGitHub({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
className={cn("h-10 w-10", className)}
{...props}
>
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
);
}

function IconSeparator({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
fill="none"
shapeRendering="geometricPrecision"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
aria-hidden="true"
className={cn("h-10 w-10", className)}
{...props}
>
<path d="M16.88 3.549L7.12 20.451"></path>
</svg>
);
}

function IconArrowDown({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
Expand Down Expand Up @@ -226,34 +174,6 @@ function IconSidebar({ className, ...props }: React.ComponentProps<"svg">) {
);
}

function IconMoon({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
fill="currentColor"
className={cn("h-10 w-10", className)}
{...props}
>
<path d="M233.54 142.23a8 8 0 0 0-8-2 88.08 88.08 0 0 1-109.8-109.8 8 8 0 0 0-10-10 104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88 104.84 104.84 0 0 0 37-52.91 8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104 106 106 0 0 0 14.92-1.06 89 89 0 0 1-26.02 31.4Z" />
</svg>
);
}

function IconSun({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
fill="currentColor"
className={cn("h-10 w-10", className)}
{...props}
>
<path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64 64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48 48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z" />
</svg>
);
}

function IconCopy({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
Expand Down Expand Up @@ -358,46 +278,9 @@ function IconUsers({ className, ...props }: React.ComponentProps<"svg">) {
);
}

function IconExternalLink({
className,
...props
}: React.ComponentProps<"svg">) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
className={cn("h-10 w-10", className)}
viewBox="0 0 256 256"
{...props}
>
<path d="M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z" />
</svg>
);
}

function IconChevronUpDown({
className,
...props
}: React.ComponentProps<"svg">) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
className={cn("h-10 w-10", className)}
viewBox="0 0 256 256"
{...props}
>
<path d="M181.66 170.34a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32 0l-48-48a8 8 0 0 1 11.32-11.32L128 212.69l42.34-42.35a8 8 0 0 1 11.32 0Zm-96-84.68L128 43.31l42.34 42.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32Z" />
</svg>
);
}

export {
IconEdit,
IconOpenAI,
IconVercel,
IconGitHub,
IconSeparator,
IconArrowDown,
IconArrowRight,
IconUser,
Expand All @@ -409,14 +292,10 @@ export {
IconRefresh,
IconStop,
IconSidebar,
IconMoon,
IconSun,
IconCopy,
IconCheck,
IconDownload,
IconClose,
IconShare,
IconUsers,
IconExternalLink,
IconChevronUpDown,
};
155 changes: 82 additions & 73 deletions apps/nextjs/src/components/Icon/svgs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,77 +73,86 @@ import upload from "@/assets/svg/upload.svg";

import type { IconName } from "./types";

export const svgs: Record<IconName, string> = {
"arrow-left": arrowLeft,
"arrow-right": arrowRight,
"arrow-up": arrowUp,
"arrow-down": arrowDown,
bell: bell,
"chevron-left": chevronLeft,
"chevron-right": chevronRight,
"chevron-up": chevronUp,
"chevron-down": chevronDown,
cross: cross,
copy: copy,
download: download,
upload: upload,
"upload-white": uploadWhite,
external: external,
globe: globe,
hamburger: hamburger,
home: home,
"mini-menu": miniMenu,
print: print,
save: save,
search: search,
send: send,
share: share,
star: star,
tick: tick,
warning: warning,
facebook: facebook,
twitter: twitter,
linkedin: linkedin,
instagram: instagram,
reload: reload,
equipment: equipment,
"equipment-white": equipmentWhite,
"reload-white": reloadWhite,
"arrow-left-white": arrowLeftWhite,
"arrow-right-white": arrowRightWhite,
"arrow-up-white": arrowUpWhite,
"arrow-down-white": arrowDownWhite,
"bell-white": bellWhite,
"chevron-left-white": chevronLeftWhite,
"chevron-right-white": chevronRightWhite,
"chevron-up-white": chevronUpWhite,
"chevron-down-white": chevronDownWhite,
"cross-white": crossWhite,
"copy-white": copyWhite,
"download-white": downloadWhite,
"external-white": externalWhite,
"globe-white": globeWhite,
"hamburger-white": hamburgerWhite,
"home-white": homeWhite,
"mini-menu-white": miniMenuWhite,
"print-white": printWhite,
"save-white": saveWhite,
"search-white": searchWhite,
"send-white": sendWhite,
"share-white": shareWhite,
"star-white": starWhite,
"tick-white": tickWhite,
"warning-white": warningWhite,
"facebook-white": facebookWhite,
"twitter-white": twitterWhite,
"linkedin-white": linkedinWhite,
"instagram-white": instagramWhite,
"question-mark": questionMark,
"question-mark-white": questionMarkWhite,
sidebar: sidebar,
"sidebar-white": sidebarWhite,
acorn: acorn,
"acorn-white": acornWhite,
padlock: padlock,
"ai-lesson": aiLesson,
type SVGImport = {
src: string;
height: number;
width: number;
blurDataURL: string;
blurWidth: number;
blurHeight: number;
};
Comment on lines +76 to +83
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This approach does work, but there should be a way to set the type for svg imports. I know there is in webpack, not sure how to do it with turbopack


export const svgs: Record<IconName, SVGImport> = {
"arrow-left": arrowLeft as SVGImport,
"arrow-right": arrowRight as SVGImport,
"arrow-up": arrowUp as SVGImport,
"arrow-down": arrowDown as SVGImport,
bell: bell as SVGImport,
"chevron-left": chevronLeft as SVGImport,
"chevron-right": chevronRight as SVGImport,
"chevron-up": chevronUp as SVGImport,
"chevron-down": chevronDown as SVGImport,
cross: cross as SVGImport,
copy: copy as SVGImport,
download: download as SVGImport,
upload: upload as SVGImport,
"upload-white": uploadWhite as SVGImport,
external: external as SVGImport,
globe: globe as SVGImport,
hamburger: hamburger as SVGImport,
home: home as SVGImport,
"mini-menu": miniMenu as SVGImport,
print: print as SVGImport,
save: save as SVGImport,
search: search as SVGImport,
send: send as SVGImport,
share: share as SVGImport,
star: star as SVGImport,
tick: tick as SVGImport,
warning: warning as SVGImport,
facebook: facebook as SVGImport,
twitter: twitter as SVGImport,
linkedin: linkedin as SVGImport,
instagram: instagram as SVGImport,
reload: reload as SVGImport,
equipment: equipment as SVGImport,
"equipment-white": equipmentWhite as SVGImport,
"reload-white": reloadWhite as SVGImport,
"arrow-left-white": arrowLeftWhite as SVGImport,
"arrow-right-white": arrowRightWhite as SVGImport,
"arrow-up-white": arrowUpWhite as SVGImport,
"arrow-down-white": arrowDownWhite as SVGImport,
"bell-white": bellWhite as SVGImport,
"chevron-left-white": chevronLeftWhite as SVGImport,
"chevron-right-white": chevronRightWhite as SVGImport,
"chevron-up-white": chevronUpWhite as SVGImport,
"chevron-down-white": chevronDownWhite as SVGImport,
"cross-white": crossWhite as SVGImport,
"copy-white": copyWhite as SVGImport,
"download-white": downloadWhite as SVGImport,
"external-white": externalWhite as SVGImport,
"globe-white": globeWhite as SVGImport,
"hamburger-white": hamburgerWhite as SVGImport,
"home-white": homeWhite as SVGImport,
"mini-menu-white": miniMenuWhite as SVGImport,
"print-white": printWhite as SVGImport,
"save-white": saveWhite as SVGImport,
"search-white": searchWhite as SVGImport,
"send-white": sendWhite as SVGImport,
"share-white": shareWhite as SVGImport,
"star-white": starWhite as SVGImport,
"tick-white": tickWhite as SVGImport,
"warning-white": warningWhite as SVGImport,
"facebook-white": facebookWhite as SVGImport,
"twitter-white": twitterWhite as SVGImport,
"linkedin-white": linkedinWhite as SVGImport,
"instagram-white": instagramWhite as SVGImport,
"question-mark": questionMark as SVGImport,
"question-mark-white": questionMarkWhite as SVGImport,
sidebar: sidebar as SVGImport,
"sidebar-white": sidebarWhite as SVGImport,
acorn: acorn as SVGImport,
"acorn-white": acornWhite as SVGImport,
padlock: padlock as SVGImport,
"ai-lesson": aiLesson as SVGImport,
};
Loading