Обзор
Импортируйте именованные иконки изtwenty-ui/icon. Используйте окружающий элемент управления или видимый текст, чтобы передать смысл. Декоративные иконки должны быть скрыты от вспомогательных технологий.
Поддерживаемые свойства
Иконки Tabler принимаютsize (число или длина CSS), stroke (ширина обводки), color, а также нативные атрибуты SVG и refs. Пользовательские иконки бренда и иллюстраций принимают только свойства, перечисленные в сгенерированном каталоге ниже. Их размеры по умолчанию различаются; передавайте size для единообразного результата. Цвета бренда могут быть зафиксированы в графике, поэтому переопределение цвета доступно только там, где оно указано.
Для пользовательских иконок, не принимающих атрибуты доступности, нужна обёртка с подходящей меткой или aria-hidden. className и style также доступны только там, где они указаны. По возможности импортируйте конкретную иконку, чтобы избежать загрузки динамического каталога.
Экспортированные значки сохраняют заданную ширину в flex-макетах, в том числе внутри кнопок. Разрешите соседнему тексту обрезаться или родительскому элементу переносить содержимое или прокручиваться при ограниченном пространстве. Если значок поддерживает className или style, вы можете явно переопределить flex-shrink для макета, которому это необходимо. Контейнеры иллюстраций также сохраняют свою ширину.
Динамические имена иконок
ИспользуйтеIconsProvider и Icon, когда имена выбираются во время выполнения. Провайдер асинхронно загружает полную карту иконок; сборки без разделения кода, например фронтенд-компоненты, включают всю карту. До завершения загрузки и для неизвестных имён Icon отображает Icon123. Динамическая карта отличается от каталога именованных экспортов; не предполагается, что каждый экспорт бренда или иллюстрации можно разрешить по имени.
useIcons() предоставляет getIcon(name, customDefaultIcon) и getIcons() внутри того же провайдера. getIcons() изначально возвращает пустую карту. getIcon использует именованный резервный вариант, если он существует, затем Icon123. Провайдер принимает один дочерний элемент; для нескольких дочерних элементов используйте фрагмент.
Свойства Icon
Hides a decorative icon from assistive technology.
string
Class forwarded to the resolved icon.
string
Color forwarded to the resolved icon.
string
обязательно
Icon name resolved through IconsProvider. Unknown names fall back to Icon123.
string | number
Width and height forwarded to the resolved icon.
string | number
Stroke width forwarded to the resolved icon.
CSSProperties
Styles forwarded to the resolved icon.
Свойства IconsProvider
Element
обязательно
One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously.
Обёртка иллюстрации
IllustrationIconWrapper предоставляет стили контейнера иллюстрации и перенаправляет нативные атрибуты div, дочерние элементы, стили и refs. Каждый экспорт IllustrationIcon* уже рендерится внутри неё, поэтому используйте обёртку только для оформления собственного содержимого иллюстрации.
ReactNode
Illustration content to center inside the wrapper.
string
Class merged with the illustration wrapper styling.
Анимированная иконка загрузчика
ThinkingOrbitLoaderIcon непрерывно анимируется, пока смонтирована. Она декоративна и всегда скрыта от вспомогательных технологий. Показывайте текст загрузки отдельно и монтируйте или удаляйте иконку в соответствии с состоянием приложения.
string
Class applied to the SVG. The icon is always hidden from assistive technology.
string | number
по умолчанию:"14"
Width and height in pixels.
Каталог именованных иконок
Этот каталог создаётся на основе публичных экспортовtwenty-ui/icon и группирует иконки по принимаемым ими свойствам.
SVG icons
Supported props:color, size, stroke, title. Native SVG attributes and refs are also accepted.
Icon123IconAdjustmentsIconAlertCircleIconAlertTriangleIconAlignBoxLeftTopIconAlignCenterIconAlignLeftIconAlignRightIconApiIconAppWindowIconAppsIconArchiveIconArchiveOffIconArrowBackUpIconArrowBarToDownIconArrowBarToDownDashedIconArrowDownIconArrowLeftIconArrowMergeIconArrowRightIconArrowUpIconArrowUpRightIconArrowsDiagonalIconArrowsSortIconArrowsSplit2IconArrowsVerticalIconAtIconAxisXIconAxisYIconBadge2kIconBaselineDensitySmallIconBellIconBellOffIconBlockquoteIconBoldIconBoltIconBookIconBook2IconBookmarkIconBookmarkPlusIconBoxIconBoxMultipleIconBracketsIconBracketsAngleIconBracketsContainIconBrainIconBrandDaysCounterIconBrandDockerIconBrandGithubIconBrandGoogleIconBrandGraphqlIconBrandLinkedinIconBrandNpmIconBrandOpenaiIconBrandTypescriptIconBrandWhatsappIconBrandXIconBriefcaseIconBroadcastIconBrowserMaximizeIconBuildingSkyscraperIconCalendarIconCalendarDueIconCalendarEventIconCalendarMonthIconCalendarRepeatIconCalendarTimeIconCalendarWeekIconCalendarXIconCancelIconCaretLeftIconCaretRightIconChartBarIconChartBarPopularIconChartCandleIconChartDots3IconChartLineIconChartPieIconCheckIconCheckboxIconChevronDownIconChevronLeftIconChevronRightIconChevronRightPipeIconChevronUpIconChevronsRightIconCircleIconCircleDashedIconCircleDotIconCircleOffIconCirclePlusIconCircleXIconClickIconClockIconClockHour8IconClockPlayIconClockShareIconCodeIconCodeCircleIconCoinsIconColorSwatchIconColumnInsertLeftIconColumnInsertRightIconColumnsIconCommandIconCommentIconCompassIconCopyIconCopyPlusIconCornerDownRightIconCpuIconCreativeCommonsSaIconCreditCardIconCsvIconCubeIconCurrencyAfghaniIconCurrencyBahrainiIconCurrencyBahtIconCurrencyDinarIconCurrencyDirhamIconCurrencyDollarIconCurrencyDollarAustralianIconCurrencyDollarBruneiIconCurrencyDollarCanadianIconCurrencyDollarGuyaneseIconCurrencyDollarSingaporeIconCurrencyDongIconCurrencyDramIconCurrencyEuroIconCurrencyFlorinIconCurrencyForintIconCurrencyFrankIconCurrencyGuaraniIconCurrencyHryvniaIconCurrencyIranianRialIconCurrencyKipIconCurrencyKroneCzechIconCurrencyKroneDanishIconCurrencyKroneSwedishIconCurrencyLariIconCurrencyLeuIconCurrencyLiraIconCurrencyLydIconCurrencyManatIconCurrencyNairaIconCurrencyPaangaIconCurrencyPesoIconCurrencyPoundIconCurrencyQuetzalIconCurrencyRealIconCurrencyRenminbiIconCurrencyRiyalIconCurrencyRubelIconCurrencyRufiyaaIconCurrencyRupeeIconCurrencyRupeeNepaleseIconCurrencyShekelIconCurrencySomIconCurrencyTakaIconCurrencyTengeIconCurrencyTugrikIconCurrencyWonIconCurrencyYenIconCurrencyYuanIconCurrencyZlotyIconDatabaseIconDatabaseExportIconDecimalIconDeviceDesktopIconDeviceFloppyIconDoorEnterIconDotsVerticalIconDownloadIconEditIconEditCircleIconEraserIconExclamationCircleIconExternalLinkIconEyeIconEyeOffIconEyeShareIconEyeXIconFileIconFileCheckIconFileExportIconFileImportIconFileInfoIconFilePencilIconFileTextIconFileUploadIconFileZipIconFilesIconFilterIconFilterCogIconFilterOffIconFilterPlusIconFilterXIconFiltersIconFlagIconFlaskIconFocusCenteredIconFolderIconFolderOpenIconFolderPlusIconFolderRootIconFolderSymlinkIconForbidIconFormsIconFrameIconFunctionIconGaugeIconGitBranchIconGitBranchDeletedIconGitCommitIconGizmoIconGraphIconGripHorizontalIconGripVerticalIconH1IconH2IconH3IconH4IconH5IconH6IconHandClickIconHandMoveIconHashIconHeadphonesIconHeartIconHeartOffIconHeartRateMonitorIconHelpIconHelpCircleIconHierarchyIconHierarchy2IconHistoryIconHistoryToggleIconHomeIconHourglassHighIconHours24IconHttpDeleteIconHttpGetIconHttpPatchIconHttpPostIconHttpPutIconIdIconInboxIconInfoCircleIconInfoSquareRoundedIconItalicIconJetpackIconJsonIconKeyIconLanguageIconLayersLinkedIconLayoutIconLayoutDashboardIconLayoutGridIconLayoutGridAddIconLayoutKanbanIconLayoutListIconLayoutNavbarIconLayoutSidebarIconLayoutSidebarLeftCollapseIconLayoutSidebarLeftExpandIconLayoutSidebarRightIconLayoutSidebarRightCollapseIconLayoutSidebarRightExpandIconLegoIconLetterKIconLibraryPlusIconLifebuoyIconLinkIconLinkOffIconLinkPlusIconListIconListCheckIconListDetailsIconListNumbersIconListSearchIconLoaderIconLockIconLockOpenIconLogin2IconLogoutIconMailIconMailCogIconMailXIconMapIconMathMaxIconMathMinIconMathXyIconMaximizeIconMessageIconMessageCircleIconMessageCirclePlusIconMicrophoneIconMinimizeIconMinusIconMoneybagIconMoodPlusIconMoodSmileIconMoonIconMouse2IconNewSectionIconNorthStarIconNoteOffIconNotesIconNumberIconNumber123IconNumber9IconNumbersIconPaintIconPaperclipIconPasswordIconPencilIconPencilOffIconPercentageIconPerspectiveIconPhoneIconPhotoIconPhotoUpIconPilcrowIconPinIconPinnedIconPinnedOffIconPlayerPauseIconPlayerPlayIconPlayerStopIconPlaylistAddIconPlaystationSquareIconPlugIconPlusIconPointIconPowerIconPresentationIconPrinterIconProgressCheckIconPromptIconPuzzleIconPuzzle2IconQuestionMarkIconRadiusBottomLeftIconRadiusBottomRightIconRadiusTopLeftIconRadiusTopRightIconRefreshIconRefreshAlertIconRefreshDotIconRelationManyToManyIconRelationOneToManyIconRelationOneToOneIconReloadIconReorderIconRepeatIconRestoreIconRobotIconRocketIconRotateIconRotate2IconRowInsertBottomIconRowInsertTopIconSearchIconSendIconServerIconServer2IconSettingsIconSettings2IconSettingsAutomationIconSettingsBoltIconShareIconShare2IconShieldIconShoppingBagIconSitemapIconSlashIconSortAZIconSortAscendingIconSortAscendingLettersIconSortAscendingNumbersIconSortDescendingIconSortDescendingLettersIconSortDescendingNumbersIconSortZAIconSparklesIconSpyIconSqlIconSquareIconSquareCheckIconSquareKeyIconSquareNumber1IconSquareNumber2IconSquareNumber3IconSquareNumber4IconSquareNumber5IconSquareNumber6IconSquareNumber7IconSquareNumber8IconSquareNumber9IconSquarePlusIconSquareRoundedCheckIconSquareRoundedXIconSquareXIconStack2IconStairsIconStarIconStatusChangeIconStepIntoIconStrikethroughIconSumIconSunIconSunMoonIconSwitchHorizontalIconTableIconTagIconTagsIconTargetIconTargetArrowIconTerminalIconTerminal2IconTestPipeIconTextCaptionIconTextSizeIconTextWrapIconTimeDuration30IconTimeDuration60IconTimelineEventIconToolIconTransformIconTrashIconTrashOffIconTrashXIconTrendingDownIconTrendingUpIconTypographyIconUnderlineIconUnlinkIconUploadIconUserIconUserCircleIconUserCogIconUserOffIconUserPinIconUserPlusIconUsersIconUsersGroupIconVariableIconVariablePlusIconVersionsIconVersionsOffIconVideoIconWandIconWebhookIconWindowIconWorldIconWorldWwwIconXIconZzzIconZzzOff
color, size, stroke
Supported props: color, size, stroke. Other native attributes are not forwarded.
IconAddressBookIconChartBarHorizontal
size
Supported props: size. Other native attributes are not forwarded.
IconBrandAnthropicIconBrandGeminiIconBrandGroqIconBrandMistralIconGmailIconGoogleIconGoogleCalendarIconLockCustomIconMicrosoftIconMicrosoftCalendarIconMicrosoftOutlookIconModelClaudeIllustrationIconArrayIllustrationIconCalendarEventIllustrationIconCalendarTimeIllustrationIconCurrencyIllustrationIconFileIllustrationIconJsonIllustrationIconLinkIllustrationIconMailIllustrationIconManyToManyIllustrationIconMapIllustrationIconNumbersIllustrationIconOneToManyIllustrationIconOneToOneIllustrationIconPhoneIllustrationIconSettingIllustrationIconStarIllustrationIconTagIllustrationIconTagsIllustrationIconTextIllustrationIconToggleIllustrationIconUidIllustrationIconUser
color, size
Supported props: color, size. Other native attributes are not forwarded.
IconBrandTypesafeAiIconBrandXaiIconProviderOpenai
size, stroke
Supported props: size, stroke. Other native attributes are not forwarded.
IconRelationManyToOneIconTrashXOffIconTwentyStarIconTwentyStarFilled
aria-hidden, className, color, size, stroke
Supported props: aria-hidden, className, color, size, stroke. Other native attributes are not forwarded.
IconSparkle2