@redocly/theme 0.56.0-rc.2 → 0.56.1

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FileTabs } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type {
+  CodeBlockDropdownItems,
+  CodeBlockTabItems,
+} from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
@@ -14,13 +17,15 @@ import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
 import { SelectIcon } from '@redocly/theme/icons/SelectIcon/SelectIcon';
 import { WarningSquareIcon } from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { CodeBlockDropdown } from '@redocly/theme/components/CodeBlock/CodeBlockDropdown';
 
 export type CodeBlockControlsProps = {
   children?: React.ReactNode;
   className?: string;
   title?: React.ReactNode | string;
   controls?: ControlItems | false;
-  tabs?: FileTabs;
+  tabs?: CodeBlockTabItems;
+  dropdown?: CodeBlockDropdownItems;
 };
 
 type ControlItems = {
@@ -58,6 +63,7 @@ export function CodeBlockControls({
   title,
   controls,
   tabs,
+  dropdown,
 }: CodeBlockControlsProps): JSX.Element | null {
   const { codeSnippet } = useThemeConfig();
   const { useTelemetry } = useThemeHooks();
@@ -72,11 +78,14 @@ export function CodeBlockControls({
     report: null,
   };
 
+  const isEmptyTitle = !title && !tabs && !dropdown;
+
   const defaultControls = controls ? (
     <>
       {title && <Title>{title}</Title>}
       {tabs && <CodeBlockTabs tabs={tabs} />}
       <ControlsWrapper>
+        {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report?.props?.hide ? (
           <TooltipWrapper tooltipTranslationKey="codeSnippet.report.tooltipText" placement="top">
             <ControlButton
@@ -92,27 +101,31 @@ export function CodeBlockControls({
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <ControlButton
-            variant="text"
-            size="small"
-            data-testid="expand-all"
-            icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
-            onClick={expand?.onClick}
-          >
-            {controlsType !== 'icon' && (expand?.label || 'Expand all')}
-          </ControlButton>
+          <TooltipWrapper tooltipTranslationKey="codeSnippet.expand.tooltipText" placement="top">
+            <ControlButton
+              variant="text"
+              size="small"
+              data-testid="expand-all"
+              icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
+              onClick={expand?.onClick}
+            >
+              {controlsType !== 'icon' && (expand?.label || 'Expand all')}
+            </ControlButton>
+          </TooltipWrapper>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <ControlButton
-            variant="text"
-            size="small"
-            data-testid="collapse-all"
-            icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
-            onClick={collapse?.onClick}
-          >
-            {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
-          </ControlButton>
+          <TooltipWrapper tooltipTranslationKey="codeSnippet.collapse.tooltipText" placement="top">
+            <ControlButton
+              variant="text"
+              size="small"
+              data-testid="collapse-all"
+              icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
+              onClick={collapse?.onClick}
+            >
+              {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+            </ControlButton>
+          </TooltipWrapper>
         ) : null}
 
         {select ? (
@@ -141,7 +154,7 @@ export function CodeBlockControls({
 
         {copy && !codeSnippet?.copy?.hide ? (
           <TooltipWrapper tooltipTranslationKey="codeSnippet.copy.tooltipText" placement="top">
-            <CopyButton
+            <StyledCopyButton
               data={copy.data}
               data-source={copy.dataSource}
               data-hash={copy.dataHash}
@@ -156,7 +169,7 @@ export function CodeBlockControls({
                 } else {
                   telemetry.send({
                     type: 'openapi_docs.copy_code_snippet.clicked',
-                    payload: { snippet_type: 'copy' },
+                    payload: { snippetType: 'copy' },
                   });
                 }
               }}
@@ -168,15 +181,21 @@ export function CodeBlockControls({
   ) : null;
 
   return children || controls ? (
-    <ContainerWrapper data-component-name="CodeBlock/CodeBlockControls" className={className}>
+    <ContainerWrapper
+      data-component-name="CodeBlock/CodeBlockControls"
+      className={className}
+      $isEmptyTitle={isEmptyTitle}
+    >
       {children ? children : defaultControls}
     </ContainerWrapper>
   ) : null;
 }
 
-const ContainerWrapper = styled.div`
+const ContainerWrapper = styled.div<{ $isEmptyTitle: boolean }>`
   display: grid;
-  justify-content: end;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
   font-size: var(--code-block-controls-font-size);
   font-family: var(--code-block-controls-font-family);
   background-color: var(--code-block-controls-bg-color);
@@ -185,6 +204,18 @@ const ContainerWrapper = styled.div`
   line-height: var(--line-height-lg);
   min-height: var(--control-height-base);
   grid-template-columns: 1fr auto;
+  z-index: 1;
+  ${({ $isEmptyTitle }) =>
+    $isEmptyTitle &&
+    `
+      position: absolute;
+      right: 0;
+      width: auto;
+      border: none;
+      background-color: transparent;
+      grid-template-columns: 1fr;
+      margin: 0;
+    `}
 `;
 
 const Title = styled.span`
@@ -193,6 +224,7 @@ const Title = styled.span`
   color: var(--code-block-controls-text-color);
   width: 100%;
   font-weight: var(--code-block-controls-font-weight);
+  padding-left: var(--spacing-xs);
 `;
 
 const ControlsWrapper = styled.div`
@@ -201,11 +233,20 @@ const ControlsWrapper = styled.div`
   align-items: center;
   gap: var(--spacing-xxs);
   justify-content: end;
-  margin-left: var(--spacing-sm);
 `;
 
 const ControlButton = styled(Button)`
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px); /* backdrop filter when there is text under the button */
+
   & + & {
     margin-left: 0;
   }
 `;
+
+const StyledCopyButton = styled(CopyButton)`
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px);
+`;

package/src/components/CodeBlock/CodeBlockDropdown.tsx

@@ -0,0 +1,53 @@
+import React, { type JSX } from 'react';
+import styled from 'styled-components';
+
+import type { CodeBlockDropdownItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
+
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ChevronSortIcon } from '@redocly/theme/icons/ChevronSortIcon/ChevronSortIcon';
+import { NoneIcon } from '@redocly/theme/icons/NoneIcon/NoneIcon';
+import { getFileIconByLanguage } from '@redocly/theme/core/utils';
+
+export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element {
+  const activeItem = items.find((item) => item.name === value) || items[0];
+  const icon = activeItem?.lang ? getFileIconByLanguage(activeItem?.lang) : null;
+  return (
+    <StyledDropdown
+      alignment="end"
+      trigger={
+        <Button icon={<ChevronSortIcon />} iconPosition="right" variant="text" size="small">
+          {icon}
+          {activeItem.name}
+        </Button>
+      }
+    >
+      <DropdownMenu>
+        {items.map((item) => {
+          const icon = getFileIconByLanguage(item.lang || '');
+          return (
+            <DropdownMenuItem
+              key={item.lang}
+              onAction={() => onChange(item.name)}
+              active={item.name === activeItem.name}
+              prefix={item.lang ? icon : <NoneIcon size="var(--icon-size)" />}
+            >
+              {item.name}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenu>
+    </StyledDropdown>
+  );
+}
+
+const StyledDropdown = styled(Dropdown)`
+  margin-left: auto;
+  --icon-size: 18px;
+  --button-color: var(--text-color-secondary);
+  button.button-size-small {
+    --button-icon-size: 18px;
+  }
+`;

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -2,16 +2,16 @@ import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FileTabs } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockTabItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { DocumentBlankIcon } from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
 
 export type CodeBlockTabsProps = {
-  tabs: FileTabs;
+  tabs: CodeBlockTabItems;
 };
 
 export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
@@ -24,31 +24,40 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
   });
 
   useEffect(() => {
-    const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === tabs.activeTabName);
+    const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === tabs.value);
 
     if (activeTab) {
       activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
     }
-  }, [tabs.activeTabName]);
+  }, [tabs.value]);
 
   return (
     <CodeBlockTabsWrapper ref={containerRef} data-component-name="CodeBlock/CodeBlockTabs">
       <ShadowWrapper>
         <Tabs>
-          {tabs.files.map(({ name }, i) => (
-            <Tab
-              ref={(el: HTMLButtonElement | null) => {
-                tabRefs.current[i] = el as HTMLButtonElement;
-              }}
-              data-name={name}
-              active={name === tabs.activeTabName}
-              key={name}
-              onClick={() => tabs.handleTabSwitch(name)}
-            >
-              <DocumentBlankIcon />
-              {name}
-            </Tab>
-          ))}
+          {tabs.items.map(({ name, lang }, i) => {
+            const ext = name.match(/\.([^.]+)$/)?.[1];
+            const fileIcon = lang
+              ? getFileIconByLanguage(lang)
+              : ext
+                ? getFileIconByExt(ext)
+                : null;
+
+            return (
+              <Tab
+                ref={(el: HTMLButtonElement | null) => {
+                  tabRefs.current[i] = el as HTMLButtonElement;
+                }}
+                data-name={name}
+                active={name === tabs.value}
+                key={name + i}
+                onClick={() => tabs.onChange(name)}
+              >
+                {fileIcon}
+                {name}
+              </Tab>
+            );
+          })}
         </Tabs>
       </ShadowWrapper>
 
@@ -69,7 +78,6 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
 const CodeBlockTabsWrapper = styled.div`
   display: flex;
   overflow: hidden;
-  padding: var(--spacing-xxs) 0;
 `;
 
 const Controls = styled.div`
@@ -111,6 +119,7 @@ const Tabs = styled.div`
 `;
 
 const Tab = styled.button<{ active: boolean }>`
+  --icon-size: 18px;
   display: inline-flex;
   align-items: center;
 

package/src/components/CodeBlock/variables.ts

@@ -73,7 +73,7 @@ export const code = css`
   --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
   --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
   --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
-  --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
+  --code-block-controls-padding: var(--spacing-xxs);
   --code-block-controls-height: 20px;
   --code-block-controls-width: 20px;
 

package/src/components/Dropdown/Dropdown.tsx

@@ -126,6 +126,7 @@ const DropdownWrapper = styled.div`
 `;
 
 const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isOpen?: boolean }>`
+  margin-top: var(--dropdown-menu-margin-top);
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};

package/src/components/Dropdown/DropdownMenu.tsx

@@ -47,6 +47,10 @@ const DropdownMenuWrapper = styled.ul`
   line-height: var(--dropdown-menu-line-height);
   color: var(--dropdown-menu-text-color);
 
+  /* Make sure the spacing is not overriden by the markdown list styles */
+  --md-list-margin: 0;
+  --md-list-left-padding: var(--dropdown-menu-padding);
+
   margin: 0;
   min-width: var(--dropdown-menu-min-width);
   max-width: var(--dropdown-menu-max-width);

package/src/components/Dropdown/variables.ts

@@ -9,6 +9,7 @@ export const dropdown = css`
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
 
+  --dropdown-menu-margin-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;
   --dropdown-menu-max-width: 424px;
   --dropdown-menu-max-height: 300px;

package/src/components/Feedback/Feedback.tsx

@@ -58,7 +58,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
           settings={settings}
           onSubmit={(values) => {
             submitFeedback({ type, values, path });
-            telemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
+            telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
           }}
         />
       </FeedbackWrapper>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -28,7 +28,7 @@ export function FilterCheckboxes({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <FilterOptions>
-        {filter.options.map(({ value, count }) => {
+        {(filter.filteredOptions || filter.options).map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
           return (
             <FilterCheckboxOption
@@ -39,7 +39,14 @@ export function FilterCheckboxes({
                 telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
-              <CheckboxIcon checked={filter.selectedOptions.has(value?.toLowerCase())} />
+              <CheckboxIcon
+                checked={
+                  filter.selectedOptions instanceof Set
+                    ? filter.selectedOptions.has(value) ||
+                      filter.selectedOptions.has(value?.toLowerCase())
+                    : false
+                }
+              />
               <FilterOptionLabel data-translation-key={value}>
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>

package/src/components/Footer/FooterItem.tsx

@@ -7,8 +7,8 @@ import type { ResolvedNavItem } from '@redocly/config';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { Image } from '@redocly/theme/components/Image/Image';
 import { breakpoints } from '@redocly/theme/core/utils';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type FooterItemProps = {
   item: ResolvedNavItem;
@@ -26,6 +26,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
   }
   const hasIcon = Boolean(item.icon || item.srcSet);
   const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
+
   return (
     <FooterItemWrapper
       className={className}
@@ -48,15 +49,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
         >
           {hasIcon ? (
             <FooterLinkIcon iconsOnly={iconsOnly}>
-              <Image
-                src={item.icon}
-                srcSet={item.srcSet}
-                alt={
-                  item.label && item.label !== item.link
-                    ? `${item.label} icon`
-                    : `${(item.icon || item.srcSet)?.split('/').pop()?.split('.')[0]} icon`
-                }
-              />
+              <GenericIcon icon={item.icon} srcSet={item.srcSet} />
             </FooterLinkIcon>
           ) : null}
           {!iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null}
@@ -75,9 +68,9 @@ const FooterSeparator = styled.div`
 `;
 
 const FooterLinkIcon = styled.div<{ iconsOnly?: boolean }>`
+  --icon-width: var(--footer-item-icon-width);
+  --icon-height: var(--footer-item-icon-height);
   display: inline-flex;
-  width: var(--footer-item-icon-width);
-  height: var(--footer-item-icon-height);
   margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
   vertical-align: middle;
   border: 1px solid var(--footer-item-icon-border-color);

package/src/components/Footer/variables.ts

@@ -26,8 +26,8 @@ export const footer = css`
   --footer-link-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --footer-link-padding-horizontal: 0;
 
-  --footer-item-icon-width: var(--spacing-lg); // @presenter Spacing
-  --footer-item-icon-height: var(--spacing-lg); // @presenter Spacing
+  --footer-item-icon-width: var(--spacing-base); // @presenter Spacing
+  --footer-item-icon-height: var(--spacing-base); // @presenter Spacing
   --footer-item-icon-margin-right: var(--spacing-sm); // @presenter Spacing
   --footer-item-icon-border-color: var(--border-color-primary); // @presenter Color
   --footer-item-icon-border-radius: 12px; // @presenter BorderRadius

package/src/components/Image/Image.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { KeyboardEvent, JSX } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
+import { useModalScrollLock } from '@redocly/theme/core/hooks';
 
 export type ImageProps = {
   src?: string;
@@ -49,6 +50,7 @@ export function Image(props: ImageProps): JSX.Element {
     setLightboxImage(undefined);
   }, []);
 
+  useModalScrollLock(!!lightboxImage);
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();

package/src/components/Markdown/Markdown.tsx

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 import type { PropsWithChildren } from 'react';
 
-import { typography } from '@redocly/theme/core/utils/theme-helpers';
+import { typography } from '@redocly/theme/core/utils';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
@@ -248,8 +248,8 @@ export const Markdown = styled.main.attrs<{
     }
   }
 
-  ul,
-  ol {
+  ul.md,
+  ol.md {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

package/src/components/Markdown/styles/headingAnchor.ts

@@ -16,7 +16,6 @@ export function headingAnchorCss(className = 'anchor'): FlattenSimpleInterpolati
       padding-left: 4px;
     }
 
-    svg,
     .${className} svg {
       fill: var(--heading-anchor-color);
       visibility: hidden;

package/src/components/Menu/MenuItem.tsx

@@ -14,6 +14,7 @@ import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
@@ -86,7 +87,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       data-testid="menu-item-label"
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
-      {item.icon ? <MenuItemIcon src={item.icon} /> : null}
+      <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
           <span>{translate(item.labelTranslationKey, item.label)}</span>
@@ -325,11 +326,10 @@ const MenuItemSubLabel = styled.div`
   font-family: var(--menu-item-sublabel-font-family);
 `;
 
-const MenuItemIcon = styled.img`
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = styled(GenericIcon)`
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;

package/src/components/Menu/variables.ts

@@ -69,7 +69,7 @@ export const menu = css`
    * @tokens Menu item icons
    */
   --menu-item-icon-size: var(--spacing-base);
-  --menu-item-icon-margin: 0px;
+  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
   --menu-item-icon-border-radius: 100%;
 
   --menu-item-external-icon-size: 10px;
@@ -128,7 +128,9 @@ export const mobileMenu = css`
   /**
     * @tokens Mobile Menu
     * */
+  /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
   --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;

package/src/components/Navbar/NavbarItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import type { JSX } from 'react';
@@ -17,6 +17,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type NavbarItemProps = {
   navItem: ResolvedNavItem;
@@ -52,7 +53,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       target={item.target}
       to={item.link}
     >
-      <NavbarIcon url={item.icon} />
+      <NavbarIcon icon={item.icon} srcSet={item.srcSet} />
       <NavbarLabel data-translation-key={item.labelTranslationKey}>
         {translate(item.labelTranslationKey, item.label)}
       </NavbarLabel>
@@ -74,7 +75,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           data-translation-key={item.labelTranslationKey}
           external={item.external}
         >
-          <NavbarIcon url={item.icon} />
+          <NavbarIcon icon={item.icon} srcSet={item.srcSet} />
           <NavbarLabel data-translation-key={item.labelTranslationKey}>
             {translate(item.labelTranslationKey, item.label)}
           </NavbarLabel>
@@ -132,20 +133,10 @@ const NavbarLabel = styled.span`
   vertical-align: middle;
 `;
 
-const NavbarIcon = styled.i<{ url?: string }>`
-  ${({ url }) =>
-    url &&
-    css`
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
+const NavbarIcon = styled(GenericIcon)`
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
+  margin-right: var(--navbar-item-icon-margin-right);
 `;
 
 const ExternalLinkIcon = styled(LaunchIcon)`

package/src/components/Navbar/variables.ts

@@ -35,8 +35,8 @@ export const navbar = css`
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);