diff --git a/apps/web/pages/icons.tsx b/apps/web/pages/icons.tsx new file mode 100644 index 0000000000..d15a292bca --- /dev/null +++ b/apps/web/pages/icons.tsx @@ -0,0 +1,77 @@ +"use client"; + +import type { InferGetStaticPropsType } from "next"; +import { Inter } from "next/font/google"; +import localFont from "next/font/local"; +import Head from "next/head"; + +import { APP_NAME } from "@calcom/lib/constants"; +import type { IconName } from "@calcom/ui"; +import { Icon, IconSprites } from "@calcom/ui"; + +import { lucideIconList } from "../../../packages/ui/components/icon/icon-list.mjs"; + +const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" }); +const calFont = localFont({ + src: "../fonts/CalSans-SemiBold.woff2", + variable: "--font-cal", + preload: true, + display: "swap", + weight: "600", +}); + +export const getStaticProps = async () => { + return { + props: { + icons: Array.from(lucideIconList).sort() as IconName[], + }, + }; +}; + +const IconGrid = (props: { + title: string; + icons: IconName[]; + rootClassName?: string; + iconClassName?: string; +}) => ( +
+

{props.title}

+
+ {props.icons.map((icon) => { + return ( +
+ +
{icon}
+
+ ); + })} +
+
+); + +export default function IconsPage(props: InferGetStaticPropsType) { + return ( +
+ + Icon showcase | {APP_NAME} + + + +
+

Icons showcase

+ + +
+
+ ); +} diff --git a/apps/web/playwright/icons.e2e.ts b/apps/web/playwright/icons.e2e.ts new file mode 100644 index 0000000000..ab68bf289e --- /dev/null +++ b/apps/web/playwright/icons.e2e.ts @@ -0,0 +1,10 @@ +import { expect } from "@playwright/test"; + +import { test } from "./lib/fixtures"; + +test("Icons render properly", async ({ page }, testInfo) => { + await page.goto("/icons"); + await expect(page).toHaveScreenshot("icons.png", { + fullPage: true, + }); +}); diff --git a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-darwin.png b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-darwin.png new file mode 100644 index 0000000000..9ba6975127 Binary files /dev/null and b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-darwin.png differ diff --git a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png new file mode 100644 index 0000000000..632c305f10 Binary files /dev/null and b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png differ diff --git a/apps/web/public/icons/sprite.svg b/apps/web/public/icons/sprite.svg index 5d0c578415..d65166c2e9 100644 --- a/apps/web/public/icons/sprite.svg +++ b/apps/web/public/icons/sprite.svg @@ -2,77 +2,77 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -85,7 +85,7 @@ - + @@ -110,7 +110,7 @@ - + @@ -118,7 +118,7 @@ - + @@ -126,182 +126,182 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -312,77 +312,77 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -392,141 +392,141 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -537,25 +537,25 @@ - + - + - + - + - + @@ -566,7 +566,7 @@ - + @@ -576,7 +576,7 @@ - + @@ -586,83 +586,83 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/ui/components/icon/Icon.tsx b/packages/ui/components/icon/Icon.tsx index 7a7c89a3c3..5dbcdb201e 100644 --- a/packages/ui/components/icon/Icon.tsx +++ b/packages/ui/components/icon/Icon.tsx @@ -1,17 +1,26 @@ import { type SVGProps } from "react"; +import cn from "@calcom/lib/classNames"; + import type { IconName } from "./icon-names"; function Icon({ name, size = 16, + className, ...props }: SVGProps & { name: IconName; size?: number | string; }) { return ( - + ); diff --git a/packages/ui/components/icon/icon-list.mjs b/packages/ui/components/icon/icon-list.mjs index 9c2dbf107b..aca5f576c2 100644 --- a/packages/ui/components/icon/icon-list.mjs +++ b/packages/ui/components/icon/icon-list.mjs @@ -44,7 +44,6 @@ export const lucideIconList = new Set([ "circle", "clipboard-check", "clipboard", - "clipboard", "clock", "code", "columns-3", @@ -95,7 +94,6 @@ export const lucideIconList = new Set([ "paintbrush", "paperclip", "pencil", - "pencil", "phone-call", "phone", "plus", @@ -121,10 +119,8 @@ export const lucideIconList = new Set([ "sunrise", "sunset", "terminal", - "terminal", "trash-2", "trash", - "trash", "trello", "triangle-alert", "upload", diff --git a/packages/ui/scripts/build-icons.mjs b/packages/ui/scripts/build-icons.mjs index fabf7df0fc..3ce76a4c8c 100644 --- a/packages/ui/scripts/build-icons.mjs +++ b/packages/ui/scripts/build-icons.mjs @@ -89,6 +89,7 @@ async function generateSvgSprite({ files, inputDir, outputPath }) { svg.tagName = "symbol"; svg.setAttribute("id", iconName(file)); + svg.setAttribute("fill", "inherit"); svg.removeAttribute("xmlns"); svg.removeAttribute("xmlns:xlink"); svg.removeAttribute("version");