Skip to content

refactor: unify platform icons across homepage, APIStatus, and PlatformSvg #1082

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

Merged
Huxpro merged 5 commits into from
Jun 3, 2026
Merged

refactor: unify platform icons across homepage, APIStatus, and PlatformSvg #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3d20e5
refactor: unify platform icons across homepage, APIStatus, and Platfo…
Huxpro Jun 3, 2026
ca62974
chore: drop now-unused home/ platform icon SVGs
Huxpro Jun 3, 2026
7e57ada
chore(icons): swap Android glyph back to the half-dome silhouette
Huxpro Jun 3, 2026
fb6b699
feat(home): tint feature-card platform icons with brand-adjacent hues
Huxpro Jun 3, 2026
0ab02c7
chore: trigger Netlify rebuild to triage compat-data 404
Huxpro Jun 3, 2026
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
18 changes: 0 additions & 18 deletions docs/public/assets/home/clay.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion docs/public/assets/home/harmony.svg
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions docs/public/assets/home/home-icon-android.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions docs/public/assets/home/home-icon-apple-dark.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions docs/public/assets/home/home-icon-apple.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions docs/public/assets/home/home-icon-web.svg
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions docs/public/assets/home/windows.svg
View file
Open in desktop

This file was deleted.

79 changes: 12 additions & 67 deletions src/components/api-status/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import type { PlatformName } from '@lynx-js/lynx-compat-data';
import { cn } from '@/lib/utils';
import MacOSIconAsset from '../api-table/compat-table/assets/icons/macos-text.svg';
import WindowsIconAsset from '../api-table/compat-table/assets/icons/windows.svg';
import { PlatformSvg } from '@/components/platform-navigation/PlatformIcon';

export interface PlatformConfig {
label: string;
Expand All @@ -16,75 +14,22 @@ export interface PlatformConfig {
};
}

const AndroidIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<path d="M17.532 15.106a1.003 1.003 0 1 1 .001-2.006 1.003 1.003 0 0 1-.001 2.006zm-11.044 0a1.003 1.003 0 1 1 .001-2.006 1.003 1.003 0 0 1-.001 2.006zm11.4-6.018l2.006-3.459a.416.416 0 1 0-.721-.416l-2.032 3.505A12.192 12.192 0 0 0 12.001 7.9a12.19 12.19 0 0 0-5.142.818L4.828 5.213a.416.416 0 1 0-.722.416l2.006 3.461C2.651 11.095.436 14.762.046 18.997h23.909c-.39-4.235-2.606-7.901-6.067-9.909z" />
</svg>
);

const IOSIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg className={className} viewBox="0 0 32 32" fill="currentColor">
<path d="M1.119 12.633v10.576h2.49v-10.576h-2.49zM11.882 10.768c2.553 0 4.193 2.040 4.193 5.232 0 3.217-1.64 5.257-4.193 5.257-2.578 0-4.206-2.040-4.206-5.257 0-3.192 1.627-5.232 4.206-5.232zM25.45 8.578c-3.129 0-5.357 1.727-5.357 4.293 0 2.040 1.264 3.317 3.918 3.93l1.865 0.451c1.815 0.413 2.553 1.014 2.553 2.053 0 1.202-1.214 2.053-2.941 2.053-1.765 0-3.092-0.864-3.229-2.19h-2.503c0.1 2.654 2.278 4.281 5.582 4.281 3.492 0 5.683-1.715 5.683-4.443 0-2.14-1.252-3.354-4.155-4.018l-1.665-0.376c-1.765-0.426-2.491-0.989-2.491-1.94 0-1.202 1.101-2.003 2.729-2.003 1.64 0 2.766 0.814 2.891 2.153h2.453c-0.063-2.528-2.153-4.243-5.332-4.243zM11.882 8.578c-4.205-0-6.834 2.866-6.834 7.422 0 4.594 2.628 7.447 6.834 7.447 4.181 0 6.821-2.854 6.821-7.447 0-4.556-2.641-7.422-6.822-7.422zM2.357 8.553c-0.007-0-0.016-0-0.024-0-0.747 0-1.352 0.605-1.352 1.352s0.605 1.352 1.352 1.352c0.009 0 0.017-0 0.026-0l-0.001 0c0.011 0 0.024 0.001 0.037 0.001 0.747 0 1.352-0.605 1.352-1.352s-0.605-1.352-1.352-1.352c-0.013 0-0.026 0-0.039 0.001l0.002-0z" />
</svg>
);

const HarmonyIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg className={className} viewBox="0 0 1024 1024" fill="currentColor">
<path d="M796.444444 56.888889a170.666667 170.666667 0 0 1 170.666667 170.666667v568.888888a170.666667 170.666667 0 0 1-170.666667 170.666667H227.555556a170.666667 170.666667 0 0 1-170.666667-170.666667V227.555556a170.666667 170.666667 0 0 1 170.666667-170.666667h568.888888z m-118.613333 512.512c-12.117333 0-24.234667 1.649778-36.352 4.949333a101.262222 101.262222 0 0 0-32.540444 15.246222c-9.614222 6.826667-17.351111 15.36-23.324445 25.656889a71.793778 71.793778 0 0 0-8.874666 36.408889c0 12.401778 2.332444 23.04 6.997333 31.800889 4.721778 8.704 10.808889 16.042667 18.375111 21.845333 7.566222 5.859556 16.156444 10.638222 25.770667 14.279112 9.557333 3.697778 19.399111 6.826667 29.525333 9.329777 9.841778 2.844444 19.569778 5.347556 29.127111 7.623111 9.614222 2.275556 18.204444 4.949333 25.770667 7.964445 7.566222 3.072 13.653333 6.883556 18.375111 11.491555a23.893333 23.893333 0 0 1 6.997333 17.863112c0 6.826667-1.763556 12.515556-5.290666 16.952888a37.205333 37.205333 0 0 1-13.255112 10.467556 59.050667 59.050667 0 0 1-17.066666 5.12c-5.688889 0.853333-11.377778 1.308444-17.066667 1.365333a89.884444 89.884444 0 0 1-22.698667-2.844444 56.376889 56.376889 0 0 1-19.114666-8.760889 43.235556 43.235556 0 0 1-13.084445-15.416889 50.062222 50.062222 0 0 1-4.892444-23.267555H567.751111l0.227556 9.784888c0.853333 12.686222 3.811556 23.893333 8.817777 33.621334 6.314667 12.231111 14.848 22.186667 25.6 30.151111a108.088889 108.088889 0 0 0 37.091556 17.294222c13.994667 3.640889 28.444444 5.518222 43.349333 5.518222 18.432 0 34.645333-2.161778 48.64-6.485333 13.994667-4.323556 25.770667-10.353778 35.214223-18.090667 9.443556-7.736889 16.611556-16.952889 21.390222-27.591111 4.778667-10.695111 7.168-22.186667 7.168-34.702222 0-15.189333-3.185778-27.704889-9.671111-37.489778a80.896 80.896 0 0 0-22.869334-23.381333 100.465778 100.465778 0 0 0-26.737777-12.743111 256.113778 256.113778 0 0 0-20.992-5.575111 4150.784 4150.784 0 0 1-41.073778-10.638223 151.779556 151.779556 0 0 1-24.576-8.362666 27.079111 27.079111 0 0 1-11.946667-9.102222 24.519111 24.519111 0 0 1-3.015111-12.970667c0-5.859556 1.251556-10.695111 3.754667-14.506667a32.995556 32.995556 0 0 1 9.671111-9.500444 38.343111 38.343111 0 0 1 13.084444-5.347556c4.778667-1.024 9.557333-1.536 14.392889-1.536a102.4 102.4 0 0 1 20.252445 1.934222c6.144 1.251556 11.662222 3.413333 16.497777 6.485334a33.564444 33.564444 0 0 1 11.491556 12.515555c3.128889 6.257778 4.892444 13.198222 5.12 20.195556h57.571555l-0.398222-9.102222a78.051556 78.051556 0 0 0-8.533333-31.061334 77.880889 77.880889 0 0 0-24.007111-27.192889 101.262222 101.262222 0 0 0-34.702222-15.473777 171.178667 171.178667 0 0 0-40.675556-4.721778h-0.056889zM316.928 568.32a142.222222 142.222222 0 1 0 0 284.444444 142.222222 142.222222 0 0 0 0-284.444444z m0 56.888889a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667zM258.332444 170.666667H199.111111v284.444444h59.221333V332.401778H367.502222V455.111111H426.666667V170.666667H367.445333v109.169777H258.275556V170.666667h0.056888z m371.086223 0H540.444444v284.444444h55.239112V231.196444L653.937778 455.111111h57.230222l58.481778-223.914667V455.111111h55.239111V170.666667h-89.201778l-52.792889 193.991111-53.475555-193.991111z" />
</svg>
);

const createMaskIcon = (svgUrl: string): React.FC<{ className?: string }> => {
const MaskIcon: React.FC<{ className?: string }> = ({ className }) => (
<div
const makeIcon = (platformName: string): React.FC<{ className?: string }> => {
return ({ className }) => (
<PlatformSvg
platformName={platformName}
className={cn('bg-current shrink-0', className)}
style={{
maskImage: `url(${svgUrl})`,
WebkitMaskImage: `url(${svgUrl})`,
maskRepeat: 'no-repeat',
WebkitMaskRepeat: 'no-repeat',
maskPosition: 'center',
WebkitMaskPosition: 'center',
maskSize: 'contain',
WebkitMaskSize: 'contain',
}}
/>
);

return MaskIcon;
};

const MacOSIcon = createMaskIcon(MacOSIconAsset);
const WindowsIcon = createMaskIcon(WindowsIconAsset);

const WebIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg
className={className}
viewBox="-1 0 20 20"
fill="currentColor"
stroke="none"
>
<g transform="translate(-61.000000, -7639.000000)">
<g transform="translate(56.000000, 160.000000)">
<path d="M19.4350881,7485 L19.4279481,7485 L10.8119794,7485 L11.0180201,7487 L19.2300674,7487 C19.109707,7488.752 18.7455658,7492.464 18.6119454,7494.153 L13.99949,7495.451 L13.99949,7495.455 L13.98929,7495.46 L9.37377458,7493.836 L9.05757353,7490 L11.3199411,7490 L11.4800816,7492.063 L13.99337,7493 L13.99949,7493 L16.5086984,7492.1 L16.7667592,7489 L8.95659319,7489 C8.91885306,7488.599 8.43333144,7483.392 8.34867116,7483 L19.6370488,7483 C19.5738086,7483.66 19.5095484,7484.338 19.4350881,7485 L19.4350881,7485 Z M5,7479 L6.63812546,7497.148 L13.98929,7499 L21.3598345,7497.111 L23,7479 L5,7479 Z" />
</g>
</g>
</svg>
);

const ClayIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg className={className} viewBox="0 0 32 32" fill="currentColor">
<g>
<path d="M15,10V3H4C3.4,3,3,3.4,3,4v6h7H15z" />
<path d="M22,10h7V4c0-0.6-0.4-1-1-1H17v7H22z" />
<polygon points="11,12 11,20 16,20 21,20 21,12 16,12 " />
<rect x="3" y="12" width="6" height="8" />
<rect x="23" y="12" width="6" height="8" />
<path d="M10,22H3v6c0,0.6,0.4,1,1,1h11v-7H10z" />
<path d="M17,22v7h11c0.6,0,1-0.4,1-1v-6h-7H17z" />
</g>
</svg>
);
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<string, PlatformConfig> = {
android: {
Expand Down
Loading