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

Используются с компонентом 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 />;