=> {
+ return ({ className }) => (
+
);
-
- return MaskIcon;
};
-const MacOSIcon = createMaskIcon(MacOSIconAsset);
-const WindowsIcon = createMaskIcon(WindowsIconAsset);
-
-const WebIcon: React.FC<{ className?: string }> = ({ className }) => (
-
-);
-
-const ClayIcon: React.FC<{ className?: string }> = ({ className }) => (
-
-);
+const AndroidIcon = makeIcon('android');
+const IOSIcon = makeIcon('ios');
+const HarmonyIcon = makeIcon('harmony');
+const WebIcon = makeIcon('web_lynx');
+const ClayIcon = makeIcon('clay');
+const MacOSIcon = makeIcon('clay_macos');
+const WindowsIcon = makeIcon('clay_windows');
export const PLATFORM_CONFIG: Record
= {
android: {
diff --git a/src/components/api-table/compat-table/assets/icons/android.svg b/src/components/api-table/compat-table/assets/icons/android.svg
index 0ad4277dc..873a2491a 100644
--- a/src/components/api-table/compat-table/assets/icons/android.svg
+++ b/src/components/api-table/compat-table/assets/icons/android.svg
@@ -1,28 +1,5 @@
-
-
-
-
\ No newline at end of file
+
diff --git a/src/components/home-comps/features/icon.tsx b/src/components/home-comps/features/icon.tsx
index fdb663f69..9bedd36e1 100644
--- a/src/components/home-comps/features/icon.tsx
+++ b/src/components/home-comps/features/icon.tsx
@@ -1,38 +1,35 @@
import React from 'react';
import { withBase } from '@rspress/core/runtime';
-import AndroidIcon from '@assets/home/home-icon-android.svg?react';
-import WebIcon from '@/components/api-table/compat-table/assets/icons/web.svg?react';
-import AppleIcon from '@assets/home/home-icon-apple.svg?react';
-import HarmonyIcon from '@assets/home/harmony.svg?react';
-import MacOSIcon from '@/components/api-table/compat-table/assets/icons/macos-text.svg?react';
-import WindowsIcon from '@assets/home/windows.svg?react';
+import { cn } from '@/lib/utils';
+import { PlatformSvg } from '@/components/platform-navigation/PlatformIcon';
import ReactLynxIcon from '@/components/api-table/compat-table/assets/icons/reactlynx.svg?react';
import VueLynxIcon from '@assets/home/vue-lynx-logo.svg?react';
import styles from './index.module.less';
-const IconAndroid = () => {
- return ;
-};
-
-const IconIOS = () => {
- return ;
-};
-
-const IconWeb = () => {
- return ;
-};
-
-const IconHarmony = () => {
- return ;
-};
-
-const IconMacOS = () => {
- return ;
-};
-
-const IconWindows = () => {
- return ;
-};
+// Each platform gets a brand-adjacent hue, kept at matching tonal weight
+// (Tailwind ~600 in light mode, ~400 in dark) so the row stays harmonious.
+const PLATFORM_TINT: Record = {
+ ios: 'text-zinc-700 dark:text-zinc-300',
+ macos: 'text-zinc-700 dark:text-zinc-300',
+ android: 'text-emerald-600 dark:text-emerald-400',
+ harmony: 'text-rose-600 dark:text-rose-400',
+ web: 'text-orange-600 dark:text-orange-400',
+ windows: 'text-sky-600 dark:text-sky-400',
+};
+
+const PlatformIconWrapper = ({ platform }: { platform: string }) => (
+
+);
+
+const IconIOS = () => ;
+const IconAndroid = () => ;
+const IconWeb = () => ;
+const IconHarmony = () => ;
+const IconMacOS = () => ;
+const IconWindows = () => ;
const IconReactLynx = () => {
return ;
diff --git a/src/components/home-comps/features/index.module.less b/src/components/home-comps/features/index.module.less
index ba9631d42..24a8a56d8 100644
--- a/src/components/home-comps/features/index.module.less
+++ b/src/components/home-comps/features/index.module.less
@@ -35,41 +35,8 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
- .ios-icon {
- path {
- fill: var(--home-blog-btn-color) !important;
- }
- }
-
- .web-icon {
- width: 18px;
- height: 18px;
- path {
- fill: var(--home-blog-btn-color) !important;
- }
- }
-
- .harmony-icon {
- width: 21px;
- path {
- fill: var(--home-blog-btn-color) !important;
- }
- }
-
- .macos-icon {
- width: 18px;
- height: 18px;
- path {
- fill: var(--home-blog-btn-color) !important;
- }
- }
-
- .windows-icon {
- width: 18px;
- height: 18px;
- path {
- fill: var(--home-blog-btn-color) !important;
- }
+ .platform-icon {
+ --icon-size: 18px;
}
.reactlynx-icon {
diff --git a/src/components/platform-navigation/PlatformIcon.tsx b/src/components/platform-navigation/PlatformIcon.tsx
index 53d2ea9f3..2ee4bf6c5 100644
--- a/src/components/platform-navigation/PlatformIcon.tsx
+++ b/src/components/platform-navigation/PlatformIcon.tsx
@@ -3,31 +3,46 @@ import { cn } from '../../lib/utils';
import { mapPlatformNameToIconName } from '../api-table/compat-table/headers';
import { PlatformIconProps } from './types';
import './icon.scss';
-import AndroidIcon from '@assets/home/home-icon-android.svg';
-import WindowsIcon from '@assets/home/windows.svg';
-import IosIcon from '@assets/home/home-icon-apple.svg';
-import HarmonyIcon from '@assets/home/harmony.svg';
-import ClayIcon from '@assets/home/clay.svg';
-// Use the same HTML5 web icon and macOS text mark as the homepage features
-// section so platform indicators stay consistent across the site.
+
+// Single canonical icon source for every platform-icon surface on the site.
+// Adding a new platform = add an SVG here, extend ICON_NAME_TO_URL, done.
+import AppleIcon from '@/components/api-table/compat-table/assets/icons/apple.svg';
+import AndroidIcon from '@/components/api-table/compat-table/assets/icons/android.svg';
+import HarmonyIcon from '@/components/api-table/compat-table/assets/icons/harmony.svg';
import WebIcon from '@/components/api-table/compat-table/assets/icons/web.svg';
+import WindowsIcon from '@/components/api-table/compat-table/assets/icons/windows.svg';
import MacosIcon from '@/components/api-table/compat-table/assets/icons/macos-text.svg';
+import ClayIcon from '@/components/api-table/compat-table/assets/icons/clay.svg';
+import ReactlynxIcon from '@/components/api-table/compat-table/assets/icons/reactlynx.svg';
-const toPlatformName = (platform: string): PlatformName => {
- switch (platform) {
- case 'ios':
- case 'ios-simulator':
- case 'macos':
- case 'macos-arm64':
- case 'macos-intel':
- return 'ios';
- case 'android':
- return 'android';
- case 'web':
- return 'web_lynx';
- default:
- return 'web_lynx';
+const ICON_NAME_TO_URL: Record = {
+ apple: AppleIcon,
+ android: AndroidIcon,
+ harmony: HarmonyIcon,
+ web: WebIcon,
+ windows: WindowsIcon,
+ 'macos-text': MacosIcon,
+ clay: ClayIcon,
+ reactlynx: ReactlynxIcon,
+};
+
+const toIconUrl = (platformName: PlatformName | string): string => {
+ // Extra string ids used by tabs/badges that aren't in BCD.PlatformName.
+ if (platformName === 'clay') return ClayIcon;
+ if (
+ platformName === 'macos' ||
+ platformName === 'macos-arm64' ||
+ platformName === 'macos-intel'
+ ) {
+ return MacosIcon;
}
+ if (platformName === 'web') return WebIcon;
+ if (platformName === 'windows') return WindowsIcon;
+
+ // BCD-known platform names route through compat-table's mapping so we stay
+ // consistent with the APITable headers (clay_macos → macos-text etc.).
+ const iconName = mapPlatformNameToIconName(platformName as PlatformName);
+ return ICON_NAME_TO_URL[iconName] ?? ClayIcon;
};
export const PlatformSvg = ({
@@ -35,46 +50,11 @@ export const PlatformSvg = ({
className,
key,
}: {
- // Accept extra string ids ('clay', 'macos', 'macos-arm64', 'macos-intel',
- // 'windows') alongside the canonical PlatformName so PlatformTabs and
- // ChoiceTabs can use the homepage-aligned icon set without TS friction.
platformName: PlatformName | string;
className?: string;
key?: string;
}) => {
- var svgUrl;
- if (platformName === 'clay') {
- svgUrl = ClayIcon;
- } else if (
- platformName === 'macos' ||
- platformName === 'macos-arm64' ||
- platformName === 'macos-intel' ||
- platformName === 'clay_macos'
- ) {
- // Use the dedicated "macOS" text mark so macOS is visually distinct from
- // iOS (which both share the Apple glyph).
- svgUrl = MacosIcon;
- } else {
- switch (mapPlatformNameToIconName(platformName)) {
- case 'android':
- svgUrl = AndroidIcon;
- break;
- case 'apple':
- svgUrl = IosIcon;
- break;
- case 'harmony':
- svgUrl = HarmonyIcon;
- break;
- case 'windows':
- svgUrl = WindowsIcon;
- break;
- case 'web':
- svgUrl = WebIcon;
- break;
- default:
- svgUrl = ClayIcon;
- }
- }
+ const svgUrl = toIconUrl(platformName);
return (
+ />
);
};
+const toPlatformName = (platform: string): PlatformName => {
+ switch (platform) {
+ case 'ios':
+ case 'ios-simulator':
+ case 'macos':
+ case 'macos-arm64':
+ case 'macos-intel':
+ return 'ios';
+ case 'android':
+ return 'android';
+ case 'web':
+ return 'web_lynx';
+ default:
+ return 'web_lynx';
+ }
+};
+
/**
* Component for rendering platform icons
*/