@skbkontur/logos 3.0.3-master-d5edad53.0 → 3.0.4

package/scripts/svg-to-tsx.mjs

@@ -0,0 +1,497 @@
+import console from "console";
+import fs from "fs";
+import path from "path";
+import process from "process";
+import { fileURLToPath } from "url";
+
+import camelCase from "camelcase";
+import { format } from "oxfmt";
+import { optimize } from "svgo";
+import "colors";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/*
+Скрипт принимает 2 параметра: `src` и `out`:
+1. `src` - папка с обновлёнными SVG-версиями логотипов;
+2. `out` - папка в которую будут сохранены конвертированные в `.tsx` логотипы. По умолчанию конвертированные логотипы сохраняются в папку `src`.
+
+В консоль будет выводиться информация с результатами конвертации: `added`, `updated` или `skipped`.
+
+Пример использования скрипта:
+yarn logos:update src=../../new-logo-dir out=src
+
+P.S.
+Путь до папок `src` и `out` резолвится относительно директории из которой запускается скрипт
+*/
+
+const ARGS = process.argv.slice(2);
+const INDEX_DIR = path.resolve(__dirname, "../");
+const SRC = path.join(process.cwd(), getArg("src", ""));
+const OUT = path.join(INDEX_DIR, getArg("out", "src"));
+const SVG_PATHS = getSVGPaths();
+const SVGO_BUILTIN_PLUGINS = [
+  "removeDoctype",
+  "removeXMLProcInst",
+  "removeComments",
+  "removeMetadata",
+  "removeEditorsNSData",
+  "cleanupAttrs",
+  "mergeStyles",
+  "inlineStyles",
+  "minifyStyles",
+  "cleanupIDs",
+  "removeUselessDefs",
+  "cleanupNumericValues",
+  "convertColors",
+  "removeUnknownsAndDefaults",
+  "removeNonInheritableGroupAttrs",
+  "removeUselessStrokeAndFill",
+  "cleanupEnableBackground",
+  "removeHiddenElems",
+  "removeEmptyText",
+  "convertShapeToPath",
+  "convertEllipseToCircle",
+  "moveElemsAttrsToGroup",
+  "moveGroupAttrsToElems",
+  "collapseGroups",
+  "convertPathData",
+  "convertTransform",
+  "removeEmptyAttrs",
+  "removeEmptyContainers",
+  "mergePaths",
+  "removeUnusedNS",
+  "sortDefsChildren",
+  "removeTitle",
+  "removeDesc",
+];
+
+/**
+ * Сложные логотипы, требующие специальной обработки
+ * @type {string[]}
+ */
+const COMPLEX_LOGOS = [
+  "Docrobot",
+  "DocrobotDark",
+  "DocrobotEN",
+  "DocrobotENDark",
+  "Moneyplace",
+  "MoneyplaceDark",
+  "Skbkontur",
+  "SkbkonturDark",
+  "SkbkonturEN",
+  "SkbkonturENDark",
+  "Staffcop",
+  "StaffcopDark",
+  "StaffcopEN",
+  "StaffcopENDark",
+
+  // Логотипы с суббрендами
+  "AktSverki",
+  "AktSverkiDark",
+  "DiadocKedo",
+  "DiadocKedoDark",
+  "DiadocLogistics",
+  "DiadocLogisticsDark",
+  "FocusPoiskKlientov",
+  "FocusPoiskKlientovDark",
+  "Medi",
+  "MediDark",
+  "Sign",
+  "SignDark",
+];
+
+/**
+ * Аттрибуты, которые следует переименовать в camelCase
+ * @type {string[]}
+ */
+const KEBAB_ATTRS = [
+  "clip-rule",
+  "fill-rule",
+  "fill-opacity",
+  "stroke-opacity",
+  "stop-color",
+  "stop-opacity",
+];
+
+/**
+ * Magic const = (5/(24/100))/100
+ * - 24px - default font-size
+ * - 5px - optima offset for 24px
+ * @type {number}
+ */
+const LOGO_BASELINE_SHIFT = 0.20833333333333337;
+/**
+ * Magic const = (1/(24/100))/100
+ * - 24px - default font-size
+ * - 1px - optima offset for 24px
+ * @type {number}
+ */
+const LOGO_LEFT_SHIFT = -0.04166666666666667;
+const KONTUR_COLOR = "#222222";
+const PRODUCT_COLOR = "#F03B36";
+
+const createdLogos = [];
+
+/**
+ * @param {string} name
+ * @param {string} defaultValue
+ * @returns {string|undefined}
+ */
+function getArg(name, defaultValue) {
+  let couple = ARGS.find((arg) => arg.includes(name));
+  if (couple) {
+    return couple.split("=")[1] || defaultValue;
+  }
+  return defaultValue;
+}
+
+function getSVGPaths() {
+  if (fs.existsSync(SRC)) {
+    return fs
+      .readdirSync(SRC)
+      .filter((s) => /.*\.svg$/.test(s))
+      .map((s) => path.resolve(SRC, s));
+  }
+  return [];
+}
+
+/**
+ * @param {string} logoName
+ * @param {string} svgData
+ * @param {string} defaultColor
+ * @param {boolean} hasSeparator
+ * @param {number} ratio
+ * @returns {string}
+ */
+function applyTemplateLogo(logoName, svgData, defaultColor, hasSeparator, ratio) {
+  const isKonturLogo = ["Kontur", "KonturEN"].includes(logoName);
+  const defaultColorDarkTheme = correctColorForDarkTheme(defaultColor);
+
+  const fill = `const fill = color ?? (useDarkThemeColors ? '${defaultColorDarkTheme}' : '${defaultColor}');`;
+  const separatorFill = hasSeparator
+    ? `const separatorFill = separatorColor ?? (useDarkThemeColors ? '#FFF' : '#222')`
+    : ``;
+
+  const width = "`${size * " + ratio + "}px`";
+  const lineHeight = "`${size}px`";
+  const marginLeft = "marginLeft: `${size * " + LOGO_LEFT_SHIFT + "}px`";
+
+  return `
+import React, {forwardRef} from 'react';
+
+export const ${logoName} = forwardRef<HTMLSpanElement, { 
+  size?: number;
+  color?: string;
+  ${hasSeparator ? `separatorColor?: string;` : ``}
+  useDarkThemeColors?: boolean;}>(
+  ({ size=24, color, ${hasSeparator ? `separatorColor,` : ``} useDarkThemeColors }, ref?) => {
+    ${fill};
+    ${separatorFill}
+    return (
+      <span
+        style={{
+          width: ${width},
+          height: size,
+          lineHeight: ${lineHeight},
+          display: 'inline-block',
+          ${isKonturLogo ? marginLeft : ""}
+        }}
+        ref={ref}
+      >
+        ${svgData}
+      </span>
+    );
+  }
+)
+
+${logoName}.displayName = '${logoName}';
+${logoName}.__KONTUR_REACT_UI__ = '${logoName}';
+${logoName}.__KONTUR_LOGO__ = true;
+
+`;
+}
+
+/**
+ * @param {string} logoName
+ * @param {string} svgData
+ * @param {number} ratio
+ * @returns {string}
+ */
+function applyTemplateComplexLogo(logoName, svgData, ratio) {
+  const width = "`${size * " + ratio + "}px`";
+  const lineHeight = "`${size}px`";
+
+  return `
+import React, {forwardRef} from 'react';
+
+/** 
+ * Это сложный логотип, и он не поддерживает кастомизацию цвета.
+ * Версии для светлой и тёмной тем разделены на два отдельных файла.
+ * 
+ * Проп \`color\` не имеет эффекта и существует для обратной совместимости.
+*/
+export const ${logoName} = forwardRef<HTMLSpanElement, { size?: number; color?: string }>(
+  ({ size=24 }, ref?) => (
+    <span
+      style={{
+        width: ${width},
+        height: size,
+        lineHeight: ${lineHeight},
+        display: 'inline-block',
+      }}
+      ref={ref}
+    >
+      ${svgData}
+    </span>
+  )
+);
+
+${logoName}.displayName = '${logoName}';
+${logoName}.__KONTUR_REACT_UI__ = '${logoName}';
+${logoName}.__KONTUR_LOGO__ = true;
+
+`;
+}
+
+/**
+ * @param {string} color
+ * @returns {string}
+ */
+function correctColorForDarkTheme(color) {
+  switch (color) {
+    case "#366AF3":
+      return "#5083FF";
+    case "#B750D1":
+      return "#BE5AD8";
+    case "#844BEC":
+      return "#9867FF";
+    case ("#222222", "#222"):
+      return "#FFF";
+    case "rgba(0, 0, 0, .88)":
+      return "rgba(255, 255, 255, .96)";
+    default:
+      return color;
+  }
+}
+
+/**
+ * @param {string} hex
+ * @returns {{r: number, g: number, b: number}}
+ */
+function hexToRgb(hex) {
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+/**
+ * @param {string} logoName
+ * @returns {string}
+ */
+function applyTemplateIndex(logoName) {
+  return `export { ${logoName} } from './src/${logoName}.js';`;
+}
+
+function updateIndexFile() {
+  const newLogos = createdLogos.map(applyTemplateIndex).join("\r\n");
+  if (newLogos.length) {
+    fs.appendFileSync(path.resolve(INDEX_DIR, "index.ts"), `${newLogos}\r\n`);
+  }
+}
+
+/**
+ * @param {string} svgData
+ * @param {boolean} isComplexLogo
+ * @param {boolean} isKonturLogo
+ * @returns {{data: string, defaultColor: string, hasSeparator: boolean, ratio: string}}
+ */
+function optimizeData(svgData, isComplexLogo, isKonturLogo) {
+  let defaultColor = isKonturLogo ? KONTUR_COLOR : PRODUCT_COLOR;
+  let hasSeparator = false;
+  let ratio = 0;
+
+  const useAlways = SVGO_BUILTIN_PLUGINS.concat([
+    {
+      name: "useAlwaysCustom",
+      type: "perItem",
+      fn: (ast) => {
+        if (ast.name === "svg") {
+          ratio = ast.attributes.width / ast.attributes.height;
+          ast.attributes[`focusable={false}`] = undefined;
+          ast.attributes[
+            `style={{
+            marginBottom: \`-\${size * ${LOGO_BASELINE_SHIFT}}px\`,
+            width: '100%',
+            height: '100%',
+            display: 'inline-block'
+          }}`
+          ] = undefined;
+          delete ast.attributes.width;
+          delete ast.attributes.height;
+          delete ast.attributes.fill;
+        }
+
+        for (const attr of KEBAB_ATTRS) {
+          if (ast.attributes[attr]) {
+            ast.attributes[camelCase(attr)] = `${ast.attributes[attr]}`;
+            delete ast.attributes[attr];
+          }
+        }
+      },
+    },
+  ]);
+
+  const useOnComplexLogosOnly = [
+    {
+      name: "useOnComplexLogosOnly",
+      type: "perItem",
+      fn: (ast) => {
+        if (ast.name === "g") {
+          delete ast.attributes["clip-path"];
+        }
+        // Кейс с новым дизайном логотипов суббрендов
+        if (ast.name === "rect" && ast.attributes["strokeOpacity"]) {
+          ast.attributes.fill = "none";
+        }
+      },
+    },
+  ];
+
+  const useOnNormalLogosOnly = [
+    {
+      name: "useOnNormalLogosOnly",
+      type: "perItem",
+      fn: (ast) => {
+        if (ast.name === "path") {
+          if (ast.attributes.fill != null) {
+            if (ast.attributes["fillOpacity"]) {
+              // Переход на прозрачность в цветах;
+              var rgb = hexToRgb(ast.attributes.fill);
+              defaultColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${ast.attributes["fillOpacity"]})`;
+              delete ast.attributes["fillOpacity"];
+            } else {
+              defaultColor = ast.attributes.fill;
+            }
+          }
+          ast.attributes[`fill={fill}`] = undefined;
+        }
+        if (ast.name === "circle" && ast.attributes.cy === "13.5" && ast.attributes.r === "1.5") {
+          hasSeparator = true;
+          ast.attributes[`fill={separatorFill}`] = undefined;
+        }
+        delete ast.attributes.fill;
+      },
+    },
+  ];
+
+  const plugins = isComplexLogo
+    ? useAlways.concat(useOnComplexLogosOnly)
+    : useAlways.concat(useOnNormalLogosOnly);
+  const { data } = optimize(svgData, { plugins });
+
+  return {
+    data,
+    defaultColor,
+    hasSeparator,
+    ratio,
+  };
+}
+
+/**
+ * @param {string} src
+ * @returns {string}
+ */
+function srcToName(src) {
+  let logoName = path.basename(src, path.extname(src));
+  logoName = camelCase(logoName, { pascalCase: true, preserveConsecutiveUppercase: true });
+  logoName = logoName.replace(/logo|24/gi, "").replace("En", "EN");
+  return logoName;
+}
+
+/**
+ * @param {string} logoName
+ * @param {string} status added|updated|skipped
+ */
+function logStatus(logoName, status) {
+  switch (status) {
+    case "added":
+      console.log(logoName, status.bgGreen);
+      break;
+    case "updated":
+      console.log(logoName, status.bgBlue);
+      break;
+    case "skipped":
+      console.log(logoName, status.bgYellow);
+      break;
+  }
+}
+
+/**
+ * @param {string} logoName
+ * @param {string} data
+ * @returns {string} added|updated|skipped
+ */
+function saveFileLogo(logoName, data) {
+  const logoSrc = path.resolve(OUT, `${logoName}.tsx`);
+  const logoExists = fs.existsSync(logoSrc);
+  let status = "added";
+  if (logoExists) {
+    status = "updated";
+    const logoData = fs.readFileSync(logoSrc, { encoding: "utf8" });
+    if (logoData === data) {
+      status = "skipped";
+    }
+  }
+  fs.writeFileSync(logoSrc, data, { encoding: "utf8" });
+
+  return status;
+}
+
+/**
+ * @param {string} svgSrc
+ */
+async function convert(svgSrc) {
+  const logoName = srcToName(svgSrc);
+  const isComplexLogo = COMPLEX_LOGOS.includes(logoName);
+  const isKonturLogo = ["Kontur", "KonturEN"].includes(logoName);
+
+  const svgData = fs.readFileSync(svgSrc, { encoding: "utf8" });
+  const { data, defaultColor, hasSeparator, ratio } = optimizeData(
+    svgData,
+    isComplexLogo,
+    isKonturLogo,
+  );
+  const withTemplate = isComplexLogo
+    ? applyTemplateComplexLogo(logoName, data, ratio)
+    : applyTemplateLogo(logoName, data, defaultColor, hasSeparator, ratio);
+  const { code: prettyData, errors } = await format(`${logoName}.tsx`, withTemplate, {
+    singleQuote: true,
+    printWidth: 120,
+    trailingComma: "es5",
+  });
+  if (errors?.length) {
+    throw new Error(errors.map((e) => e.message).join("\n"));
+  }
+
+  const status = saveFileLogo(logoName, prettyData);
+  if (status === "added") {
+    createdLogos.push(logoName);
+  }
+  logStatus(logoName, status);
+}
+
+for (const svgSrc of SVG_PATHS) {
+  await convert(svgSrc);
+}
+updateIndexFile();

package/src/Access.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from "react";
+
+export const Access = forwardRef<
+  HTMLSpanElement,
+  { size?: number; color?: string; useDarkThemeColors?: boolean }
+>(({ size = 24, color, useDarkThemeColors }, ref?) => {
+  const fill = color ?? (useDarkThemeColors ? "#9867FF" : "#844BEC");
+
+  return (
+    <span
+      style={{
+        width: `${size * 2.8333333333333335}px`,
+        height: size,
+        lineHeight: `${size}px`,
+        display: "inline-block",
+      }}
+      ref={ref}
+    >
+      <svg
+        viewBox="0 0 68 24"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        style={{
+          marginBottom: `-${size * 0.20833333333333337}px`,
+          width: "100%",
+          height: "100%",
+          display: "inline-block",
+        }}
+      >
+        <path
+          d="M3.188 10.17a49.501 49.501 0 0 1-.139 2.732c-.198 1.953-.706 3.478-1.524 4.573H.356v4.455h1.782V19h10.574v2.93h1.762v-4.455H12.79V4.942H3.227l-.04 5.227zm.218 7.305c.475-.726.831-1.663 1.069-2.811.25-1.149.383-2.594.396-4.336l.04-3.861h6.058v11.008H3.406zM26.29 13.931c0-1.016-.218-1.92-.654-2.712a4.711 4.711 0 0 0-1.861-1.842c-.792-.435-1.697-.653-2.713-.653-1.03 0-1.94.218-2.732.653a4.849 4.849 0 0 0-1.861 1.861c-.436.78-.654 1.677-.654 2.693v.08c0 1.055.225 1.973.673 2.752a4.711 4.711 0 0 0 1.842 1.86c.792.436 1.703.654 2.732.654 1.03 0 1.934-.224 2.713-.673a4.58 4.58 0 0 0 1.841-1.841c.449-.806.673-1.723.673-2.753v-.079zm-8.732 0c0-.739.151-1.399.455-1.98.303-.58.72-1.023 1.247-1.326.528-.317 1.129-.476 1.802-.476.686 0 1.294.159 1.822.476.54.316.95.759 1.227 1.326.29.568.436 1.228.436 1.98v.08c0 .752-.139 1.418-.416 2-.29.593-.7 1.049-1.227 1.365-.529.317-1.142.476-1.842.476-.686 0-1.3-.159-1.841-.476a3.197 3.197 0 0 1-1.228-1.346c-.29-.594-.435-1.267-.435-2.02v-.079zM32.902 19.277c.95 0 1.762-.165 2.435-.495.687-.33 1.32-.871 1.901-1.623l-1.109-.931c-.343.396-.686.72-1.03.97-.62.423-1.352.634-2.197.634-.713 0-1.333-.165-1.861-.495a3.483 3.483 0 0 1-1.208-1.307 4.06 4.06 0 0 1-.416-1.841v-.238c0-.686.139-1.327.416-1.92.58-1.255 1.59-1.882 3.03-1.882.686 0 1.273.113 1.761.337.489.211.964.587 1.426 1.129l1.07-1.05c-.542-.66-1.15-1.128-1.822-1.406-.66-.29-1.466-.435-2.416-.435-1.003 0-1.9.218-2.693.653a4.548 4.548 0 0 0-1.861 1.842c-.436.792-.653 1.702-.653 2.732v.238c0 .99.217 1.874.653 2.653a4.651 4.651 0 0 0 1.841 1.802c.806.422 1.716.633 2.733.633zM46.767 9.001h-8.712v1.386h3.504V19h1.703v-8.613h3.505V9.001zM53.75 12.506l-.812 2.455-.178.495c-.04.132-.191.58-.455 1.346l-.178.574-.733-2.336a202.509 202.509 0 0 0-.871-2.534L49.315 9h-1.802l3.802 10.633c-.251.726-.588 1.181-1.01 1.366-.25.105-.535.158-.851.158h-1.03l.515 1.406h.752c.62 0 1.116-.106 1.485-.317.37-.198.693-.528.97-.99.278-.462.575-1.142.891-2.04l3.644-10.216h-1.723l-1.208 3.505zM59.802 19v-8.613h4.89V19h1.703V9.001H58.1V19h1.703z"
+          fill={fill}
+        />
+      </svg>
+    </span>
+  );
+});
+
+Access.displayName = "Access";
+Access.__KONTUR_REACT_UI__ = "Access";
+Access.__KONTUR_LOGO__ = true;

package/src/Accounting.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+
+export const Accounting = forwardRef<
+  HTMLSpanElement,
+  {
+    size?: number;
+    color?: string;
+
+    useDarkThemeColors?: boolean;
+  }
+>(({ size = 24, color, useDarkThemeColors }, ref?) => {
+  const fill = color ?? (useDarkThemeColors ? "#FFF" : "#222");
+
+  return (
+    <span
+      style={{
+        width: `${size * 4.541666666666667}px`,
+        height: size,
+        lineHeight: `${size}px`,
+        display: "inline-block",
+      }}
+      ref={ref}
+    >
+      <svg
+        viewBox="0 0 109 24"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        style={{
+          marginBottom: `-${size * 0.20833333333333337}px`,
+          width: "100%",
+          height: "100%",
+          display: "inline-block",
+        }}
+      >
+        <path
+          d="M6.673 16.505c-.278.607-.555 1.083-.832 1.426-.594.713-1.4 1.069-2.416 1.069h-.89l-.674-1.544h1.446c.435 0 .805-.113 1.108-.337.304-.238.568-.614.792-1.129l.06-.138L.198 4.942h1.881l4.079 8.99 3.96-8.99H11.9L6.673 16.505zm11.887-2.93V9h1.683V19H18.56v-4.02c-.805.317-1.716.476-2.733.476-1.267 0-2.19-.27-2.772-.812-.58-.554-.87-1.426-.87-2.614V9.001h1.702v3.05c0 .699.165 1.207.495 1.524.343.317.898.475 1.663.475.95 0 1.789-.158 2.515-.475zm12.55 2.633 1.01 1.05c-.7.726-1.4 1.247-2.1 1.564-.699.303-1.517.455-2.454.455-1.056 0-1.98-.211-2.772-.633a4.582 4.582 0 0 1-1.822-1.862c-.436-.792-.654-1.716-.654-2.772 0-1.003.218-1.907.654-2.712a4.723 4.723 0 0 1 1.802-1.901c.765-.449 1.663-.673 2.692-.673 1.453 0 2.581.429 3.386 1.287.819.858 1.228 2.04 1.228 3.544l-.04.733h-7.96c.146 1.478.714 2.514 1.704 3.108.527.304 1.148.456 1.86.456.687 0 1.294-.126 1.822-.377.541-.25 1.09-.673 1.644-1.267zm-6.97-3.168h6.316c-.04-.91-.33-1.63-.87-2.158-.529-.541-1.242-.812-2.14-.812-.884 0-1.623.27-2.217.812-.594.528-.957 1.247-1.089 2.158zm17.29-4.039v1.386h-3.505V19h-1.702v-8.613h-3.505V9.001h8.712zm9.584 10.276c-1.016 0-1.927-.211-2.732-.633a4.651 4.651 0 0 1-1.842-1.802c-.435-.779-.653-1.663-.653-2.653v-.238c0-1.03.218-1.94.653-2.732a4.548 4.548 0 0 1 1.861-1.842c.792-.435 1.69-.653 2.693-.653.95 0 1.756.145 2.416.435.673.278 1.28.746 1.822 1.406l-1.07 1.05c-.462-.542-.937-.918-1.425-1.129-.489-.224-1.076-.337-1.763-.337-1.438 0-2.448.627-3.029 1.881a4.485 4.485 0 0 0-.416 1.921v.238c0 .673.139 1.287.416 1.841.29.541.693.977 1.208 1.307.528.33 1.148.495 1.861.495.845 0 1.578-.211 2.198-.634.343-.25.686-.574 1.03-.97l1.108.93c-.58.753-1.214 1.294-1.9 1.624-.674.33-1.486.495-2.436.495zm11.964-5.702V9h1.683V19h-1.683v-4.02c-.805.317-1.716.476-2.732.476-1.267 0-2.191-.27-2.772-.812-.581-.554-.871-1.426-.871-2.614V9.001h1.702v3.05c0 .699.165 1.207.495 1.524.344.317.898.475 1.664.475.95 0 1.788-.158 2.514-.475zm12.55 2.633 1.01 1.05c-.7.726-1.4 1.247-2.099 1.564-.7.303-1.518.455-2.455.455-1.056 0-1.98-.211-2.772-.633a4.582 4.582 0 0 1-1.822-1.862c-.435-.792-.653-1.716-.653-2.772 0-1.003.218-1.907.653-2.712a4.723 4.723 0 0 1 1.802-1.901c.766-.449 1.663-.673 2.693-.673 1.452 0 2.58.429 3.386 1.287.818.858 1.227 2.04 1.227 3.544l-.04.733H68.5c.145 1.478.713 2.514 1.703 3.108.528.304 1.148.456 1.861.456.687 0 1.294-.126 1.822-.377.541-.25 1.089-.673 1.643-1.267zm-6.97-3.168h6.317c-.04-.91-.33-1.63-.871-2.158-.528-.541-1.241-.812-2.139-.812-.884 0-1.623.27-2.217.812-.594.528-.957 1.247-1.09 2.158zm17.29-4.039v1.386h-3.504V19H80.64v-8.613h-3.505V9.001h8.713zm11.093 4.93v.08c0 1.029-.224 1.946-.673 2.752a4.58 4.58 0 0 1-1.841 1.841c-.78.449-1.683.673-2.713.673s-1.94-.218-2.732-.653a4.711 4.711 0 0 1-1.842-1.861c-.448-.78-.673-1.697-.673-2.753v-.079c0-1.016.218-1.914.654-2.693a4.85 4.85 0 0 1 1.86-1.86c.793-.436 1.704-.654 2.733-.654 1.017 0 1.92.218 2.713.653a4.711 4.711 0 0 1 1.86 1.842c.436.792.654 1.696.654 2.712zm-8.731 0v.08c0 .752.145 1.425.435 2.019.29.58.7 1.03 1.228 1.346.54.317 1.155.476 1.841.476.7 0 1.314-.159 1.841-.476a3.173 3.173 0 0 0 1.228-1.366c.277-.58.416-1.247.416-2v-.079c0-.752-.145-1.412-.436-1.98a3.059 3.059 0 0 0-1.227-1.326c-.528-.317-1.136-.476-1.822-.476-.673 0-1.274.159-1.802.476a3.193 3.193 0 0 0-1.247 1.326c-.304.581-.456 1.241-.456 1.98zm19.244 2.277c0 .845-.297 1.525-.891 2.04-.594.501-1.406.752-2.435.752H98.94V9.001h4.95c.964 0 1.743.238 2.337.713.607.462.91 1.082.91 1.861 0 .58-.151 1.063-.455 1.445-.29.383-.7.654-1.228.812.621.145 1.109.43 1.466.852.356.409.534.917.534 1.524zm-3.821-5.88h-3.01v2.93h3.01c.594 0 1.043-.125 1.346-.376.317-.264.475-.634.475-1.109 0-.462-.158-.818-.475-1.07-.303-.25-.752-.375-1.346-.375zm2.099 5.742c0-.489-.179-.865-.535-1.129-.343-.277-.845-.416-1.505-.416h-3.069v3.129h3.069c.673 0 1.182-.132 1.525-.396.343-.278.515-.674.515-1.188z"
+          fill={fill}
+        />
+      </svg>
+    </span>
+  );
+});
+
+Accounting.displayName = "Accounting";
+Accounting.__KONTUR_REACT_UI__ = "Accounting";
+Accounting.__KONTUR_LOGO__ = true;

package/src/Adaptation.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+
+export const Adaptation = forwardRef<
+  HTMLSpanElement,
+  {
+    size?: number;
+    color?: string;
+
+    useDarkThemeColors?: boolean;
+  }
+>(({ size = 24, color, useDarkThemeColors }, ref?) => {
+  const fill = color ?? (useDarkThemeColors ? "#FE4C4C" : "#FE4C4C");
+
+  return (
+    <span
+      style={{
+        width: `${size * 4.166666666666667}px`,
+        height: size,
+        lineHeight: `${size}px`,
+        display: "inline-block",
+      }}
+      ref={ref}
+    >
+      <svg
+        viewBox="0 0 100 24"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        style={{
+          marginBottom: `-${size * 0.20833333333333337}px`,
+          width: "100%",
+          height: "100%",
+          display: "inline-block",
+        }}
+      >
+        <path
+          d="m4.534 12.03-.653 1.881h5.267l-.673-1.9-1.228-3.505-.178-.475-.574-1.723c-.225.779-.878 2.686-1.96 5.722zM12.831 19H10.95l-1.287-3.584H3.346L2.08 19H.238L5.326 4.942h2.396L12.831 19zM15.27 21.475h-1.624v-3.861h.93c.37-.396.647-.983.832-1.762.198-.779.31-1.828.337-3.148L15.785 9h7.523v8.613h1.466v3.861H23.13V19h-7.86v2.475zm1.03-3.861h5.306v-7.227h-4.297l-.04 2.416c-.013 1.254-.099 2.27-.257 3.049-.159.779-.396 1.366-.713 1.762zM34.569 12.169V19h-1.545v-1.346A3.583 3.583 0 0 1 31.6 18.88c-.594.277-1.28.416-2.06.416-1.108 0-1.98-.25-2.613-.752-.62-.502-.93-1.208-.93-2.119v-.099c0-1.003.35-1.762 1.049-2.277.712-.528 1.808-.832 3.286-.91l2.614-.179v-.673c0-.713-.205-1.248-.614-1.604-.409-.37-1.003-.554-1.782-.554-.646 0-1.234.132-1.762.396-.515.25-1.043.673-1.584 1.267l-1.089-.99c1.148-1.386 2.614-2.08 4.396-2.08 1.28 0 2.277.304 2.99.912.712.607 1.069 1.452 1.069 2.534zm-1.624 3.128v-1.069l-2.495.119c-1.03.053-1.755.224-2.178.515-.422.29-.633.752-.633 1.386v.099c0 .515.191.91.574 1.188.396.277.95.416 1.663.416.568 0 1.09-.113 1.564-.337a2.61 2.61 0 0 0 1.11-.95c.263-.41.395-.865.395-1.367zM38.89 19h-1.702V9.001h8.296V19H43.78v-8.613h-4.89V19zM55.917 9.001v1.386h-3.504V19H50.71v-8.613h-3.505V9.001h8.712zM65.443 12.169V19h-1.545v-1.346a3.583 3.583 0 0 1-1.425 1.227c-.594.277-1.28.416-2.06.416-1.108 0-1.98-.25-2.613-.752-.62-.502-.93-1.208-.93-2.119v-.099c0-1.003.35-1.762 1.049-2.277.713-.528 1.808-.832 3.287-.91l2.613-.179v-.673c0-.713-.205-1.248-.614-1.604-.409-.37-1.003-.554-1.782-.554-.647 0-1.234.132-1.762.396-.515.25-1.043.673-1.584 1.267l-1.089-.99c1.148-1.386 2.614-2.08 4.396-2.08 1.28 0 2.277.304 2.99.912.712.607 1.069 1.452 1.069 2.534zm-1.624 3.128v-1.069l-2.495.119c-1.03.053-1.755.224-2.178.515-.422.29-.633.752-.633 1.386v.099c0 .515.191.91.574 1.188.396.277.95.416 1.663.416.568 0 1.09-.113 1.564-.337a2.61 2.61 0 0 0 1.11-.95c.263-.41.395-.865.395-1.367zM77.863 21.475h-1.624V19h-8.177V9.001h1.703v8.613h4.95V9.001h1.683v8.613h1.465v3.861zM83.546 13.654l3.129-4.653h1.841V19h-1.623v-3.98c0-1.993.026-3.405.079-4.237-.317.554-.779 1.28-1.386 2.178l-1.09 1.604L81.587 19h-1.821V9.001h1.603v4.574c0 .91-.006 1.452-.02 1.623l-.039 1.98a66.755 66.755 0 0 1 2.237-3.524zM94.384 9.001h4.455V19h-1.643v-3.505h-2.218L92.246 19h-1.92l2.95-3.703c-.819-.237-1.44-.613-1.862-1.128-.409-.528-.614-1.175-.614-1.94 0-.977.324-1.756.97-2.337.66-.594 1.532-.891 2.614-.891zm.218 5.128h2.594v-3.742h-2.594c-.673 0-1.201.165-1.584.495-.37.33-.554.785-.554 1.366 0 .581.184 1.043.554 1.386.383.33.91.495 1.584.495z"
+          fill={fill}
+        />
+      </svg>
+    </span>
+  );
+});
+
+Adaptation.displayName = "Adaptation";
+Adaptation.__KONTUR_REACT_UI__ = "Adaptation";
+Adaptation.__KONTUR_LOGO__ = true;

package/src/Admin.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+
+export const Admin = forwardRef<
+  HTMLSpanElement,
+  {
+    size?: number;
+    color?: string;
+
+    useDarkThemeColors?: boolean;
+  }
+>(({ size = 24, color, useDarkThemeColors }, ref?) => {
+  const fill = color ?? (useDarkThemeColors ? "#9867FF" : "#844BEC");
+
+  return (
+    <span
+      style={{
+        width: `${size * 2.5833333333333335}px`,
+        height: size,
+        lineHeight: `${size}px`,
+        display: "inline-block",
+      }}
+      ref={ref}
+    >
+      <svg
+        viewBox="0 0 62 24"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        style={{
+          marginBottom: `-${size * 0.20833333333333337}px`,
+          width: "100%",
+          height: "100%",
+          display: "inline-block",
+        }}
+      >
+        <path
+          d="m4.534 12.03-.653 1.881h5.267l-.673-1.9-1.228-3.505-.178-.475-.574-1.723c-.225.779-.878 2.686-1.96 5.722zM12.831 19H10.95l-1.287-3.584H3.346L2.08 19H.238L5.326 4.942h2.396L12.831 19zM15.27 21.475h-1.624v-3.861h.93c.37-.396.647-.983.832-1.762.198-.779.31-1.828.337-3.148L15.785 9h7.523v8.613h1.466v3.861H23.13V19h-7.86v2.475zm1.03-3.861h5.306v-7.227h-4.297l-.04 2.416c-.013 1.254-.099 2.27-.257 3.049-.159.779-.396 1.366-.713 1.762zM32.288 17.08 35.397 9h2.534V19h-1.584v-8.494L33.06 19h-1.544l-3.287-8.474V19h-1.584V9.001h2.515l3.128 8.078zM44.411 13.654l3.129-4.653h1.841V19h-1.623v-3.98c0-1.993.026-3.405.079-4.237-.317.554-.78 1.28-1.386 2.178l-1.09 1.604L42.452 19H40.63V9.001h1.604v4.574c0 .91-.006 1.452-.02 1.623l-.04 1.98a66.755 66.755 0 0 1 2.238-3.524zM60.496 9.001V19h-1.703v-4.435h-5.01V19h-1.702V9.001h1.703v4.178h5.01V9h1.702z"
+          fill={fill}
+        />
+      </svg>
+    </span>
+  );
+});
+
+Admin.displayName = "Admin";
+Admin.__KONTUR_REACT_UI__ = "Admin";
+Admin.__KONTUR_LOGO__ = true;