@redocly/theme 0.70.0-next.9 → 0.71.0-next.0

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/GithubIcon/GithubIcon.tsx

@@ -0,0 +1,35 @@
+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="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.99982 0.250052C6.9225 0.250332 4.91303 0.989665 3.33088 2.3358C1.74873 3.68193 0.697109 5.54705 0.364134 7.59751C0.0311591 9.64798 0.438552 11.75 1.51344 13.5276C2.58832 15.3052 4.26058 16.6424 6.23107 17.3001C6.66857 17.3813 6.85607 17.1126 6.85607 16.8813C6.85607 16.6501 6.85607 16.1251 6.85607 15.3938C4.42482 15.9188 3.91232 14.2188 3.91232 14.2188C3.74135 13.6831 3.38152 13.2277 2.89982 12.9376C2.10607 12.4001 2.96232 12.4063 2.96232 12.4063C3.23957 12.4455 3.50421 12.5475 3.73601 12.7045C3.96782 12.8616 4.16066 13.0696 4.29982 13.3126C4.54191 13.7468 4.94653 14.0671 5.42471 14.203C5.9029 14.339 6.4155 14.2794 6.84982 14.0376C6.88511 13.5941 7.08061 13.1786 7.39982 12.8688C5.46232 12.6438 3.41857 11.8938 3.41857 8.5438C3.4044 7.67374 3.72683 6.83182 4.31857 6.1938C4.05073 5.44017 4.08205 4.61254 4.40607 3.8813C4.40607 3.8813 5.13732 3.6438 6.81232 4.77505C8.24449 4.3844 9.75515 4.3844 11.1873 4.77505C12.8561 3.6438 13.5873 3.8813 13.5873 3.8813C13.9113 4.61254 13.9427 5.44017 13.6748 6.1938C14.2666 6.83182 14.589 7.67374 14.5748 8.5438C14.5748 11.9063 12.5311 12.6438 10.5811 12.8626C10.79 13.0743 10.951 13.3283 11.0535 13.6075C11.1559 13.8868 11.1973 14.1847 11.1748 14.4813C11.1748 15.6501 11.1748 16.5938 11.1748 16.8813C11.1748 17.1688 11.3311 17.3876 11.7998 17.3001C13.7729 16.6416 15.4469 15.3018 16.5216 13.521C17.5963 11.7401 18.0015 9.63459 17.6644 7.58204C17.3273 5.5295 16.2701 3.66416 14.6822 2.32053C13.0944 0.976903 11.0798 0.242866 8.99982 0.250052Z"
+      fill="#555761"
+    />
+  </svg>
+);
+
+export const GithubIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/GithubIcon/GithubIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/GlobalOutlinedIcon/GlobalOutlinedIcon.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="M13.35 12.5141C13.3531 12.5094 13.3578 12.5047 13.3609 12.5C14.3844 11.2828 15 9.71406 15 8C15 6.28594 14.3844 4.71719 13.3625 3.5C13.3594 3.49531 13.3547 3.49219 13.3516 3.4875C13.3344 3.46719 13.3187 3.44844 13.3016 3.42969C13.2953 3.42188 13.2891 3.41563 13.2828 3.40781L13.2188 3.33437L13.2172 3.33281C13.1938 3.30625 13.1687 3.27969 13.1453 3.25312L13.1438 3.25156C13.0938 3.19844 13.0437 3.14531 12.9922 3.09375L12.9906 3.09219L12.9156 3.01719L12.9109 3.0125C12.8875 2.98906 12.8641 2.96719 12.8406 2.94531C12.8328 2.9375 12.825 2.92969 12.8156 2.92188C12.8 2.90625 12.7844 2.89219 12.7688 2.87812C12.7641 2.87344 12.7578 2.86875 12.7531 2.8625C11.5063 1.70625 9.83594 1 8 1C6.16406 1 4.49375 1.70625 3.24531 2.8625C3.24062 2.86719 3.23438 2.87187 3.22969 2.87812C3.21406 2.89219 3.19844 2.90781 3.18281 2.92344C3.175 2.93125 3.16719 2.93906 3.15781 2.94688C3.13438 2.96875 3.11094 2.99219 3.0875 3.01406L3.08281 3.01875L3.00781 3.09375L3.00625 3.09531C2.95469 3.14688 2.90469 3.2 2.85469 3.25312L2.85313 3.25469C2.82813 3.28125 2.80469 3.30781 2.78125 3.33437L2.77969 3.33594C2.75781 3.35938 2.73594 3.38437 2.71563 3.40937C2.70938 3.41719 2.70313 3.42344 2.69688 3.43125C2.67969 3.45 2.66406 3.47031 2.64687 3.48906C2.64375 3.49375 2.63906 3.49688 2.63594 3.50156C1.61562 4.71719 1 6.28594 1 8C1 9.71406 1.61563 11.2828 2.6375 12.5C2.64062 12.5047 2.64531 12.5094 2.64844 12.5141L2.69688 12.5719C2.70313 12.5797 2.70938 12.5859 2.71563 12.5938L2.77969 12.6672C2.77969 12.6687 2.78125 12.6688 2.78125 12.6703C2.80469 12.6969 2.82813 12.7234 2.85313 12.7484L2.85469 12.75C2.90469 12.8031 2.95469 12.8562 3.00469 12.9078L3.00625 12.9094C3.03125 12.9344 3.05469 12.9594 3.07969 12.9828L3.08437 12.9875C3.13594 13.0391 3.18906 13.0891 3.24219 13.1375C4.49375 14.2937 6.16406 15 8 15C9.83594 15 11.5062 14.2937 12.7547 13.1375C12.8079 13.0887 12.86 13.0387 12.9109 12.9875L12.9156 12.9828C12.9406 12.9578 12.9656 12.9344 12.9891 12.9094L12.9906 12.9078C13.0422 12.8562 13.0922 12.8031 13.1406 12.75L13.1422 12.7484C13.1656 12.7219 13.1906 12.6969 13.2141 12.6703C13.2141 12.6688 13.2156 12.6687 13.2156 12.6672C13.2375 12.6438 13.2594 12.6187 13.2797 12.5938C13.2859 12.5859 13.2922 12.5797 13.2984 12.5719C13.3161 12.553 13.3333 12.5338 13.35 12.5141ZM13.4141 10.2859C13.1984 10.7953 12.9141 11.2672 12.5672 11.6953C12.1765 11.3577 11.7494 11.0647 11.2937 10.8219C11.475 10.0891 11.5875 9.28438 11.6172 8.4375H13.8594C13.8125 9.07656 13.6625 9.69687 13.4141 10.2859ZM13.8594 7.5625H11.6172C11.5875 6.71562 11.475 5.91094 11.2937 5.17812C11.7516 4.93437 12.1781 4.64062 12.5672 4.30469C13.3212 5.23277 13.7722 6.3699 13.8594 7.5625ZM10.2859 2.58594C10.9062 2.84844 11.4703 3.21094 11.9672 3.66719C11.6785 3.91296 11.3679 4.13159 11.0391 4.32031C10.7937 3.61719 10.4797 3.00625 10.1141 2.51719C10.1719 2.53906 10.2297 2.5625 10.2859 2.58594ZM8.87031 13.5328C8.72656 13.6453 8.58281 13.7312 8.4375 13.7891V10.8906C9.05749 10.9339 9.66717 11.0719 10.2453 11.3C10.1156 11.6844 9.96562 12.0391 9.79219 12.3594C9.52031 12.8656 9.20156 13.2703 8.87031 13.5328ZM9.79219 3.64062C9.96406 3.9625 10.1156 4.31719 10.2453 4.7C9.66717 4.92806 9.05749 5.06612 8.4375 5.10938V2.2125C8.58125 2.27031 8.72656 2.35469 8.87031 2.46875C9.20156 2.72969 9.52031 3.13438 9.79219 3.64062ZM8.4375 10.0141V8.4375H10.7422C10.7172 9.12813 10.6313 9.79844 10.4875 10.4344L10.4828 10.4531C9.82708 10.2045 9.13751 10.0564 8.4375 10.0141ZM8.4375 7.5625V5.98594C9.15312 5.94219 9.84063 5.79063 10.4828 5.54688L10.4875 5.56563C10.6313 6.20156 10.7172 6.87031 10.7422 7.5625H8.4375ZM7.5625 8.4375V10.0141C6.84688 10.0578 6.15938 10.2094 5.51719 10.4531L5.5125 10.4344C5.36875 9.79844 5.28281 9.12969 5.25781 8.4375H7.5625ZM5.25781 7.5625C5.28281 6.87187 5.36875 6.20156 5.5125 5.56563L5.51719 5.54688C6.15938 5.79063 6.84531 5.94219 7.5625 5.98594V7.5625H5.25781ZM7.5625 10.8906V13.7875C7.41875 13.7297 7.27344 13.6453 7.12969 13.5312C6.79844 13.2703 6.47813 12.8641 6.20625 12.3578C6.03438 12.0359 5.88281 11.6812 5.75313 11.2984C6.33438 11.0703 6.93906 10.9344 7.5625 10.8906ZM7.5625 5.10938C6.94251 5.06612 6.33283 4.92806 5.75469 4.7C5.88437 4.31562 6.03437 3.96094 6.20781 3.64062C6.47969 3.13438 6.79844 2.72812 7.13125 2.46719C7.275 2.35469 7.41875 2.26875 7.56406 2.21094V5.10938H7.5625ZM5.71406 2.58594C5.77188 2.5625 5.82812 2.53906 5.88594 2.51719C5.52031 3.00625 5.20625 3.61719 4.96094 4.32031C4.63281 4.13281 4.32188 3.91406 4.03281 3.66719C4.52969 3.21094 5.09375 2.84844 5.71406 2.58594ZM2.58594 5.71406C2.80156 5.20469 3.08594 4.73281 3.43281 4.30469C3.82187 4.64062 4.24844 4.93437 4.70625 5.17812C4.525 5.91094 4.4125 6.71562 4.38281 7.5625H2.14062C2.1875 6.92344 2.3375 6.30313 2.58594 5.71406ZM2.14062 8.4375H4.38281C4.4125 9.28438 4.525 10.0891 4.70625 10.8219C4.25059 11.0647 3.82347 11.3577 3.43281 11.6953C2.6788 10.7672 2.22776 9.6301 2.14062 8.4375ZM5.71406 13.4141C5.09375 13.1516 4.52969 12.7891 4.03281 12.3328C4.32188 12.0859 4.63281 11.8687 4.96094 11.6797C5.20625 12.3828 5.52031 12.9938 5.88594 13.4828C5.82812 13.4609 5.77031 13.4375 5.71406 13.4141ZM10.2859 13.4141C10.2281 13.4375 10.1719 13.4609 10.1141 13.4828C10.4797 12.9938 10.7937 12.3828 11.0391 11.6797C11.3672 11.8672 11.6781 12.0859 11.9672 12.3328C11.4731 12.7872 10.9043 13.1529 10.2859 13.4141Z" />
+  </svg>
+);
+
+export const GlobalOutlinedIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/GlobalOutlinedIcon/GlobalOutlinedIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GraphIcon/GraphIcon.tsx

@@ -0,0 +1,26 @@
+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 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M13.125 4.25V0.75H9.625V2.0625H7.875C7.64302 2.06277 7.42061 2.15504 7.25658 2.31908C7.09254 2.48311 7.00027 2.70552 7 2.9375V5.5625H4.375V4.25H0.875V7.75H4.375V6.4375H7V9.0625C7.00027 9.29448 7.09254 9.51689 7.25658 9.68092C7.42061 9.84496 7.64302 9.93723 7.875 9.9375H9.625V11.25H13.125V7.75H9.625V9.0625H7.875V2.9375H9.625V4.25H13.125ZM3.5 6.875H1.75V5.125H3.5V6.875ZM10.5 8.625H12.25V10.375H10.5V8.625ZM10.5 1.625H12.25V3.375H10.5V1.625Z"
+      fill="#0E8450"
+    />
+  </svg>
+);
+
+export const GraphIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/GraphIcon/GraphIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '12px'};
+  width: ${({ size }) => size || '14px'};
+`;

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',
+})`
+  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/GridIcon/GridIcon.tsx

@@ -0,0 +1,38 @@
+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 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V6C2 6.26522 2.10536 6.51957 2.29289 6.70711C2.48043 6.89464 2.73478 7 3 7H6C6.26522 7 6.51957 6.89464 6.70711 6.70711C6.89464 6.51957 7 6.26522 7 6V3C7 2.73478 6.89464 2.48043 6.70711 2.29289C6.51957 2.10536 6.26522 2 6 2ZM6 6H3V3H6V6Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13 2H10C9.73478 2 9.48043 2.10536 9.29289 2.29289C9.10536 2.48043 9 2.73478 9 3V6C9 6.26522 9.10536 6.51957 9.29289 6.70711C9.48043 6.89464 9.73478 7 10 7H13C13.2652 7 13.5196 6.89464 13.7071 6.70711C13.8946 6.51957 14 6.26522 14 6V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2ZM13 6H10V3H13V6Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M6 9H3C2.73478 9 2.48043 9.10536 2.29289 9.29289C2.10536 9.48043 2 9.73478 2 10V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H6C6.26522 14 6.51957 13.8946 6.70711 13.7071C6.89464 13.5196 7 13.2652 7 13V10C7 9.73478 6.89464 9.48043 6.70711 9.29289C6.51957 9.10536 6.26522 9 6 9ZM6 13H3V10H6V13Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13 9H10C9.73478 9 9.48043 9.10536 9.29289 9.29289C9.10536 9.48043 9 9.73478 9 10V13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V10C14 9.73478 13.8946 9.48043 13.7071 9.29289C13.5196 9.10536 13.2652 9 13 9ZM13 13H10V10H13V13Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const GridIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/UserIcon/UserIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HashtagIcon/HashtagIcon.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 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.5 4.5V3.75H8.25V1.5H7.5V3.75H4.5V1.5H3.75V3.75H1.5V4.5H3.75V7.5H1.5V8.25H3.75V10.5H4.5V8.25H7.5V10.5H8.25V8.25H10.5V7.5H8.25V4.5H10.5ZM7.5 7.5H4.5V4.5H7.5V7.5Z" />
+  </svg>
+);
+
+export const HashtagIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/HashtagIcon/HashtagIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

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',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HierarchyIcon/HierarchyIcon.tsx

@@ -0,0 +1,32 @@
+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" width="18" height="18" viewBox="0 0 18 18" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z"
+    />
+  </svg>
+);
+
+export const HierarchyIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HorizontalViewIcon/HorizontalViewIcon.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" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14 15H2C1.73487 14.9997 1.48068 14.8943 1.2932 14.7068C1.10572 14.5193 1.00028 14.2651 1 14V10C1.00028 9.73487 1.10572 9.48068 1.2932 9.2932C1.48068 9.10572 1.73487 9.00028 2 9H14C14.2651 9.00028 14.5193 9.10572 14.7068 9.2932C14.8943 9.48068 14.9997 9.73487 15 10V14C14.9997 14.2651 14.8943 14.5193 14.7068 14.7068C14.5193 14.8943 14.2651 14.9997 14 15ZM2 10V14H14V10H2Z" />
+    <path d="M14 7H2C1.73487 6.99972 1.48068 6.89428 1.2932 6.7068C1.10572 6.51932 1.00028 6.26513 1 6V2C1.00028 1.73487 1.10572 1.48068 1.2932 1.2932C1.48068 1.10572 1.73487 1.00028 2 1H14C14.2651 1.00028 14.5193 1.10572 14.7068 1.2932C14.8943 1.48068 14.9997 1.73487 15 2V6C14.9997 6.26513 14.8943 6.51932 14.7068 6.7068C14.5193 6.89428 14.2651 6.99972 14 7ZM2 2V6H14V2H2Z" />
+  </svg>
+);
+
+export const HorizontalViewIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/HorizontalViewIcon/HorizontalViewIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/IBMCloudHyperProtectCryptoServicesIcon/IBMCloudHyperProtectCryptoServicesIcon.tsx

@@ -0,0 +1,26 @@
+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="M12.5 15L11.45 14.5C10.6 14.1 10 13.2 10 12.25V9H15V12.25C15 13.2 14.45 14.1 13.55 14.5L12.5 15ZM11 10V12.25C11 12.85 11.35 13.35 11.85 13.6L12.5 13.9L13.15 13.6C13.65 13.35 14 12.8 14 12.25V10H11Z" />
+    <path d="M11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6Z" />
+    <path d="M10.5 1C8 1 6 3 6 5.5C6 5.95 6.05 6.4 6.2 6.8L1 12V15H4L9 10L8.3 9.3L6.9 10.7L6.2 10L5.5 10.7L6.2 11.4L5.4 12.2L4.7 11.5L4 12.2L4.7 12.9L3.6 14H2V12.4L7.3 7.1L7.15 6.5C7.05 6.15 7 5.85 7 5.5C7 3.55 8.55 2 10.5 2C12.45 2 14 3.55 14 5.5C14 6.25 13.75 6.95 13.35 7.5H14.5C14.8 6.9 14.95 6.2 14.95 5.5C15 3 13 1 10.5 1Z" />
+  </svg>
+);
+
+export const IBMCloudHyperProtectCryptoServicesIcon = styled(Icon).attrs({
+  'data-component-name':
+    'icons/IBMCloudHyperProtectCryptoServicesIcon/IBMCloudHyperProtectCryptoServicesIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/IdeaIcon/IdeaIcon.tsx

@@ -0,0 +1,32 @@
+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"
+    width="12"
+    height="16"
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path d="M8.44309 12.375H2.81809V13.5H8.44309V12.375Z" />
+    <path d="M7.31809 14.625H3.94309V15.75H7.31809V14.625Z" />
+    <path d="M5.63059 0C4.13874 0 2.708 0.592632 1.65311 1.64752C0.59822 2.70242 0.00558778 4.13316 0.00558778 5.625C-0.0324517 6.4425 0.124148 7.25735 0.462504 8.00252C0.80086 8.74768 1.3113 9.40187 1.95184 9.91125C2.51434 10.4344 2.81809 10.7325 2.81809 11.25H3.94309C3.94309 10.215 3.31871 9.63562 2.71121 9.07875C2.18548 8.67615 1.76648 8.15078 1.49091 7.54866C1.21535 6.94654 1.09163 6.28603 1.13059 5.625C1.13059 4.43153 1.60469 3.28693 2.44861 2.44302C3.29252 1.59911 4.43711 1.125 5.63059 1.125C6.82406 1.125 7.96865 1.59911 8.81257 2.44302C9.65648 3.28693 10.1306 4.43153 10.1306 5.625C10.1689 6.28652 10.0443 6.94734 9.76775 7.5495C9.49119 8.15166 9.0711 8.67676 8.54434 9.07875C7.94246 9.64125 7.31809 10.2037 7.31809 11.25H8.44309C8.44309 10.7325 8.74121 10.4344 9.30934 9.90563C9.94943 9.39711 10.4596 8.74389 10.798 7.99971C11.1364 7.25552 11.2932 6.44163 11.2556 5.625C11.2556 4.88631 11.1101 4.15486 10.8274 3.47241C10.5447 2.78995 10.1304 2.16985 9.60806 1.64752C9.08573 1.12519 8.46564 0.71086 7.78318 0.428178C7.10073 0.145495 6.36927 0 5.63059 0Z" />
+  </svg>
+);
+
+export const IdeaIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/IdeaIcon/IdeaIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/InformationFilledIcon/InformationFilledIcon.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="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 4C8.14834 4 8.29334 4.04399 8.41668 4.1264C8.54002 4.20881 8.63615 4.32594 8.69291 4.46299C8.74968 4.60003 8.76453 4.75083 8.73559 4.89632C8.70665 5.0418 8.63522 5.17544 8.53033 5.28033C8.42544 5.38522 8.29181 5.45665 8.14632 5.48559C8.00083 5.51453 7.85004 5.49968 7.71299 5.44291C7.57595 5.38614 7.45881 5.29001 7.3764 5.16668C7.29399 5.04334 7.25 4.89834 7.25 4.75C7.25 4.55109 7.32902 4.36032 7.46967 4.21967C7.61033 4.07902 7.80109 4 8 4ZM10 12.0625H6V10.9375H7.4375V8.0625H6.5V6.9375H8.5625V10.9375H10V12.0625Z" />
+  </svg>
+);
+
+export const InformationFilledIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/InformationFilledIcon/InformationFilledIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/InformationIcon/InformationIcon.tsx

@@ -0,0 +1,25 @@
+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="M8.5 11V7H6.5V8H7.5V11H6V12H10V11H8.5Z" />
+    <path d="M8 4C7.85167 4 7.70666 4.04399 7.58333 4.1264C7.45999 4.20881 7.36386 4.32595 7.30709 4.46299C7.25033 4.60004 7.23548 4.75084 7.26441 4.89632C7.29335 5.04181 7.36478 5.17544 7.46967 5.28033C7.57456 5.38522 7.7082 5.45665 7.85369 5.48559C7.99917 5.51453 8.14997 5.49968 8.28701 5.44291C8.42406 5.38615 8.54119 5.29002 8.6236 5.16668C8.70602 5.04334 8.75 4.89834 8.75 4.75C8.75 4.55109 8.67098 4.36033 8.53033 4.21967C8.38968 4.07902 8.19892 4 8 4Z" />
+    <path d="M8 15C6.61553 15 5.26216 14.5895 4.11101 13.8203C2.95987 13.0511 2.06266 11.9579 1.53285 10.6788C1.00303 9.3997 0.86441 7.99224 1.13451 6.63437C1.4046 5.2765 2.07129 4.02922 3.05026 3.05026C4.02922 2.07129 5.2765 1.4046 6.63437 1.13451C7.99224 0.86441 9.3997 1.00303 10.6788 1.53285C11.9579 2.06266 13.0511 2.95987 13.8203 4.11101C14.5895 5.26216 15 6.61553 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 2C6.81332 2 5.65328 2.3519 4.66658 3.01119C3.67989 3.67047 2.91085 4.60755 2.45673 5.7039C2.0026 6.80026 1.88378 8.00666 2.11529 9.17054C2.3468 10.3344 2.91825 11.4035 3.75736 12.2426C4.59648 13.0818 5.66558 13.6532 6.82946 13.8847C7.99335 14.1162 9.19975 13.9974 10.2961 13.5433C11.3925 13.0892 12.3295 12.3201 12.9888 11.3334C13.6481 10.3467 14 9.18669 14 8C14 6.4087 13.3679 4.88258 12.2426 3.75736C11.1174 2.63214 9.5913 2 8 2Z" />
+  </svg>
+);
+
+export const InformationIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/InformationIcon/InformationIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/JsonIcon/JsonIcon.tsx

@@ -0,0 +1,33 @@
+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="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M15.5 5.5V10.5H14.5L13.5 7.5V10.5H12.5V5.5H13.5L14.5 8.5V5.5H15.5Z" />
+    <path d="M10.6667 10.5H9.33325C9.11234 10.4997 8.90054 10.4119 8.74433 10.2557C8.58812 10.0995 8.50025 9.88766 8.5 9.66675V6.33325C8.50025 6.11234 8.58812 5.90054 8.74433 5.74433C8.90054 5.58812 9.11234 5.50025 9.33325 5.5H10.6667C10.8877 5.50025 11.0995 5.58812 11.2557 5.74433C11.4119 5.90054 11.4997 6.11234 11.5 6.33325V9.66675C11.4997 9.88766 11.4119 10.0995 11.2557 10.2557C11.0995 10.4119 10.8877 10.4997 10.6667 10.5ZM9.5 9.5H10.5V6.5H9.5V9.5Z" />
+    <path d="M6.66675 10.5H4.5V9.5H6.5V8.5H5.5C5.23486 8.49974 4.98066 8.39429 4.79319 8.20681C4.60571 8.01934 4.50026 7.76514 4.5 7.5V6.33325C4.50025 6.11234 4.58812 5.90054 4.74433 5.74433C4.90054 5.58812 5.11234 5.50025 5.33325 5.5H7.5V6.5H5.5V7.5H6.5C6.76514 7.50026 7.01934 7.60571 7.20681 7.79319C7.39429 7.98066 7.49974 8.23486 7.5 8.5V9.66675C7.49975 9.88766 7.41188 10.0995 7.25567 10.2557C7.09946 10.4119 6.88766 10.4997 6.66675 10.5Z" />
+    <path d="M2.66675 10.5H1.33325C1.11234 10.4997 0.900541 10.4119 0.744331 10.2557C0.588121 10.0995 0.500251 9.88766 0.5 9.66675V8.5H1.5V9.5H2.5V5.5H3.5V9.66675C3.49975 9.88766 3.41188 10.0995 3.25567 10.2557C3.09946 10.4119 2.88766 10.4997 2.66675 10.5Z" />
+  </svg>
+);
+
+export const JsonIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/JsonIcon/JsonIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/KafkaIcon/KafkaIcon.tsx

@@ -0,0 +1,33 @@
+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}>
+    <g clipPath="url(#clip0_8551_41)">
+      <path
+        d="M6.7631 1.83344C6.59429 1.66741 6.35877 1.56488 6.09695 1.56488C5.83611 1.56488 5.60241 1.66741 5.43559 1.83344H5.43079C5.26247 1.99867 5.1577 2.22933 5.1577 2.48462C5.1577 2.74087 5.26247 2.96959 5.43079 3.13385L5.43559 3.13757C5.60241 3.30279 5.83611 3.40436 6.09695 3.40436C6.35877 3.40436 6.59429 3.30279 6.7631 3.13757L6.76559 3.13385C6.93473 2.96959 7.03851 2.74087 7.03851 2.48462C7.03851 2.22933 6.93473 1.99867 6.76559 1.83344H6.7631ZM6.09695 14.4233C6.35877 14.4233 6.59429 14.3189 6.7631 14.1557L6.76559 14.1508C6.93473 13.9878 7.03851 13.7572 7.03851 13.5037C7.03851 13.2474 6.93473 13.0177 6.76559 12.8517H6.7631C6.59429 12.6837 6.35877 12.5822 6.09695 12.5822C5.83611 12.5822 5.60241 12.6837 5.43559 12.8517H5.43079C5.26247 13.0177 5.1577 13.2474 5.1577 13.5037C5.1577 13.7572 5.26247 13.9878 5.43079 14.1508L5.43559 14.1557C5.60241 14.3189 5.83611 14.4233 6.09695 14.4233ZM11.217 11.6368C11.4499 11.5771 11.6607 11.4308 11.7893 11.2097L11.8067 11.1774C11.9211 10.9677 11.9419 10.7257 11.8809 10.5112C11.8193 10.2815 11.668 10.0784 11.4426 9.95123L11.4295 9.94264C11.2099 9.82488 10.9597 9.79929 10.7298 9.86003C10.4961 9.91705 10.2862 10.0698 10.1583 10.2891C10.0287 10.5063 10.0015 10.7569 10.0636 10.9876C10.1277 11.2144 10.2774 11.4194 10.5014 11.5476H10.5029C10.7273 11.6738 10.9815 11.6966 11.217 11.6368ZM7.06134 7.05157C6.81441 6.81054 6.47413 6.65957 6.09695 6.65957C5.72125 6.65957 5.3818 6.81054 5.13536 7.05157C4.89008 7.29179 4.73881 7.62402 4.73881 7.9922C4.73881 8.36136 4.89008 8.69456 5.13536 8.93754C5.3818 9.17663 5.72125 9.32662 6.09695 9.32662C6.47413 9.32662 6.81441 9.17663 7.06134 8.93754C7.30712 8.69456 7.45839 8.36136 7.45839 7.9922C7.45839 7.62402 7.30712 7.29179 7.06134 7.05157ZM6.51915 5.4839C7.06565 5.57201 7.55736 5.82827 7.93257 6.1984H7.93554C7.99513 6.2572 8.05338 6.32086 8.10717 6.38533L9.04542 5.85403C8.91931 5.48098 8.91352 5.09092 9.0148 4.72549C9.1487 4.23565 9.47309 3.79717 9.95934 3.52196L9.9754 3.51256C10.4564 3.24578 11.0032 3.1907 11.4969 3.32175C11.9967 3.45263 12.4477 3.77157 12.7284 4.24715V4.24813C13.0078 4.72079 13.0646 5.2636 12.9312 5.75149C12.7983 6.241 12.4724 6.68241 11.9866 6.95567L11.8585 7.02986H11.8454C11.3961 7.23947 10.9019 7.27187 10.4481 7.15508C10.0754 7.05821 9.73343 6.85508 9.46581 6.56562L8.52905 7.0953C8.63663 7.37424 8.69637 7.6752 8.69637 7.9922C8.69637 8.30823 8.63663 8.61292 8.52905 8.8938L9.46581 9.42154C9.73343 9.12835 10.0754 8.92895 10.4481 8.83209C10.9479 8.69829 11.5022 8.75531 11.9866 9.03149L12.0176 9.04574V9.04769C12.4856 9.32468 12.7997 9.75377 12.9312 10.2378C13.0646 10.7228 13.0078 11.2657 12.7284 11.7394L12.7115 11.7726L12.7095 11.7696C12.4288 12.2263 11.9866 12.5357 11.4984 12.6666C10.9974 12.7957 10.4433 12.7406 9.95934 12.4683V12.4644C9.47309 12.1892 9.1487 11.7497 9.0148 11.261C8.91352 10.8966 8.91931 10.5063 9.04542 10.1335L8.10717 9.60377C8.05338 9.66841 7.99513 9.72915 7.93554 9.78795L7.93257 9.7907C7.55736 10.1591 7.06565 10.4153 6.51915 10.5007V11.5618C6.90858 11.6415 7.25763 11.8323 7.53121 12.0999L7.53254 12.1028C7.89913 12.4597 8.12604 12.957 8.12604 13.5037C8.12604 14.0486 7.89913 14.5428 7.53254 14.9016L7.53121 14.9073C7.16214 15.2661 6.65553 15.4881 6.09695 15.4881C5.54134 15.4881 5.03407 15.2661 4.66599 14.9073H4.66466V14.9016C4.29757 14.5428 4.07017 14.0486 4.07017 13.5037C4.07017 12.957 4.29757 12.4597 4.66466 12.1028V12.0999H4.66599C4.93907 11.8323 5.28862 11.6415 5.67706 11.5618V10.5007C5.13006 10.4153 4.63984 10.1591 4.26513 9.7907L4.26116 9.78795C3.79278 9.32759 3.5 8.69456 3.5 7.9922C3.5 7.29179 3.79278 6.65876 4.26116 6.1984H4.26513C4.63984 5.82827 5.13006 5.57201 5.67706 5.4839V4.42744C5.28862 4.34483 4.93907 4.15418 4.66599 3.88836H4.66466V3.88545C4.29757 3.52487 4.07017 3.03131 4.07017 2.48462C4.07017 1.94068 4.29757 1.44242 4.66466 1.08363L4.66599 1.08184C5.03407 0.722079 5.54134 0.5 6.09695 0.5C6.65553 0.5 7.16214 0.722079 7.53121 1.08184V1.08363H7.53254C7.89913 1.44242 8.12604 1.94068 8.12604 2.48462C8.12604 3.03131 7.89913 3.52487 7.53254 3.88545L7.53121 3.88836C7.25763 4.15418 6.90858 4.34483 6.51915 4.42744V5.4839ZM11.7893 4.77959L11.7816 4.76825C11.652 4.5546 11.4454 4.41222 11.217 4.3505C10.9815 4.28976 10.7273 4.31551 10.5014 4.4417H10.5029C10.2774 4.56691 10.1267 4.77198 10.0636 5.00167C10.0015 5.22942 10.0287 5.48098 10.1583 5.70014L10.1626 5.70597C10.2925 5.92222 10.4991 6.06736 10.7298 6.12616C10.9616 6.18982 11.22 6.16325 11.4426 6.0361L11.4547 6.03043C11.6738 5.9023 11.8198 5.70014 11.8809 5.47807C11.9429 5.24934 11.9183 4.99876 11.7893 4.77959Z"
+        fill="#1A1919"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_8551_41">
+        <rect width="9.5" height="15" fill="white" transform="translate(3.5 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const KafkaIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/KafkaIcon/KafkaIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/LaunchIcon/LaunchIcon.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="M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z" />
+    <path d="M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z" />
+  </svg>
+);
+
+export const LaunchIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/LaunchIcon/LaunchIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;