💅 chore: add icons to sidebar

@theme/components/Menu/MenuItem.tsx

@@ -10,9 +10,10 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType } from '@redocly/theme/core/utils';
+import { getMenuItemType, resolveIcon } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
 
 import { ButtonWithArrow } from '@redocly/marketing-pages/components/Button/ButtonWithArrow.js';
 
@@ -60,6 +61,14 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   ) : null;
 
   const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+  const resolvedIcon = resolveIcon(item.icon);
+  const iconComponent =
+    resolvedIcon.type === 'link' ? (
+      <MenuItemIcon src={item.icon} />
+    ) : resolvedIcon.type === 'font-awesome' ? (
+      <MenuItemCDNIcon name={resolvedIcon.name} type={resolvedIcon.style} />
+    ) : null;
+
   const reuniteLabel = isReuniteInProducts && (
     <MenuItemLabelWrapper
       active={item.active}
@@ -87,7 +96,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       ) : null}
       <MenuItemLabelTextWrapperReunite>
         <div style={{ flexDirection: 'row', gap: '8px', display: 'flex', alignItems: 'center' }}>
-          {item.icon ? <MenuItemIcon src={item.icon} /> : null}
+          {iconComponent}
           <MenuItemLabel>
             <span>{translate(item.labelTranslationKey, item.label)}</span>
             {item.badges?.map(({ name, color }) => (
@@ -115,7 +124,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
     >
       {hasChevron && chevron}
-      {item.icon ? <MenuItemIcon src={item.icon} /> : null}
+      {iconComponent}
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
           <span>{translate(item.labelTranslationKey, item.label)}</span>
@@ -372,6 +381,15 @@ const MenuItemIcon = styled.img`
   overflow: hidden;
 `;
 
+
+const MenuItemCDNIcon = styled(CDNIcon)`
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+  margin: var(--menu-item-icon-margin);
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
 const MenuItemLink = styled(Link)`
   order: 1;
 `;

@theme/styles.css

@@ -566,6 +566,10 @@
     --color-ontonal: #2A2B33;
     --color-arrow: #9B9CA8;
     --hover-last-navbar-color: #3B3C45;
+
+    [data-component-name="Menu/MenuItem"] img  {
+        filter: invert(1); /* invert the color of the icon not to mess with srcSet */
+    }
 }
 
 :root.dark nav img {

docs-realm.sidebars.yaml

@@ -1,10 +1,13 @@
-- label: ← Back to Docs
+- label: Back to Docs
+  icon: arrow-left
   href: /docs
 - separatorLine: true
 - page: docs/realm/changelog.page.tsx
   label: Changelog
+  icon: list-check
 - separatorLine: true
 - page: docs/realm/index.md
+  icon: ./images/icons/realm-gray.svg
 - $ref: docs/realm/sidebars.yaml
 - separatorLine: true
 - $ref: docs/realm/config/sidebars.yaml

docs/realm/config/sidebars.yaml

@@ -1,5 +1,6 @@
 - group: Configuration options
   page: ./index.md
+  icon: cog
   items:
     - group: analytics
       page: ./analytics/index.md

docs/realm/index.md

@@ -3,7 +3,7 @@ sidebar:
   path: sidebars.yaml
 ---
 
-# Reunite + Realm system overview
+# Reunite + Realm overview
 
 Reunite and Realm work together to help you author, review, and publish world-class developer portals and API documentation.
 

docs/realm/sidebars.yaml

@@ -1,5 +1,6 @@
 - group: Get started
   page: get-started/index.md
+  icon: rocket-launch
   items:
     - page: get-started/start-reunite-editor.md
       label: Start with Reunite editor
@@ -13,6 +14,7 @@
           label: Migrate from legacy portal
 
 - group: Reunite
+  icon: ./images/icons/reunite-gray.svg
   page: reunite/reunite.md
   items:
     - separator: Organization & team settings
@@ -142,6 +144,7 @@
       label: User profile menu
 
 - group: Content
+  icon: file-lines
   items:
     - page: content/project-structure.md
       label: Project structure
@@ -299,6 +302,7 @@
       label: Upgrade Realm version
 
 - group: Branding
+  icon: palette
   page: branding/index.md
   label: Branding
   items:
@@ -320,6 +324,7 @@
         - page: branding/css-variables/api-docs.md
           label: API docs
 - group: Navigation
+  icon: chart-tree-map
   page: navigation/index.md
   label: Navigation elements
   items:
@@ -347,6 +352,7 @@
 
 
 - group: Customization
+  icon: wrench
   items:
 
     - group: API functions
@@ -397,6 +403,7 @@
 
 
 - group: Access
+  icon: lock
   items:
     - group: Role-based access control (RBAC)
       page: access/index.md