diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx index f0b031982b..667d204e65 100644 --- a/site/src/components/IconField/EmojiPicker.tsx +++ b/site/src/components/IconField/EmojiPicker.tsx @@ -1,22 +1,25 @@ import data from "@emoji-mart/data/sets/15/apple.json"; import EmojiMart from "@emoji-mart/react"; import { type ComponentProps, type FC, useEffect } from "react"; +import { DEPRECATED_ICONS } from "theme/deprecatedIcons"; import icons from "theme/icons.json"; const custom = [ { id: "icons", name: "Icons", - emojis: icons.map((icon) => { - const id = icon.split(".")[0]; + emojis: icons + .filter((icon) => !DEPRECATED_ICONS.includes(icon)) + .map((icon) => { + const id = icon.split(".")[0]; - return { - id, - name: id, - keywords: id.split("-"), - skins: [{ src: `/icon/${icon}` }], - }; - }), + return { + id, + name: id, + keywords: id.split("-"), + skins: [{ src: `/icon/${icon}` }], + }; + }), }, ]; diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx index 801601f7ad..b455cc0eaa 100644 --- a/site/src/pages/IconsPage/IconsPage.tsx +++ b/site/src/pages/IconsPage/IconsPage.tsx @@ -18,6 +18,7 @@ import { } from "components/Tooltip/Tooltip"; import { SearchIcon, XIcon } from "lucide-react"; import { type FC, type ReactNode, useMemo, useState } from "react"; +import { DEPRECATED_ICONS } from "theme/deprecatedIcons"; import { defaultParametersForBuiltinIcons, parseImageParameters, @@ -26,7 +27,11 @@ import icons from "theme/icons.json"; import uFuzzy from "ufuzzy"; import { pageTitle } from "utils/page"; -const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]); +const filteredIcons = icons.filter((icon) => !DEPRECATED_ICONS.includes(icon)); +const iconsWithoutSuffix = filteredIcons.map((icon) => { + const lastDotIndex = icon.lastIndexOf("."); + return lastDotIndex === -1 ? icon : icon.substring(0, lastDotIndex); +}); const fuzzyFinder = new uFuzzy({ intraMode: 1, intraIns: 1, @@ -42,7 +47,10 @@ const IconsPage: FC = () => { const searchedIcons = useMemo(() => { if (!searchText) { - return icons.map((icon) => ({ url: `/icon/${icon}`, description: icon })); + return filteredIcons.map((icon) => ({ + url: `/icon/${icon}`, + description: icon, + })); } const [map, info, sorted] = fuzzyFinder.search( @@ -56,7 +64,7 @@ const IconsPage: FC = () => { } return sorted.map((i) => { - const iconName = icons[info.idx[i]]; + const iconName = filteredIcons[info.idx[i]]; const ranges = info.ranges[i]; const nodes: ReactNode[] = []; diff --git a/site/src/theme/deprecatedIcons.ts b/site/src/theme/deprecatedIcons.ts new file mode 100644 index 0000000000..73995a95a8 --- /dev/null +++ b/site/src/theme/deprecatedIcons.ts @@ -0,0 +1,23 @@ +/** + * Deprecated icons are icons that are no longer maintained. + * They are kept here for backward compatibility, however they + * are not displayed in the emoji picker and are not included in + * the icon list. + */ + +export const DEPRECATED_ICONS = [ + // we have alternatives in `apple-black.svg`. + "apple-grey.svg", + // we have alternatives in `aws.svg`. + "aws-monochrome.svg", + // we already serve this in `aws.svg`. + "aws.png", + // we already serve this in `azure.svg`. + "azure.png", + // we already serve this in `docker.svg`. + "docker.png", + // we have alternatives in `docker.svg`. + "docker-white.svg", + // we already serve this in `k8s.svg`. + "k8s.png", +] satisfies string[];