fix: add missing icons to supported platforms (#4128)

Author: szymonrybczak

website/src/theme/Icon/VisionOS/index.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function VisionOS() {
+  return (
+    <svg
+      width="18"
+      height="19"
+      viewBox="0 0 66 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M55.7833 4.43334C48.5833 0.833335 37.2667 0.833336 33 0.833336C28.7333 0.833336 18.2167 0.833335 11.0167 4.06667C10.3667 3 9.01666 2.53334 7.84999 3.06667C6.44999 3.7 5.44999 4.78334 5.24999 4.98334C4.36666 5.96667 4.43332 7.41667 5.33332 8.35C0.949991 13.55 -0.866675 21.5 0.566658 27.25C2.63332 35.4833 8.81666 40.8167 16.3333 40.8167C21.9 40.8167 24.65 38.7333 26.85 37.0667C27.65 36.45 28.35 35.9333 29.1167 35.55C31.7333 34.25 34.2667 34.25 36.8833 35.55C37.65 35.9333 38.35 36.45 39.15 37.0667C41.3667 38.7333 44.1 40.8167 49.6667 40.8167C57.1833 40.8167 63.3667 35.5 65.4333 27.25C67.3167 19.6833 63.6 8.31667 55.8 4.4L55.7833 4.43334ZM60.5667 26.0667C59.0833 32 54.8 35.8333 49.6667 35.8333C45.7833 35.8333 44.1 34.5667 42.1667 33.1C41.25 32.4 40.3 31.6833 39.1167 31.1C37.0833 30.0833 35.05 29.5833 33 29.5833C30.95 29.5833 28.9167 30.0833 26.8833 31.1C25.7 31.6833 24.75 32.4 23.8333 33.1C21.8833 34.5667 20.2167 35.8333 16.3333 35.8333C11.1833 35.8333 6.91666 32 5.43332 26.0667C4.06666 20.5667 6.88333 11.7 12.4667 8.91667C18.6 5.85 29.0667 5.85 33.0167 5.85C36.9667 5.85 47.4333 5.85 53.5667 8.91667C59.1333 11.7 61.9667 20.5833 60.6 26.0667H60.5667Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

website/src/theme/Icon/Windows/index.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function Windows() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 48 48"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-400.000000, -560.000000)" fill="currentColor">
+          <path d="M400,566.79594 L419.616154,564.132637 L419.624728,582.995574 L400.01826,583.106885 L400,566.79594 Z M419.606809,585.169154 L419.622035,604.048843 L400.01549,601.3615 L400.01439,585.042845 L419.606809,585.169154 Z M421.984711,563.784314 L447.993926,560 L447.993926,582.755916 L421.984711,582.961764 L421.984711,563.784314 Z M448,585.3466 L447.993899,608 L421.984683,604.340389 L421.94824,585.304384 L448,585.3466 Z"></path>
+        </g>
+      </g>
+    </svg>
+  );
+}

website/src/theme/PlatformSupport/index.js

@@ -11,6 +11,8 @@ import styles from './styles.module.css';
 import Badge from '@site/src/theme/Badge';
 import Android from '@site/src/theme/Icon/Android';
 import Apple from '@site/src/theme/Icon/Apple';
+import VisionOS from '@site/src/theme/Icon/VisionOS';
+import Windows from '@site/src/theme/Icon/Windows';
 import TV from '@site/src/theme/Icon/TV';
 import Web from '@site/src/theme/Icon/Web';
 
@@ -27,10 +29,16 @@ export default function PlatformSupport({platforms}) {
           <Badge icon={<Apple />} title="macOS" />
         )}
         {platforms.includes('tv') && <Badge icon={<TV />} title="TV" />}
-        {platforms.includes('watchOS') && <Badge title="watchOS" />}
+        {platforms.includes('watchOS') && (
+          <Badge icon={<Apple />} title="watchOS" />
+        )}
         {platforms.includes('web') && <Badge icon={<Web />} title="Web" />}
-        {platforms.includes('windows') && <Badge title="Windows" />}
-        {platforms.includes('visionOS') && <Badge title="visionOS" />}
+        {platforms.includes('windows') && (
+          <Badge icon={<Windows />} title="Windows" />
+        )}
+        {platforms.includes('visionOS') && (
+          <Badge icon={<VisionOS />} title="visionOS" />
+        )}
       </div>
     </div>
   );

website/versioned_docs/version-0.74/get-started-without-a-framework.md

@@ -11,7 +11,7 @@ import PlatformSupport from '@site/src/theme/PlatformSupport';
 
 import RemoveGlobalCLI from './\_remove-global-cli.md';
 
-<PlatformSupport platforms={['android', 'ios', 'macOS', 'tv', 'watchOS', 'web', 'windows', 'visionOS']} />
+<PlatformSupport platforms={['android', 'ios', 'macOS', 'tv', 'visionOS', 'watchOS', 'web', 'windows']} />
 
 If you have constraints that are not served well by a [Framework](/architecture/glossary#react-native-framework), or you prefer to write your own Framework, you can create a React Native app without using a Framework.