@redocly/theme 0.56.0-rc.2 → 0.56.1

package/src/core/types/telemetry.ts

@@ -1,7 +1,7 @@
 import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
 
 type ExtractEventType<T> = T extends {
-  span?: { attributes?: { 'cloudevents.event_type': infer EventType } };
+  type: infer EventType;
 }
   ? EventType
   : never;
@@ -10,25 +10,17 @@ export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
 
 type GetMessageForEventType<TEventType extends EventType> = Extract<
   AsyncApiRealm.Messages,
-  { span?: { attributes?: { 'cloudevents.event_type': TEventType } } }
+  { type: TEventType }
 >;
 
 type ExtractEventDataForType<TEventType extends EventType> =
   GetMessageForEventType<TEventType> extends {
-    span?: { attributes?: infer Attrs };
+    data: infer Data;
   }
-    ? {
-        [K in keyof Attrs as K extends `cloudevents.event_data.${string}` ? K : never]: Attrs[K];
-      }
+    ? Data
     : never;
 
-export type ConvertEventDataToPayload<T> = {
-  [K in keyof T as K extends `cloudevents.event_data.${infer FieldName}` ? FieldName : never]: T[K];
-};
-
-export type EventPayload<TEventType extends EventType> = ConvertEventDataToPayload<
-  ExtractEventDataForType<TEventType>
->;
+export type EventPayload<TEventType extends EventType> = ExtractEventDataForType<TEventType>;
 
 export interface SendEventParams<TEventType extends EventType> {
   type: TEventType;

package/src/core/utils/download-code-walkthrough.ts

@@ -1,5 +1,4 @@
 import { saveAs } from 'file-saver';
-import JSZip from 'jszip';
 
 import type { CodeWalkthroughFile } from '@redocly/config';
 
@@ -7,14 +6,16 @@ import { removeLeadingSlash } from './urls';
 import { findClosestCommonDirectory } from './find-closest-common-directory';
 import { getCodeWalkthroughFileText } from './get-code-walkthrough-file-text';
 
-// https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
-JSZip.support.nodebuffer = false;
-
 export async function downloadCodeWalkthrough(
   files: CodeWalkthroughFile[],
   state: Record<string, { value: string | boolean }>,
   inputsState: Record<string, { value: string }>,
 ) {
+  const JSZip = (await import('jszip')).default;
+
+  // https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
+  JSZip.support.nodebuffer = false;
+
   const zip = new JSZip();
 
   const filePaths = files.map(({ path }) => path);

package/src/core/utils/enhanced-smoothstep.ts

@@ -0,0 +1,14 @@
+/**
+ * Enhanced smoothstep function for smooth interpolation with configurable threshold.
+ * Used in active heading detection to create virtual positions for better scroll behavior.
+ */
+export function enhancedSmoothstep(input: number, threshold: number = 0.4): number {
+  if (input <= threshold) {
+    return 0;
+  }
+
+  const normalizedValue = Math.min(Math.max((input - threshold) / (1 - threshold), 0), 1);
+  return (
+    3 * normalizedValue * normalizedValue - 2 * normalizedValue * normalizedValue * normalizedValue
+  );
+}

package/src/core/utils/get-file-icon.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+
+// extension to icon name
+const fileIconMap: Record<string, string> = {
+  yaml: 'yaml',
+  yml: 'yaml',
+  json: 'json',
+  js: 'javascript',
+  ts: 'typescript',
+  css: 'css',
+  html: 'html',
+  jsx: 'react',
+  tsx: 'react',
+  md: 'markdown',
+  graphql: 'graphql',
+  gql: 'graphql',
+  py: 'python',
+  sh: 'console',
+  xsh: 'console',
+  nu: 'console',
+  java: 'java',
+  ps: 'powershell',
+  php: 'php_elephant',
+  go: 'go',
+  ruby: 'ruby',
+  swift: 'swift',
+  kotlin: 'kotlin',
+  rust: 'rust',
+  scala: 'scala',
+  elixir: 'elixir',
+  dart: 'dart',
+  http: 'http',
+  rest: 'http',
+  c: 'c',
+  h: 'c',
+  hpp: 'c',
+  cc: 'c',
+  cpp: 'c',
+  cxx: 'c',
+  'c++': 'c',
+  sql: 'database',
+  hbs: 'handlebars',
+  cs: 'csharp',
+  csx: 'csharp',
+  csharp: 'csharp',
+  markdoc: 'markdoc',
+  mdoc: 'markdoc',
+  mdx: 'mdx',
+};
+
+// code block language to icon name, only for those when code extension is not available
+const languageIconMap: Record<string, string> = {
+  bash: 'console',
+  python: 'python',
+  java: 'java',
+  graphql: 'graphql',
+  javascript: 'javascript',
+  typescript: 'typescript',
+  react: 'react',
+  markdown: 'markdown',
+  php: 'php_elephant',
+  ruby: 'ruby',
+  swift: 'swift',
+  kotlin: 'kotlin',
+  rust: 'rust',
+  scala: 'scala',
+  elixir: 'elixir',
+  dart: 'dart',
+  csharp: 'csharp',
+  objectivec: 'c',
+  perl: 'perl',
+  sql: 'database',
+  xml: 'xml',
+  vim: 'vim',
+  lua: 'lua',
+  zsh: 'console',
+  fish: 'console',
+  powershell: 'console',
+  handlebars: 'handlebars',
+  markdoc: 'markdoc',
+  mdx: 'mdx',
+};
+
+export function getFileIconByExt(ext: string) {
+  const iconName = fileIconMap[ext] || 'document';
+  return <CDNIcon name={iconName} pack="code" mode="background" />;
+}
+
+export function getFileIconByLanguage(language: string) {
+  const iconName = fileIconMap[language] || languageIconMap[language] || 'document';
+  return <CDNIcon name={iconName} pack="code" mode="background" />;
+}

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

@@ -0,0 +1,57 @@
+export type ResolvedIcon =
+  | { type: 'link'; value: string }
+  | { type: 'font-awesome'; name: string; style: string }
+  | { type: 'invalid'; reason: string };
+
+const FA_ICON_STYLES = ['solid', 'regular', 'duotone', 'brands'] as string[];
+const FA_ICON_NAME_PATTERN = /^[a-z0-9-]+$/i;
+
+/**
+ * Resolves an icon value from configuration into a structured object.
+ *
+ * Supports:
+ * - URLs (absolute or relative paths to image files)
+ * - Font Awesome icons in formats:
+ *    - "solid camera" (style + name)
+ *    - "camera" (name only, default style: 'regular')
+ *
+ * @param icon - The icon string from config.
+ * @returns A structured object describing the icon:
+ *    - type: 'url' | 'font-awesome' | 'invalid'
+ *    - value: for URLs
+ *    - name and style: for Font Awesome icons
+ *    - reason: for invalid entries
+ */
+export function resolveIcon(icon?: string): ResolvedIcon {
+  if (!icon || typeof icon !== 'string') {
+    return { type: 'invalid', reason: 'Icon must be a non-empty string' };
+  }
+
+  const trimmed = icon.trim();
+  const isLink =
+    trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
+
+  if (isLink) {
+    return { type: 'link', value: trimmed };
+  }
+
+  const [first, second] = trimmed.split(/\s+/);
+
+  if (first) {
+    if (second) {
+      // Format: "style name" (e.g., "solid camera")
+      if (FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(second)) {
+        return { type: 'font-awesome', style: first, name: second };
+      } else {
+        return { type: 'invalid', reason: 'Unrecognized icon format' };
+      }
+    } else if (!FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(first)) {
+      return {
+        type: 'font-awesome',
+        name: first,
+        style: 'regular',
+      };
+    }
+  }
+  return { type: 'invalid', reason: 'Unrecognized icon format' };
+}

package/src/core/utils/index.ts

@@ -9,7 +9,7 @@ export * from './color';
 export * from './urls';
 export * from './js-utils';
 export * from './tags-parser';
-export * from './text-transform';
+export * from './string';
 export * from './dom';
 export * from './markdoc';
 export * from './attribute-parser';
@@ -33,3 +33,6 @@ export * from './replace-inputs-with-value';
 export * from './find-closest-common-directory';
 export * from './get-user-agent';
 export * from './parse-style-string';
+export * from './lang-to-name';
+export * from './enhanced-smoothstep';
+export * from './icon-resolver';

package/src/core/utils/lang-to-name.ts

@@ -0,0 +1,35 @@
+import { capitalize } from './string';
+
+const languages = {
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  jsx: 'React',
+  tsx: 'React',
+  html: 'HTML',
+  css: 'CSS',
+  sh: 'Shell',
+  java: 'Java',
+  py: 'Python',
+  graphql: 'GraphQL',
+  gql: 'GraphQL',
+  yaml: 'YAML',
+  yml: 'YAML',
+  json: 'JSON',
+  md: 'Markdown',
+  markdown: 'Markdown',
+  mermaid: 'Mermaid',
+  php: 'PHP',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  react: 'React',
+  mdoc: 'Markdoc',
+  'objective-c': 'Objective-C',
+  objectivec: 'Objective-C',
+  sql: 'SQL',
+  xml: 'XML',
+  csharp: 'C#',
+};
+
+export function langToName(lang: string) {
+  return languages[lang as keyof typeof languages] || capitalize(lang);
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CDNIconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+import { ICONS_CDN_URL } from '@redocly/theme/core/constants';
+
+const Icon = (props: CDNIconProps) => {
+  const { name, type, pack, mode, color, ...rest } = props;
+  const cdnUrl = ICONS_CDN_URL[pack || 'font-awesome'];
+  const typeSegment = pack === 'code' ? '' : type ? type + '/' : 'regular/';
+
+  const styleProps =
+    mode === 'background'
+      ? {
+          backgroundImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          backgroundSize: 'contain',
+        }
+      : {
+          backgroundColor: color ? getCssColorVariable(color) : 'currentColor',
+          maskImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+          maskRepeat: 'no-repeat',
+          maskPosition: 'center',
+          maskSize: 'contain',
+        };
+
+  return (
+    <svg
+      {...rest}
+      style={{
+        ...styleProps,
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      }}
+    />
+  );
+};
+
+export const CDNIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CDNIcon/CDNIcon',
+}))<CDNIconProps>`
+  height: ${({ size }) => size || 'var(--icon-height, 1em)'};
+  width: ${({ size }) => size || 'var(--icon-width, 1em)'};
+`;

package/src/icons/ChatGptIcon/ChatGptIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6.74887 6.55188V5.54033C6.74887 5.45514 6.78085 5.39123 6.85535 5.34869L8.88914 4.17742C9.16598 4.01771 9.49608 3.94322 9.83676 3.94322C11.1145 3.94322 11.9238 4.93348 11.9238 5.98758C11.9238 6.06209 11.9238 6.14729 11.9131 6.23248L9.80481 4.99731C9.67705 4.92281 9.54923 4.92281 9.42147 4.99731L6.74887 6.55188ZM11.4978 10.4916V8.0745C11.4978 7.9254 11.4339 7.81892 11.3061 7.7444L8.63354 6.18983L9.50666 5.68935C9.58118 5.64681 9.64509 5.64681 9.71961 5.68935L11.7534 6.86061C12.3391 7.20138 12.733 7.9254 12.733 8.62811C12.733 9.43732 12.2539 10.1827 11.4978 10.4915V10.4916ZM6.12066 8.36206L5.24754 7.85099C5.17304 7.80845 5.14106 7.74451 5.14106 7.65932V5.31682C5.14106 4.17753 6.01418 3.315 7.19612 3.315C7.64339 3.315 8.05856 3.4641 8.41003 3.73029L6.31241 4.94418C6.18468 5.01868 6.12077 5.12515 6.12077 5.27428V8.36214L6.12066 8.36206ZM8.00002 9.4481L6.74887 8.74537V7.25473L8.00002 6.55199L9.25109 7.25473V8.74537L8.00002 9.4481ZM8.80393 12.6851C8.35668 12.6851 7.9415 12.536 7.59004 12.2698L9.68764 11.0559C9.81539 10.9814 9.8793 10.8749 9.8793 10.7258V7.63795L10.7631 8.14902C10.8376 8.19156 10.8696 8.25547 10.8696 8.34069V10.6832C10.8696 11.8225 9.98578 12.685 8.80393 12.685V12.6851ZM6.28037 10.3106L4.24657 9.1394C3.66089 8.7986 3.26698 8.07461 3.26698 7.37188C3.26698 6.55199 3.75678 5.8173 4.51273 5.50849V7.93618C4.51273 8.08528 4.57667 8.19176 4.7044 8.26628L7.36642 9.81016L6.49329 10.3106C6.4188 10.3532 6.35486 10.3532 6.28037 10.3106ZM6.16331 12.0569C4.96009 12.0569 4.0763 11.1518 4.0763 10.0338C4.0763 9.94859 4.08697 9.86339 4.09756 9.7782L6.19518 10.9921C6.32291 11.0666 6.45075 11.0666 6.57849 10.9921L9.25109 9.44821V10.4598C9.25109 10.545 9.21913 10.6089 9.14461 10.6514L7.11084 11.8227C6.83398 11.9824 6.50388 12.0569 6.1632 12.0569H6.16331ZM8.80393 13.3239C10.0923 13.3239 11.1677 12.4082 11.4127 11.1943C12.6052 10.8855 13.3719 9.7675 13.3719 8.62822C13.3719 7.88283 13.0525 7.15884 12.4775 6.63707C12.5307 6.41345 12.5627 6.18983 12.5627 5.96632C12.5627 4.4437 11.3275 3.3043 9.90067 3.3043C9.61325 3.3043 9.33639 3.34684 9.05953 3.44273C8.58031 2.97421 7.92013 2.67609 7.19612 2.67609C5.90773 2.67609 4.83236 3.59175 4.58736 4.80564C3.39482 5.11446 2.62817 6.23248 2.62817 7.37176C2.62817 8.11715 2.94757 8.84115 3.52258 9.36291C3.46934 9.58653 3.43738 9.81016 3.43738 10.0337C3.43738 11.5563 4.67256 12.6957 6.09937 12.6957C6.38682 12.6957 6.66368 12.6531 6.94054 12.5573C7.41965 13.0258 8.07982 13.3239 8.80393 13.3239Z" />
+  </svg>
+);
+
+export const ChatGptIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChatGptIcon/ChatGptIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7 10.707L4.5 8.2065L5.2065 7.5L7 9.293L10.7925 5.5L11.5 6.2075L7 10.707Z" />
+    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" />
+  </svg>
+);
+
+export const CheckmarkOutlineIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ClaudeIcon/ClaudeIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M4.03188 9.88255L6.60172 8.62367L6.64494 8.51434L6.60172 8.45352H6.47649L6.04701 8.43042L4.57865 8.39577L3.3052 8.34957L2.07142 8.29182L1.761 8.23408L1.46997 7.89915L1.49996 7.73207L1.761 7.57884L2.13492 7.60733L2.96126 7.65661L4.2012 7.7313L5.10074 7.77749L6.43328 7.89838H6.64494L6.67492 7.82369L6.60261 7.77749L6.54616 7.7313L5.26301 6.97212L3.87402 6.16983L3.14646 5.70785L2.75313 5.47379L2.5547 5.25435L2.46916 4.77544L2.82633 4.43204L3.30608 4.46052L3.42866 4.48901L3.91459 4.81548L4.95258 5.5169L6.30805 6.38849L6.50648 6.53248L6.58585 6.4832L6.59555 6.44855L6.50648 6.31843L5.76921 5.15503L4.98256 3.9716L4.63245 3.48114L4.53985 3.18702C4.50722 3.06614 4.48341 2.9645 4.48341 2.84054L4.88996 2.35855L5.11485 2.29541L5.65721 2.35855L5.88562 2.53179L6.22251 3.20473L6.7684 4.26419L7.61502 5.70477L7.86284 6.1321L7.99512 6.52786L8.04451 6.64874H8.13005V6.57944L8.19972 5.76791L8.32848 4.77159L8.45371 3.48961L8.49692 3.1285L8.70152 2.69579L9.10807 2.46172L9.42556 2.59415L9.6866 2.92061L9.65044 3.13158L9.49523 4.01241L9.19097 5.39217L8.99254 6.31612H9.10807L9.24036 6.20062L9.77567 5.58004L10.6752 4.59835L11.0721 4.20875L11.5351 3.77834L11.8323 3.57354H12.394L12.8076 4.1102L12.6224 4.66456L12.0439 5.30517L11.5642 5.84799L10.8763 6.65644L10.4468 7.3032L10.4865 7.35479L10.5888 7.34632L12.1427 7.05759L12.9822 6.92515L13.9841 6.77501L14.4374 6.9598L14.4868 7.14767L14.3086 7.53188L13.2371 7.76287L11.9804 7.9823L10.109 8.36882L10.0861 8.38345L10.1126 8.41194L10.9556 8.48123L11.3163 8.49817H12.1991L13.843 8.6052L14.2725 8.85312L14.53 9.15649L14.4868 9.38747L13.8253 9.68159L12.9329 9.4968L10.8498 9.06409L10.1355 8.90856H10.0367V8.96014L10.632 9.46832L11.7229 10.3284L13.089 11.4371L13.1586 11.7112L12.9831 11.9276L12.7979 11.9045L11.5977 11.116L11.1347 10.7611L10.0861 9.99035H10.0164V10.0712L10.2581 10.3799L11.5342 12.0546L11.6003 12.5682L11.5077 12.7352L11.177 12.8361L10.8137 12.7784L10.0667 11.8629L9.29592 10.8319L8.67418 9.90796L8.59834 9.94569L8.23147 13.3959L8.0595 13.5722L7.66264 13.7046L7.33193 13.4852L7.15644 13.1302L7.33193 12.4288L7.54359 11.5133L7.71556 10.7857L7.87077 9.88178L7.96337 9.5815L7.9572 9.56148L7.88136 9.56995L7.10088 10.5054L5.91385 11.906L4.97463 12.7837L4.74974 12.8615L4.35994 12.6852L4.3961 12.3703L4.61393 12.09L5.91385 10.6463L6.69785 9.75166L7.20406 9.23502L7.20053 9.16033H7.17055L3.71792 11.1176L3.10324 11.1869L2.83867 10.9705L2.8713 10.6155L2.99653 10.5001L4.03452 9.87639L4.031 9.87947L4.03188 9.88255Z" />
+  </svg>
+);
+
+export const ClaudeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ClaudeIcon/ClaudeIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GenericIcon/GenericIcon.tsx

@@ -0,0 +1,78 @@
+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 type GenericIconProps = {
+  icon: string | React.ReactNode;
+  srcSet?: string;
+  rawContent?: string;
+  size?: string;
+  color?: string;
+  alt?: string;
+  className?: string;
+};
+
+const INVALID_ICON_NAME = 'image-slash';
+
+export function GenericIcon({
+  icon,
+  srcSet,
+  rawContent,
+  size,
+  color,
+  alt,
+  className,
+}: GenericIconProps) {
+  if (srcSet) {
+    return <IconSrcSetImg 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}
+    />
+  ) : resolvedIcon?.type === 'invalid' ? (
+    <CDNIcon name={INVALID_ICON_NAME} 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;
+  vertical-align: middle;
+`;
+
+const IconSrcSetImg = styled(Image)`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+`;
+
+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/icons/GraphqlIcon/GraphqlIcon.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="14"
+    height="16"
+    viewBox="0 0 14 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    color="#E535AB"
+  >
+    <path
+      d="M0.723804 11.7744L1.29883 12.1064L7.70483 1.01125L7.1298 0.679253L0.723804 11.7744Z"
+      fill="#22242B"
+    />
+    <path d="M13.4043 10.8882H0.592285V11.5522H13.4043V10.8882Z" fill="#E535AB" />
+    <path
+      d="M0.845506 11.2609L7.25391 14.9609L7.58591 14.3859L1.17751 10.6859L0.845506 11.2609Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M6.4124 1.61787L12.8208 5.31787L13.1528 4.74285L6.7444 1.04285L6.4124 1.61787Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M0.847688 4.74041L1.17969 5.31543L7.58809 1.61543L7.25609 1.04041L0.847688 4.74041Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M6.29664 1.01125L12.7026 12.1064L13.2777 11.7744L6.87166 0.679253L6.29664 1.01125Z"
+      fill="#E535AB"
+    />
+    <path d="M1.7641 4.2998H1.1001V11.6998H1.7641V4.2998Z" fill="#E535AB" />
+    <path d="M12.9003 4.2998H12.2363V11.6998H12.9003V4.2998Z" fill="#E535AB" />
+    <path
+      d="M6.85111 14.1774L7.14111 14.6797L12.7147 11.4617L12.4247 10.9594L6.85111 14.1774Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M13.7802 11.9162C13.3962 12.5842 12.5402 12.8122 11.8722 12.4282C11.2042 12.0442 10.9762 11.1882 11.3602 10.5202C11.7442 9.85218 12.6002 9.62418 13.2682 10.0082C13.9402 10.3962 14.1682 11.2482 13.7802 11.9162Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M2.63619 5.48014C2.25219 6.14814 1.39619 6.37614 0.728188 5.99215C0.0601878 5.60814 -0.167812 4.75214 0.216188 4.08414C0.600188 3.41614 1.45619 3.18814 2.12419 3.57214C2.79219 3.96014 3.02019 4.81214 2.63619 5.48014Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M0.220094 11.9162C-0.163906 11.2482 0.064094 10.3962 0.732094 10.0082C1.40009 9.62418 2.25209 9.85218 2.64009 10.5202C3.02409 11.1882 2.79609 12.0402 2.12809 12.4282C1.45609 12.8122 0.604094 12.5842 0.220094 11.9162Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M11.3641 5.48014C10.9801 4.81214 11.2081 3.96014 11.8761 3.57214C12.5441 3.18814 13.3961 3.41614 13.7841 4.08414C14.1681 4.75214 13.9401 5.60415 13.2721 5.99215C12.6041 6.37614 11.7481 6.14814 11.3641 5.48014Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M7 15.832C6.228 15.832 5.604 15.208 5.604 14.436C5.604 13.664 6.228 13.04 7 13.04C7.772 13.04 8.396 13.664 8.396 14.436C8.396 15.204 7.772 15.832 7 15.832Z"
+      fill="#E535AB"
+    />
+    <path
+      d="M7 2.95997C6.228 2.95997 5.604 2.33597 5.604 1.56397C5.604 0.791969 6.228 0.167969 7 0.167969C7.772 0.167969 8.396 0.791969 8.396 1.56397C8.396 2.33597 7.772 2.95997 7 2.95997Z"
+      fill="#E535AB"
+    />
+  </svg>
+);
+
+export const GraphqlIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/GraphqlIcon/GraphqlIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GraphqlIcon/index.ts

@@ -0,0 +1 @@
+export { GraphqlIcon } from '@redocly/theme/icons/GraphqlIcon/GraphqlIcon';

package/src/icons/HexagonIcon/HexagonIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 26" {...props}>
+    <path d="M21.6594 6.61069L11.9094 0.923193C11.7852 0.850699 11.6439 0.8125 11.5 0.8125C11.3561 0.8125 11.2148 0.850699 11.0906 0.923193L1.34058 6.61069C1.21792 6.68225 1.11616 6.78471 1.04543 6.90785C0.974708 7.03099 0.937495 7.17052 0.9375 7.31253V18.6875C0.937495 18.8295 0.974708 18.9691 1.04543 19.0922C1.11616 19.2154 1.21792 19.3178 1.34058 19.3894L11.0906 25.0769C11.2148 25.1494 11.3561 25.1876 11.5 25.1876C11.6439 25.1876 11.7852 25.1494 11.9094 25.0769L21.6594 19.3894C21.7821 19.3178 21.8838 19.2154 21.9546 19.0922C22.0253 18.9691 22.0625 18.8295 22.0625 18.6875V7.31253C22.0625 7.17052 22.0253 7.03099 21.9546 6.90785C21.8838 6.78471 21.7821 6.68225 21.6594 6.61069ZM11.5 2.56566L19.6377 7.31253L11.5 12.0594L3.36232 7.31253L11.5 2.56566ZM2.5625 8.72726L10.6875 13.4666V22.9603L2.5625 18.221V8.72726ZM12.3125 22.9603V13.4666L20.4375 8.72726V18.221L12.3125 22.9603Z" />
+  </svg>
+);
+
+export const HexagonIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HexagonIcon/HexagonIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MarkdownFullIcon/MarkdownFullIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.2308 4.17188C15.2308 3.95614 15.0586 3.78125 14.8462 3.78125H1.15385C0.941429 3.78125 0.769231 3.95614 0.769231 4.17188V11.8281C0.769231 12.0439 0.941429 12.2188 1.15385 12.2188H14.8462C15.0586 12.2188 15.2308 12.0439 15.2308 11.8281V4.17188ZM16 11.8281C16 12.4753 15.4834 13 14.8462 13H1.15385C0.516595 13 0 12.4753 0 11.8281V4.17188C0 3.52467 0.516595 3 1.15385 3H14.8462C15.4834 3 16 3.52467 16 4.17188V11.8281Z" />
+    <path d="M2.30769 10.6562V5.34375H3.84615L5.38462 7.29688L6.92308 5.34375H8.46154V10.6562H6.92308V7.60938L5.38462 9.5625L3.84615 7.60938V10.6562H2.30769ZM11.9231 10.6562L9.61539 8.07812H11.1538V5.34375H12.6923V8.07812H14.2308L11.9231 10.6562Z" />
+  </svg>
+);
+
+export const MarkdownFullIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/MarkdownFullIcon/MarkdownFullIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;