PlatformLogo
Иконка платформы (Figma platformSelectorIcons). Используется в PlatformSelector и пунктах Droplist. При avatarName рендерится Avatar с инициалами вместо SVG-варианта — для mobile project selector.
Демо
Prop
Type
Value
avatarNametext
classNametext
compactboolean
data-test-idtext
variantevolution | advanced | vmware | partner | marketplace
Code
<PlatformLogo compact={false} variant="evolution" />Когда использовать
- Нужна иконка платформы в селекторе или списке.
- Для пунктов Droplist —
compact(24×24 без padding).
Анатомия
Variant (default evolution)
evolution/advanced/vmware— SVG на accent-бейдже.partner/marketplace—@cloud-ru/ds-avatarsquared («ПК» / «МА»).
Compact (default false)
false— бейдж 32×32 для trigger.true— 24×24 для listItem (padding 0, Avatar sizes).
AvatarName
Опциональная строка для Avatar в trigger. При наличии перекрывает variant-иконку: рендерится squared Avatar с двумя символами из имени (например «Название проекта 1» → «НА»).
Используется вместе с PlatformSelector.avatarName в mobile leftTop MainMenu (селектор проекта).
Локализованные имена для partner / marketplace без avatarName берутся из headerLegacyLocale (platformLogo.avatarName.*).
Установка
pnpm add @cloud-ru/ds-uikit-product-header-legacyimport { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy'Примеры использования
Варианты
PC
MA
tsx
import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';
export function Variants() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
{Object.values(VARIANT).map(variant => (
<PlatformLogo key={variant} variant={variant} />
))}
</div>
);
}Compact
PC
tsx
import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';
export function Compact() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<PlatformLogo variant={VARIANT.Evolution} compact />
<PlatformLogo variant={VARIANT.Partner} compact />
</div>
);
}Avatar-варианты
PC
MA
tsx
import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy';
export function AvatarVariants() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<PlatformLogo variant={VARIANT.Partner} />
<PlatformLogo variant={VARIANT.Marketplace} />
</div>
);
}avatarName
Н1
SE
tsx
import { PlatformLogo } from '@cloud-ru/ds-uikit-product-header-legacy';
export function AvatarName() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<PlatformLogo avatarName='Название проекта 1' />
<PlatformLogo avatarName='Staging environment' compact />
</div>
);
}Props
Types
Props
PlatformLogoProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
avatarName | string | — | no | Имя для Avatar в trigger (Figma mobile project selector). При наличии рендерится Avatar вместо SVG-иконки платформы. |
className | string | — | no | CSS-класс корневого элемента. |
compact | boolean | false | no | Компактный размер для пунктов Droplist (Figma listItem icon без padding, 24×24). |
data-test-id | string | — | no | |
variant | "advanced" | "evolution" | "marketplace" | "partner" | "vmware" | evolution | no | Вариант платформы (Figma `platformSelectorIcons` / variant). |