Логотипы продуктов Контура

Используются с компонентом Logotype из пакета @skbkontur/react-ui-addons (Logotype/readme).

import { Kontur, Extern } from "@skbkontur/logos";
import { Logotype } from "@skbkontur/react-ui-addons";

<Logotype konturLogo={<Kontur />} productLogo={<Extern />} />;

Пропы

В некоторых логотипах по-умолчанию установлены фирменные цвета. Но их можно переопределить через проп color.

Размер можно изменять пропом size. Его значение будет соответствовать высоте лого. По-умолчанию для всех лого это 24px.

props: {
  color: string;
  size: number;
}

import { Kontur } from "@skbkontur/logos";

<div>
  <Kontur color="black" size={32} />
  <Kontur color="gray" size={28} />
  <Kontur color="lightgray" />
</div>;

import { WithLogoAndSize } from "../react-ui-addons/components/Logotype/__stories__/Logotype.stories";

<WithLogoAndSize />;

import { Baseline } from "./__stories__/Logos.stories";

<Baseline />;

Локализация

На данный момент локализация через LocaleContext не поддерживается и логотипы нужно менять самостоятельно.

Не все продуктовые логотипы имеют английскую или русскую версию. У английских версий в названии присутствует постфикс EN. Такие логотипы рекомендуется использовать совместно с KonturEN.

import {
  Kontur,
  KonturEN,
  SchoolAcademy,
  Focus,
  FocusEN,
  Diadoc,
  DiadocEN,
} from "@skbkontur/logos";
import { Logotype } from "@skbkontur/react-ui-addons";
import { Gapped } from "@skbkontur/react-ui";

<Gapped vertical gap={8}>
  <Gapped gap={8}>
    <Kontur />
    ➜
    <KonturEN />
  </Gapped>
  <Gapped gap={8}>
    <Focus />
    ➜
    <FocusEN />
  </Gapped>
  <Gapped gap={8}>
    <Diadoc />
    ➜
    <DiadocEN />
  </Gapped>
</Gapped>;

Полный список доступных логотипов:

import { AllLogos } from "./__stories__/AllLogos";

<AllLogos />;