feat: implement DEPRECATED_ICONS (#21346)

Closes #21320

This PR introduces a list of deprecated icons that should no longer be displayed in the UI. These icons are kept for backward compatibility but are now filtered out from:

1. The emoji picker component
2. The icons page listing

The deprecated icons include:
- Duplicate icons that have better alternatives (e.g., `apple-grey.svg` → `apple-black.svg`)
- PNG versions of icons that already have SVG versions (e.g., `aws.png` → `aws.svg`)
- Monochrome variants that are no longer needed (e.g., `docker-white.svg`)

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}` }],
+				};
+			}),
 	},
 ];
 

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[] = [];

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[];