feat: icons pack (#334)

Closes RVTEE-611
rivet-gg · Sep 21, 2024 · 35779e5 · 35779e5
1 parent 425d4e5
commit 35779e5
Show file tree

Hide file tree

Showing 98 changed files with 8,830 additions and 545 deletions.
diff --git a/.env.example b/.env.example
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,7 +1 @@
-nodeLinker: node-modules
-
-npmScopes:
-  fortawesome:
-    npmAlwaysAuth: true
-    npmRegistryServer: 'https://npm.fontawesome.com/'
-    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -31,8 +31,7 @@ This will open `http://localhost:5080` in your browser. By default, this will co
 
 ## Environment variables configuration
 
-1. Copy `.env.example` to `.env.yarn` and fill appropriate variables.
-2. Copy `apps/hub/.env.example` to `apps/hub/.env` and change variables if needed.
+1. Copy `apps/hub/.env.example` to `apps/hub/.env` and change variables if needed.
 
 ## Developing with self-hosted backend
 
@@ -114,6 +113,7 @@ All Hub issues are managed in the [main Rivet repository](https://github.com/riv
 
 - `packages/` - Contains the shared components
   - `components/` - Contains the shared components.
+  - `icons/` - Contains icons used by Rivet project, [read more here](packages/icons/README.md).
 
 ### Routing
 
@@ -182,6 +182,10 @@ This is caused by the race condition between the Vite server (responsible for bu
 
 See the solution for the previous error.
 
+### Unknown issue with icons, most of the icons are squares or not showing
+
+See troubleshooting section for [@rivet-gg/icons package](packages/icons/README.md#troubleshooting).
+
 ## 🏗️ Contributing
 
 1. Look for any issue that describes something that needs to be done - or, if

diff --git a/apps/hub/package.json b/apps/hub/package.json
@@ -13,14 +13,13 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.5.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/resolvers": "^3.3.4",
     "@react-hookz/web": "^24.0.4",
     "@rivet-gg/api": "file:vendor/rivet-gg-api.tgz",
     "@rivet-gg/api-ee": "file:vendor/rivet-gg-api-ee.tgz",
     "@rivet-gg/components": "workspace:*",
+    "@rivet-gg/icons": "workspace:*",
     "@sentry/react": "^8.26.0",
     "@tanstack/query-broadcast-client-experimental": "^5.51.24",
     "@tanstack/query-sync-storage-persister": "^5.51.24",

diff --git a/apps/hub/src/components/breadcrumbs/separator.tsx b/apps/hub/src/components/breadcrumbs/separator.tsx
@@ -1,15 +1,11 @@
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, faChevronRight } from "@rivet-gg/icons";
 import { useContext } from "react";
 import { MobileBreadcrumbsContext } from "./mobile-breadcrumbs";
 
 export function Separator() {
   const isMobile = useContext(MobileBreadcrumbsContext);
   if (isMobile) return null;
   return (
-    <FontAwesomeIcon
-      icon={faChevronRight}
-      className="text-muted-foreground size-4"
-    />
+    <Icon icon={faChevronRight} className="text-muted-foreground size-4" />
   );
 }
diff --git a/apps/hub/src/components/command-panel/command-panel-groups/rivet-command-panel-group.tsx b/apps/hub/src/components/command-panel/command-panel-groups/rivet-command-panel-group.tsx
@@ -1,11 +1,11 @@
+import { CommandGroup, CommandItem } from "@rivet-gg/components";
 import {
+  Icon,
   faBook,
   faComment,
   faLifeRing,
   faMessageHeart,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CommandGroup, CommandItem } from "@rivet-gg/components";
+} from "@rivet-gg/icons";
 import { useNavigate } from "@tanstack/react-router";
 
 export function RivetCommandGroup() {
@@ -15,24 +15,24 @@ export function RivetCommandGroup() {
       <CommandItem
         onSelect={() => window.open("https://rivet.gg/docs", "_blank")}
       >
-        <FontAwesomeIcon icon={faBook} />
+        <Icon icon={faBook} />
         Docs
       </CommandItem>
 
       <CommandItem onSelect={() => navigate({ search: { modal: "feedback" } })}>
-        <FontAwesomeIcon icon={faComment} />
+        <Icon icon={faComment} />
         Feedback
       </CommandItem>
       <CommandItem
         onSelect={() => window.open("https://rivet.gg/support", "_blank")}
       >
-        <FontAwesomeIcon icon={faLifeRing} />
+        <Icon icon={faLifeRing} />
         Support
       </CommandItem>
       <CommandItem
         onSelect={() => window.open("https://rivet.gg/discord", "_blank")}
       >
-        <FontAwesomeIcon icon={faMessageHeart} />
+        <Icon icon={faMessageHeart} />
         Discord
       </CommandItem>
     </CommandGroup>

diff --git a/apps/hub/src/components/command-panel/command-panel-navigation-breadcrumbs.tsx b/apps/hub/src/components/command-panel/command-panel-navigation-breadcrumbs.tsx
@@ -5,9 +5,8 @@ import {
   groupGamesQueryOptions,
 } from "@/domains/game/queries";
 import { GroupAvatar } from "@/domains/group/components/group-avatar";
-import { faPuzzle } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Badge, Skeleton } from "@rivet-gg/components";
+import { Icon, faPuzzle } from "@rivet-gg/icons";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Suspense } from "react";
 import type { CommandPanelPage } from "./command-panel-navigation-provider";
@@ -56,7 +55,7 @@ function NamespaceBreadcrumb({
 function BackendBreadcrumb() {
   return (
     <>
-      <FontAwesomeIcon icon={faPuzzle} className="mr-2 size-4" /> Backend
+      <Icon icon={faPuzzle} className="mr-2 size-4" /> Backend
     </>
   );
 }

diff --git a/apps/hub/src/components/command-panel/command-panel-page/game-command-panel-page.tsx b/apps/hub/src/components/command-panel/command-panel-page/game-command-panel-page.tsx
@@ -1,12 +1,6 @@
 import { gameQueryOptions } from "@/domains/game/queries";
-import {
-  faCircleDollar,
-  faCog,
-  faHome,
-  faKey,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CommandGroup, CommandItem } from "@rivet-gg/components";
+import { Icon, faCircleDollar, faCog, faHome, faKey } from "@rivet-gg/icons";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useCommandPanelNavigation } from "../command-panel-navigation-provider";
 import { NamespacesCommandPanelItems } from "../namespaces-command-panel-items";
@@ -28,23 +22,23 @@ export function GameCommandPanelPage({ gameId }: GameCommandPanelPage) {
             navigate({ to: "/games/$gameId", params: { gameId } });
           }}
         >
-          <FontAwesomeIcon icon={faHome} />
+          <Icon icon={faHome} />
           Overview
         </CommandItem>
         <CommandItem
           onSelect={() => {
             navigate({ to: "/games/$gameId/billing", params: { gameId } });
           }}
         >
-          <FontAwesomeIcon icon={faCircleDollar} />
+          <Icon icon={faCircleDollar} />
           Billing
         </CommandItem>
         <CommandItem
           onSelect={() => {
             navigate({ to: "/games/$gameId/settings", params: { gameId } });
           }}
         >
-          <FontAwesomeIcon icon={faCog} />
+          <Icon icon={faCog} />
           Settings
         </CommandItem>
       </CommandGroup>
@@ -64,7 +58,7 @@ export function GameCommandPanelPage({ gameId }: GameCommandPanelPage) {
             });
           }}
         >
-          <FontAwesomeIcon icon={faKey} />
+          <Icon icon={faKey} />
           Generate a cloud token
         </CommandItem>
       </CommandGroup>

diff --git a/apps/hub/src/components/command-panel/command-panel-page/group-command-panel-page.tsx b/apps/hub/src/components/command-panel/command-panel-page/group-command-panel-page.tsx
@@ -1,13 +1,13 @@
 import { groupGamesQueryOptions } from "@/domains/game/queries";
+import { CommandGroup, CommandItem } from "@rivet-gg/components";
 import {
+  Icon,
   faGear,
   faHome,
   faPlus,
   faUserPlus,
   faUsers,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CommandGroup, CommandItem } from "@rivet-gg/components";
+} from "@rivet-gg/icons";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useCommandPanelNavigation } from "../command-panel-navigation-provider";
 import { GamesCommandPanelItems } from "../games-command-panel-items";
@@ -28,7 +28,7 @@ export function GroupCommandPanelPage({ groupId }: GroupCommandPanelPageProps) {
             navigate({ to: "/teams/$groupId", params: { groupId } });
           }}
         >
-          <FontAwesomeIcon icon={faHome} />
+          <Icon icon={faHome} />
           Overview
         </CommandItem>
         <CommandItem
@@ -40,7 +40,7 @@ export function GroupCommandPanelPage({ groupId }: GroupCommandPanelPageProps) {
             });
           }}
         >
-          <FontAwesomeIcon icon={faUserPlus} />
+          <Icon icon={faUserPlus} />
           Invite a member
         </CommandItem>
         <CommandItem
@@ -51,7 +51,7 @@ export function GroupCommandPanelPage({ groupId }: GroupCommandPanelPageProps) {
             });
           }}
         >
-          <FontAwesomeIcon icon={faUsers} />
+          <Icon icon={faUsers} />
           Members
         </CommandItem>
         <CommandItem
@@ -62,7 +62,7 @@ export function GroupCommandPanelPage({ groupId }: GroupCommandPanelPageProps) {
             });
           }}
         >
-          <FontAwesomeIcon icon={faGear} />
+          <Icon icon={faGear} />
           Settings
         </CommandItem>
       </CommandGroup>
@@ -77,7 +77,7 @@ export function GroupCommandPanelPage({ groupId }: GroupCommandPanelPageProps) {
             });
           }}
         >
-          <FontAwesomeIcon icon={faPlus} />
+          <Icon icon={faPlus} />
           Create a new game
         </CommandItem>
         <GamesCommandPanelItems groupId={groupId} games={data.games} />

diff --git a/apps/hub/src/components/command-panel/command-panel-page/namespace-command-panel-page.tsx b/apps/hub/src/components/command-panel/command-panel-page/namespace-command-panel-page.tsx
@@ -3,7 +3,9 @@ import {
   gameNamespaceQueryOptions,
   gameQueryOptions,
 } from "@/domains/game/queries";
+import { Badge, CommandGroup, CommandItem } from "@rivet-gg/components";
 import {
+  Icon,
   faCodeBranch,
   faGear,
   faGlobe,
@@ -15,9 +17,7 @@ import {
   faScroll,
   faServer,
   faUserCog,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Badge, CommandGroup, CommandItem } from "@rivet-gg/components";
+} from "@rivet-gg/icons";
 import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 import { useCommandPanelNavigation } from "../command-panel-navigation-provider";
 
@@ -64,7 +64,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faHome} />
+          <Icon icon={faHome} />
           Overview
         </CommandItem>
         <CommandItem
@@ -75,7 +75,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faServer} />
+          <Icon icon={faServer} />
           Servers
         </CommandItem>
         <CommandItem
@@ -86,7 +86,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faPuzzle} />
+          <Icon icon={faPuzzle} />
           Backend
         </CommandItem>
 
@@ -99,7 +99,7 @@ export function NamespaceCommandPanelPage({
               });
             }}
           >
-            <FontAwesomeIcon icon={faCodeBranch} />
+            <Icon icon={faCodeBranch} />
             Versions
             {currentVersion ? (
               <Badge className="ml-2">{currentVersion?.displayName}</Badge>
@@ -119,7 +119,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faGlobe} />
+                <Icon icon={faGlobe} />
                 CDN Overview
               </CommandItem>
               <CommandItem
@@ -132,7 +132,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faUserCog} />
+                <Icon icon={faUserCog} />
                 Manage authenticated users
               </CommandItem>
               <CommandItem
@@ -145,7 +145,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faLink} />
+                <Icon icon={faLink} />
                 Mange custom domains
               </CommandItem>
             </CommandGroup>
@@ -161,7 +161,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faJoystick} />
+                <Icon icon={faJoystick} />
                 Lobbies
               </CommandItem>
               <CommandItem
@@ -173,7 +173,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faScroll} />
+                <Icon icon={faScroll} />
                 Logs
               </CommandItem>
               <CommandItem
@@ -185,7 +185,7 @@ export function NamespaceCommandPanelPage({
                   });
                 }}
               >
-                <FontAwesomeIcon icon={faGear} />
+                <Icon icon={faGear} />
                 Settings
               </CommandItem>
             </CommandGroup>
@@ -202,7 +202,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faKey} />
+          <Icon icon={faKey} />
           Generate a public token
         </CommandItem>
         <CommandItem
@@ -214,7 +214,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faKey} />
+          <Icon icon={faKey} />
           Generate a service token
         </CommandItem>
         <CommandItem
@@ -225,7 +225,7 @@ export function NamespaceCommandPanelPage({
             });
           }}
         >
-          <FontAwesomeIcon icon={faKey} />
+          <Icon icon={faKey} />
           Generate a development token
         </CommandItem>
       </CommandGroup>