2. Иконки

Пакет @central-design-system/icons помечен deprecated

🟠 DEPRECATED — пакет продолжает работать через legacy-режим, но будет удалён в будущих версиях.

Было (CDS 3):

// CDS 3
import * as legacyIcons from '@central-design-system/icons';
import { createCds } from '@central-design-system/components';

createCds({
  icons: legacyIcons
});

Стало (CDS 4):

// CDS 4
import { createCds } from '@central-design-system/components';

// Вид CDS 3 сохраняет устаревший iconpack `cds`.
createCds({
  icons: {
    defaultSet: 'cds'
  }
});

В рантайме при старом подключении в dev-консоли появится:

[CDS UPGRADE] '@central-design-system/icons' is deprecated, use 'an icon pack' instead.

(см. src/icons.ts, ветка Symbol.toStringTag === 'Module').

Действие: перейти на новые icon packs через опцию createCds({ icons }). Пока пакет подключён, иконки компонентов рисует пак cds, а компоненты Icon* остаются зарегистрированными глобально. Пакет будет удалён в 5.0.

Новая фабрика createIcons и iconpacks

✨ NEW

В CDS 4 иконки конфигурируются через явную фабрику createIcons, понимающую концепцию iconpack. Готовые наборы лежат в src/assets/icons/: phosphor (по умолчанию), lucide, materialSymbols, remix, tabler и устаревший cds. Это позволяет смешивать наборы и переопределять алиасы под продукт.

Было (CDS 3):

// CDS 3
import * as icons from '@central-design-system/icons';
import { createCds } from '@central-design-system/components';

createCds({ icons });

Стало (CDS 4):

// CDS 4
import { createCds, iconsets } from '@central-design-system/components';

createCds({
  icons: {
    defaultSet: 'remix',
    sets: { remix: iconsets.remix.icons, },
    aliases: iconsets.remix.aliases,
  }
});

Действие: ознакомиться с Icons Installation и выбрать iconpack под продукт. По умолчанию активен набор phosphor с алиасами из src/assets/icons/phosphor.ts.

Иконки отправки send-* сведены к send и send-fill

⚠️ BREAKING — send-right / send-right-fill переименованы, остальные направления удалены.

В CDS 3 (3.12.0) иконка отправки шла в четырёх направлениях, каждое в контурном и залитом варианте. Это одна и та же иконка, повёрнутая на 90°, поэтому в CDS 4 осталась одна пара: send и send-fill (самолётик смотрит вправо). Во всех iconpack'ах (phosphor, remix, lucide, tabler, materialSymbols, cds) они лежат под этими же именами.

CDS 3	CDS 4
send-right	send
send-right-fill	send-fill
send-up, send-down, send-left	— удалены
send-up-fill, send-down-fill, send-left-fill	— удалены

Было (CDS 3):

<!-- CDS 3 -->
<CdsIcon name="send-right" />
<CdsIcon name="send-up-fill" />

Стало (CDS 4):

<!-- CDS 4 -->
<CdsIcon icon="send" />
<CdsIcon icon="send-fill" />

Действие: заменить send-right → send и send-right-fill → send-fill. Остальные направления заменить на send / send-fill; если направление принципиально, повернуть иконку через CSS (transform: rotate(…)). Поиск: grep -rnE "send-(up|down|left|right)(-fill)?|IconSend(Up|Down|Left|Right)" src/.

Имена иконок по назначению, Phosphor по умолчанию

⚠️ BREAKING — компоненты рисуют новые имена, createCds() без опций рисует Phosphor; старые имена работают весь 4.x и будут удалены в 5.0.

Было (CDS 3):

<!-- CDS 3 -->
<CdsIcon name="doc" />
<CdsButton prepend-icon="plus" />

Стало (CDS 4):

<!-- CDS 4 -->
<CdsIcon name="file" />
<CdsButton prepend-icon="add" />

Устанавливать ничего не нужно: CSS иконок Phosphor входит в пакет. Иконки хранятся как data: URI, поэтому Content Security Policy должен разрешать img-src data:. При печати иконки чёрные.

Иконки крупнее прежних в той же рамке, размеры компонентов не менялись.

Имя CDS 3	Имя CDS 4
alert	warning
alert-fill	warning-fill
analog	nested
arrow-left-bottom	arrow-down-left
arrow-left-top	arrow-up-left
arrow-right-bottom	arrow-down-right
arrow-right-top	arrow-up-right
arrows-vertical	swap
card-bank	credit-card
category	tree
check-fill	success-fill
checkbox	checkbox-on
checkbox-fill	checkbox-on-fill
chocholate-menu	apps
chocolate-menu	apps
clock	time
clock-fill	time-fill
collapse	panel-left-close
comment	message
data-cards	view-rows
delimiter	dot
directory	folder
directory-open	folder-open
doc	file
doc-download	file-download
draggable	drag
enter	external-link
expand	panel-left-open
external	external-link
facebook-fill	facebook
fill	fill-color
filters	adjust
first	first-page
format	format-clear
funnel	filter
insert	paste
last	last-page
list	list-bullet
locked	lock
moon	dark-mode
next	chevron-right
overflow-menu-horizontal	more-horizontal
overflow-menu-vertical	more-vertical
password	key
plus	add
prev	chevron-left
printer	print
question	help
question-fill	help-fill
sandglass	hourglass
scale-left	maximize
scale-right	minimize
sort-date	sort
sorting	sort
sorting-down	sort-desc
sorting-up	sort-asc
source	code
sun	light-mode
tab-backward	indent-decrease
tab-forward	indent-increase
thumb-down	dislike
thumb-down-fill	dislike-fill
thumb-up	like
thumb-up-fill	like-fill
truck	delivery
unlocked	unlock
unlocked-left	unlock
user-avatar	user
visibility-on	visibility
winner	trophy
workspace	dashboard

Часть имён осталась, но сменила рисунок: предупреждения о них не будет. add теперь плюс без круга (круг — add-circle), check — галочка без круга (круг — success), error и error-fill — круг с восклицательным знаком (запрет — blocked), checkbox-on — контурный квадрат с галочкой (залитый — checkbox-on-fill).

Своя карта aliases теперь дополняет пак, а не заменяет его. Если в ней задано старое имя, например alert, компонент, запрашивающий warning, нарисует глиф пака: задайте в карте новое имя.

Действие: заменить имена по таблице, предупреждения [CDS UPGRADE] в dev-консоли покажут оставшиеся. Чтобы сохранить вид CDS 3, укажите icons: { defaultSet: 'cds' }. Этот пак устарел.

---