@redocly/theme 0.56.0-next.13 → 0.56.0-next.14

package/lib/components/Catalog/Catalog.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core';
+import { CatalogSwitcherItem } from '../../core/types/catalog';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -13,13 +13,13 @@ const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon")
 const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
-const core_1 = require("../../../core");
+const utils_1 = require("../../../core/utils");
 const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
             window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
             telemetry.send({ type: 'catalog_item.clicked' });

package/lib/components/Catalog/CatalogSelector.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core';
+import { CatalogSwitcherItem, SortOption } from '../../core/types/catalog';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
     setSearchQuery: (query: string) => void;

package/lib/components/Catalog/CatalogSelector.js

@@ -9,13 +9,14 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Select_1 = require("../../components/Select/Select");
-const core_1 = require("../../core");
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }) {
-    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     const options = catalogSwitcherItems.map((item) => ({
         value: item.slug,
         element: translate(item.labelTranslationKey),

package/lib/components/Catalog/CatalogViewModeToggle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogViewMode } from '../../core';
+import { CatalogViewMode } from '../../core/types/catalog';
 export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;

package/lib/components/Dropdown/Dropdown.js

@@ -78,6 +78,7 @@ const DropdownWrapper = styled_components_1.default.div `
   text-decoration: none;
 `;
 const ChildrenWrapper = styled_components_1.default.div `
+  margin-top: var(--dropdown-menu-margin-top);
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};

package/lib/components/Dropdown/variables.js

@@ -11,6 +11,7 @@ exports.dropdown = (0, styled_components_1.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/lib/components/Footer/FooterItem.js

@@ -9,11 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
-const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function FooterItem({ item, iconsOnly, className }) {
-    var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -22,12 +20,9 @@ function FooterItem({ item, iconsOnly, className }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    const resolvedIcon = (0, utils_1.resolveIcon)(item.icon);
-    const iconComponent = item.srcSet || resolvedIcon.type === 'link' ? (react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet, alt: item.label && item.label !== item.link
-            ? `${item.label} icon`
-            : `${(_b = (_a = (item.icon || item.srcSet)) === null || _a === void 0 ? void 0 : _a.split('/').pop()) === null || _b === void 0 ? void 0 : _b.split('.')[0]} icon` })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
-        hasIcon ? react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly }, iconComponent) : null,
+        hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
+            react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
         item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
 }
@@ -38,9 +33,9 @@ const FooterSeparator = styled_components_1.default.div `
   opacity: var(--footer-separator-item-opacity);
 `;
 const FooterLinkIcon = styled_components_1.default.div `
+  --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/lib/components/Footer/variables.js

@@ -28,8 +28,8 @@ exports.footer = (0, styled_components_1.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/lib/components/Markdown/Markdown.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-const theme_helpers_1 = require("../../core/utils/theme-helpers");
+const utils_1 = require("../../core/utils");
 const baseTable_1 = require("../../components/Markdown/styles/baseTable");
 const links_1 = require("../../components/Markdown/styles/links");
 const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
@@ -130,37 +130,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1')};
+    ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2')};
+    ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3')};
+    ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4')};
+    ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5')};
+    ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6')};
+    ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }

package/lib/components/Menu/MenuItem.js

@@ -36,7 +36,7 @@ const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const Badge_1 = require("../../components/Badge/Badge");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
@@ -74,11 +74,9 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const resolvedIcon = (0, utils_1.resolveIcon)(item.icon);
-    const iconComponent = resolvedIcon.type === 'link' ? (react_1.default.createElement(MenuItemIcon, { src: item.icon })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(MenuItemCDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
-        iconComponent,
+        react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
                 react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
@@ -243,17 +241,9 @@ const MenuItemSubLabel = styled_components_1.default.div `
   font-size: var(--menu-item-sublabel-font-size);
   font-family: var(--menu-item-sublabel-font-family);
 `;
-const MenuItemIcon = styled_components_1.default.img `
-  width: var(--menu-item-icon-size);
-  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;
-`;
-const MenuItemCDNIcon = (0, styled_components_1.default)(CDNIcon_1.CDNIcon) `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = (0, styled_components_1.default)(UniversalIcon_1.UniversalIcon) `
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
   flex-shrink: 0;
   overflow: hidden;

package/lib/components/Navbar/NavbarItem.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
@@ -37,8 +14,7 @@ const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
-const utils_2 = require("../../core/utils");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -51,10 +27,8 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
-    const resolvedIcon = (0, utils_2.resolveIcon)(item.icon);
-    const iconComponent = resolvedIcon.type === 'link' ? (react_1.default.createElement(NavbarIcon, { url: item.icon })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(NavbarCDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
-        iconComponent,
+        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
     if (navItem.items) {
@@ -64,7 +38,7 @@ function NavbarItem({ navItem, className }) {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
-                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
@@ -104,25 +78,11 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
-const NavbarIcon = styled_components_1.default.i `
-  ${({ url }) => url &&
-    (0, styled_components_1.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 NavbarCDNIcon = (0, styled_components_1.default)(CDNIcon_1.CDNIcon) `
-  width: var(--navbar-item-icon-width);
-  height: var(--navbar-item-icon-height);
+const NavbarIcon = (0, styled_components_1.default)(UniversalIcon_1.UniversalIcon) `
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
   margin-right: var(--navbar-item-icon-margin-right);
-}`;
+`;
 const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
   margin-left: 5px;
 `;

package/lib/core/types/sidebar.d.ts

@@ -7,6 +7,7 @@ export type SidebarNavItem = {
     sublabel?: string;
     subLabelTranslationKey?: string;
     icon?: string;
+    srcSet?: string;
     link?: string;
     type?: string;
     httpVerb?: string;

package/lib/core/utils/icon-resolver.js

@@ -24,10 +24,7 @@ function resolveIcon(icon) {
         return { type: 'invalid', reason: 'Icon must be a non-empty string' };
     }
     const trimmed = icon.trim();
-    const isLink = trimmed.startsWith('/') ||
-        trimmed.startsWith('./') ||
-        trimmed.startsWith('../') ||
-        /^https?:\/\//.test(trimmed);
+    const isLink = trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
     if (isLink) {
         return { type: 'link', value: trimmed };
     }

package/lib/ext/configure.d.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '../index.js';
+import { UserClaims, OpenAPIServer } from '../core/types';
 export type SecurityDetails = {
     password?: string;
     username?: string;

package/lib/icons/CDNIcon/CDNIcon.js

@@ -42,7 +42,7 @@ const Icon = (props) => {
 exports.CDNIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/CDNIcon/CDNIcon',
 })) `
-  height: ${({ size }) => size || 'var(--icon-size, 16px)'};
-  width: ${({ size }) => size || 'var(--icon-size, 16px)'};
+  height: ${({ size }) => size || 'var(--icon-height, 16px)'};
+  width: ${({ size }) => size || 'var(--icon-width, 16px)'};
 `;
 //# sourceMappingURL=CDNIcon.js.map

package/lib/icons/UniversalIcon/UniversalIcon.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface UniversalIconProps {
+    icon: string | React.ReactNode;
+    srcSet?: string;
+    rawContent?: string;
+    size?: string;
+    color?: string;
+    alt?: string;
+    className?: string;
+}
+export declare function UniversalIcon({ icon, srcSet, rawContent, size, color, alt, className, }: UniversalIconProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;

package/lib/icons/UniversalIcon/UniversalIcon.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniversalIcon = UniversalIcon;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const utils_1 = require("../../core/utils");
+const InlineSvg_1 = require("../../markdoc/components/InlineSvg/InlineSvg");
+const Image_1 = require("../../components/Image/Image");
+function UniversalIcon({ icon, srcSet, rawContent, size, color, alt, className, }) {
+    if (srcSet) {
+        return React.createElement(Image_1.Image, { srcSet: srcSet, alt: alt, className: className });
+    }
+    const resolvedIcon = icon && typeof icon === 'string' ? (0, utils_1.resolveIcon)(icon) : null;
+    const iconComponent = rawContent ? (React.createElement(IconSvg, { fileRawContent: rawContent, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'link' ? (React.createElement(IconImg, { src: resolvedIcon.value, alt: alt, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'font-awesome' ? (React.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style, size: size, color: color, className: className })) : (icon);
+    return iconComponent;
+}
+const IconImg = styled_components_1.default.img `
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+  object-fit: cover;
+`;
+const IconSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--icon-color, currentColor);
+  }
+`;
+//# sourceMappingURL=UniversalIcon.js.map

package/lib/index.d.ts

@@ -254,6 +254,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/UniversalIcon/UniversalIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -307,6 +307,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/UniversalIcon/UniversalIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const core_1 = require("../core");
+const utils_1 = require("../core/utils");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
         react_1.default.createElement(ContentWrapper, null, children)));
@@ -61,7 +61,7 @@ const ContentWrapper = styled_components_1.default.section `
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
       width: 100%;
-      max-width: ${core_1.breakpoints.max};
+      max-width: ${utils_1.breakpoints.max};
       margin-left: auto;
       margin-right: auto;
     }

package/lib/markdoc/components/Cards/CardIcon.js

@@ -6,28 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
+const UniversalIcon_1 = require("../../../icons/UniversalIcon/UniversalIcon");
 function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
+    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position },
+        react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: src, rawContent: rawContent })));
 }
-const CardImg = styled_components_1.default.img `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-  object-fit: cover;
-`;
-const CardSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--card-icon-color);
-  }
-`;
 const CardIconWrapper = styled_components_1.default.div `
+  --icon-width: var(--card-icon-width);
+  --icon-height: var(--card-icon-height);
+  --icon-color: var(--card-icon-color);
+
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
   justify-content: center;

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -10,6 +10,7 @@ export type TabProps = {
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onClick: () => void;
     icon?: React.ReactNode;
+    iconRawContent?: string;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }: TabProps): JSX.Element;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }: TabProps): JSX.Element;
 export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;

package/lib/markdoc/components/Tabs/Tab.js

@@ -8,17 +8,20 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
+const UniversalIcon_1 = require("../../../icons/UniversalIcon/UniversalIcon");
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
         react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
-                icon,
+                react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));
 }
 const LabelWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
+  --icon-width: var(--md-tabs-icon-size);
+  --icon-height: var(--md-tabs-icon-size);
 `;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -9,7 +9,7 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | string;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];

package/lib/markdoc/components/Tabs/variables.js

@@ -98,6 +98,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing
 
+  --md-tabs-icon-size: 16px; // @presenter Spacing
+
   // @tokens End
   `;
 //# sourceMappingURL=variables.js.map

package/lib/markdoc/tags/card.js

@@ -14,7 +14,7 @@ exports.card = {
                 type: String,
                 resolver: 'link',
             },
-            icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
             lineClamp: {
                 type: Number,
             },

package/lib/markdoc/tags/tab.js

@@ -6,6 +6,7 @@ exports.tab = {
         attributes: {
             label: { type: String, required: true },
             disable: { type: Boolean, default: false },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
         },
         render: 'div',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.56.0-next.13",
+  "version": "0.56.0-next.14",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/Catalog.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -10,7 +10,7 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
-import { getPathPrefix } from '@redocly/theme/core';
+import { getPathPrefix } from '@redocly/theme/core/utils';
 import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CatalogCardProps = {

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, getPathPrefix, SortOption, useThemeHooks } from '@redocly/theme/core';
+import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types/catalog';
+import { getPathPrefix } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export type CatalogSelectorProps = {

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core';
+import { CatalogViewMode } from '@redocly/theme/core/types/catalog';
 
 function useViewMode(initialViewMode: CatalogViewMode) {
   const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);

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/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/Footer/FooterItem.tsx

@@ -7,9 +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, resolveIcon } from '@redocly/theme/core/utils';
-import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+import { breakpoints } from '@redocly/theme/core/utils';
+import { UniversalIcon } from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 
 export type FooterItemProps = {
   item: ResolvedNavItem;
@@ -27,21 +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);
-  const resolvedIcon = resolveIcon(item.icon);
-  const iconComponent =
-    item.srcSet || resolvedIcon.type === 'link' ? (
-      <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`
-        }
-      />
-    ) : resolvedIcon.type === 'font-awesome' ? (
-      <CDNIcon name={resolvedIcon.name} type={resolvedIcon.style} />
-    ) : null;
+
   return (
     <FooterItemWrapper
       className={className}
@@ -62,7 +47,11 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           onClick={() => telemetry.send({ type: 'footer_item.clicked' })}
           data-translation-key={item.labelTranslationKey}
         >
-          {hasIcon ? <FooterLinkIcon iconsOnly={iconsOnly}>{iconComponent}</FooterLinkIcon> : null}
+          {hasIcon ? (
+            <FooterLinkIcon iconsOnly={iconsOnly}>
+              <UniversalIcon icon={item.icon} srcSet={item.srcSet} />
+            </FooterLinkIcon>
+          ) : null}
           {!iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null}
           {item.external ? <LaunchIcon size="10px" /> : null}
         </FooterLink>
@@ -79,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/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';

package/src/components/Menu/MenuItem.tsx

@@ -11,10 +11,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, resolveIcon } from '@redocly/theme/core/utils';
+import { getMenuItemType } 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 { UniversalIcon } from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
@@ -72,14 +72,6 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
 
   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 label = item.label && (
     <MenuItemLabelWrapper
       active={item.active}
@@ -95,7 +87,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       data-testid="menu-item-label"
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
-      {iconComponent}
+      <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
           <span>{translate(item.labelTranslationKey, item.label)}</span>
@@ -334,18 +326,9 @@ 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);
-  margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
-  flex-shrink: 0;
-  overflow: hidden;
-`;
-
-const MenuItemCDNIcon = styled(CDNIcon)`
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = styled(UniversalIcon)`
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
   flex-shrink: 0;
   overflow: hidden;

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,8 +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 { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
-import { resolveIcon } from '@redocly/theme/core/utils';
+import { UniversalIcon } from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 
 export type NavbarItemProps = {
   navItem: ResolvedNavItem;
@@ -42,14 +41,6 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
     pathname ===
     withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
 
-  const resolvedIcon = resolveIcon(item.icon);
-  const iconComponent =
-    resolvedIcon.type === 'link' ? (
-      <NavbarIcon url={item.icon} />
-    ) : resolvedIcon.type === 'font-awesome' ? (
-      <NavbarCDNIcon name={resolvedIcon.name} type={resolvedIcon.style} />
-    ) : null;
-
   const itemContent = (
     <NavbarMenuItem
       as={item.link ? Link : undefined}
@@ -62,7 +53,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       target={item.target}
       to={item.link}
     >
-      {iconComponent}
+      <NavbarIcon icon={item.icon} srcSet={item.srcSet} />
       <NavbarLabel data-translation-key={item.labelTranslationKey}>
         {translate(item.labelTranslationKey, item.label)}
       </NavbarLabel>
@@ -84,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>
@@ -142,27 +133,11 @@ 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 NavbarCDNIcon = styled(CDNIcon)`
-  width: var(--navbar-item-icon-width);
-  height: var(--navbar-item-icon-height);
+const NavbarIcon = styled(UniversalIcon)`
+  --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)`
   margin-left: 5px;

package/src/core/types/sidebar.ts

@@ -14,6 +14,7 @@ export type SidebarNavItem = {
   sublabel?: string;
   subLabelTranslationKey?: string;
   icon?: string;
+  srcSet?: string;
   link?: string;
   type?: string;
   httpVerb?: string;

package/src/core/utils/icon-resolver.ts

@@ -29,10 +29,7 @@ export function resolveIcon(icon?: string): ResolvedIcon {
 
   const trimmed = icon.trim();
   const isLink =
-    trimmed.startsWith('/') ||
-    trimmed.startsWith('./') ||
-    trimmed.startsWith('../') ||
-    /^https?:\/\//.test(trimmed);
+    trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
 
   if (isLink) {
     return { type: 'link', value: trimmed };

package/src/ext/configure.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '@redocly/theme';
+import { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 
 export type SecurityDetails = {
   password?: string;

package/src/icons/CDNIcon/CDNIcon.tsx

@@ -42,6 +42,6 @@ const Icon = (props: CDNIconProps) => {
 export const CDNIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/CDNIcon/CDNIcon',
 }))<CDNIconProps>`
-  height: ${({ size }) => size || 'var(--icon-size, 16px)'};
-  width: ${({ size }) => size || 'var(--icon-size, 16px)'};
+  height: ${({ size }) => size || 'var(--icon-height, 16px)'};
+  width: ${({ size }) => size || 'var(--icon-width, 16px)'};
 `;

package/src/icons/UniversalIcon/UniversalIcon.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+import { resolveIcon } from '@redocly/theme/core/utils';
+import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+import { Image } from '@redocly/theme/components/Image/Image';
+
+export interface UniversalIconProps {
+  icon: string | React.ReactNode;
+  srcSet?: string;
+  rawContent?: string;
+  size?: string;
+  color?: string;
+  alt?: string;
+  className?: string;
+}
+
+export function UniversalIcon({
+  icon,
+  srcSet,
+  rawContent,
+  size,
+  color,
+  alt,
+  className,
+}: UniversalIconProps) {
+  if (srcSet) {
+    return <Image srcSet={srcSet} alt={alt} className={className} />;
+  }
+
+  const resolvedIcon = icon && typeof icon === 'string' ? resolveIcon(icon) : null;
+  const iconComponent = rawContent ? (
+    <IconSvg fileRawContent={rawContent} className={className} />
+  ) : resolvedIcon?.type === 'link' ? (
+    <IconImg src={resolvedIcon.value} alt={alt} className={className} />
+  ) : resolvedIcon?.type === 'font-awesome' ? (
+    <CDNIcon
+      name={resolvedIcon.name}
+      type={resolvedIcon.style}
+      size={size}
+      color={color}
+      className={className}
+    />
+  ) : (
+    icon
+  );
+
+  return iconComponent;
+}
+
+const IconImg = styled.img`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+  object-fit: cover;
+`;
+
+const IconSvg = styled(InlineSvg)`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--icon-color, currentColor);
+  }
+`;

package/src/index.ts

@@ -280,6 +280,7 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { breakpoints } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
   className?: string;

package/src/markdoc/components/Cards/CardIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+import { UniversalIcon } from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 
 export type CardIconProps = {
   variant?: string;
@@ -13,31 +13,16 @@ export type CardIconProps = {
 export function CardIcon({ variant, src, rawContent, position }: CardIconProps) {
   return (
     <CardIconWrapper $variant={variant} $position={position}>
-      {rawContent ? <CardSvg fileRawContent={rawContent} /> : <CardImg src={src} />}
+      <UniversalIcon icon={src} rawContent={rawContent} />
     </CardIconWrapper>
   );
 }
 
-const CardImg = styled.img`
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-  object-fit: cover;
-`;
-
-const CardSvg = styled(InlineSvg)`
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--card-icon-color);
-  }
-`;
-
 const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
+  --icon-width: var(--card-icon-width);
+  --icon-height: var(--card-icon-height);
+  --icon-color: var(--card-icon-color);
+
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
   justify-content: center;

package/src/markdoc/components/Tabs/Tab.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { TabButtonLink, TabItem } from '@redocly/theme/markdoc/components/Tabs/TabList';
+import { UniversalIcon } from '@redocly/theme/icons/UniversalIcon/UniversalIcon';
 
 export type TabProps = {
   tabId: string;
@@ -15,6 +16,7 @@ export type TabProps = {
   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onClick: () => void;
   icon?: React.ReactNode;
+  iconRawContent?: string;
 };
 
 export function TabComponent({
@@ -26,6 +28,7 @@ export function TabComponent({
   onKeyDown,
   onClick,
   icon,
+  iconRawContent,
 }: TabProps): JSX.Element {
   return (
     <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
@@ -42,7 +45,7 @@ export function TabComponent({
         onClick={onClick}
       >
         <LabelWrapper>
-          {icon}
+          <UniversalIcon icon={icon} rawContent={iconRawContent} />
           {label}
         </LabelWrapper>
       </TabButtonLink>
@@ -54,6 +57,8 @@ const LabelWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
+  --icon-width: var(--md-tabs-icon-size);
+  --icon-height: var(--md-tabs-icon-size);
 `;
 
 export const Tab = styled(TabComponent)``;

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -16,7 +16,7 @@ export type TabItemProps = {
   disable?: boolean;
   onClick?: () => void;
   children: React.ReactNode;
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | string;
 };
 
 type TabsProps = {

package/src/markdoc/components/Tabs/variables.ts

@@ -96,5 +96,7 @@ export const markdownTabs = css`
 
   --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing
 
+  --md-tabs-icon-size: 16px; // @presenter Spacing
+
   // @tokens End
   `;

package/src/markdoc/tags/card.ts

@@ -14,7 +14,7 @@ export const card: MarkdocSchemaWrapper = {
         type: String,
         resolver: 'link',
       },
-      icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+      icon: { type: String, resolver: 'relativeOrCdnIcon' },
       lineClamp: {
         type: Number,
       },

package/src/markdoc/tags/tab.ts

@@ -5,6 +5,7 @@ export const tab: MarkdocSchemaWrapper = {
     attributes: {
       label: { type: String, required: true },
       disable: { type: Boolean, default: false },
+      icon: { type: String, resolver: 'relativeOrCdnIcon' },
     },
     render: 'div',
   },