Panoramica
Importa le icone denominate datwenty-ui/icon. Usa il controllo circostante o il testo visibile per comunicare il significato. Le icone decorative devono essere nascoste alla tecnologia assistiva.
Proprietà supportate
Le icone Tabler accettanosize (numero o lunghezza CSS), stroke (spessore del tratto), color e attributi e ref SVG nativi. Le icone personalizzate del brand e delle illustrazioni accettano solo le proprietà elencate nel catalogo generato di seguito. Le dimensioni predefinite variano; passa size per un risultato coerente. I colori del brand possono essere fissati dalla grafica, quindi una sostituzione del colore è disponibile solo dove elencata.
Le icone personalizzate che non accettano attributi di accessibilità necessitano di un wrapper con l’etichetta appropriata o aria-hidden. className e style sono disponibili solo dove elencati. Quando possibile, importa un’icona specifica per evitare di caricare il catalogo dinamico.
Le icone esportate mantengono la larghezza richiesta nei layout flex, anche all’interno dei pulsanti. Consenti al testo adiacente di troncare oppure al contenitore padre di andare a capo o scorrere quando lo spazio è limitato. Quando un’icona supporta className o style, puoi sovrascrivere esplicitamente flex-shrink per un layout che ne ha bisogno. Anche i contenitori delle illustrazioni mantengono la propria larghezza.
Nomi dinamici delle icone
UsaIconsProvider e Icon quando i nomi vengono scelti in fase di esecuzione. Il provider carica in modo asincrono la mappa completa delle icone; i bundle creati senza code splitting, come i componenti front, includono l’intera mappa. Prima del completamento del caricamento e per i nomi sconosciuti, Icon esegue il rendering di Icon123. La mappa dinamica differisce dal catalogo delle esportazioni denominate; non presumere che ogni esportazione del brand o dell’illustrazione possa essere risolta in base al nome.
useIcons() espone getIcon(name, customDefaultIcon) e getIcons() all’interno dello stesso provider. getIcons() restituisce inizialmente una mappa vuota. getIcon usa il fallback denominato quando esiste, quindi Icon123. Il provider accetta un elemento figlio; usa un frammento per più elementi figli.
Proprietà delle icone
Hides a decorative icon from assistive technology.
string
Class forwarded to the resolved icon.
string
Color forwarded to the resolved icon.
string
obbligatorio
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.
Proprietà di IconsProvider
Element
obbligatorio
One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously.
Wrapper per illustrazioni
IllustrationIconWrapper fornisce lo stile del contenitore dell’illustrazione e inoltra attributi div nativi, elementi figli, stili e ref. Ogni esportazione IllustrationIcon* esegue già il rendering al suo interno, quindi usa il wrapper solo per incorniciare il contenuto della tua illustrazione.
ReactNode
Illustration content to center inside the wrapper.
string
Class merged with the illustration wrapper styling.
Icona del caricatore animato
ThinkingOrbitLoaderIcon viene animata continuamente mentre è montata. È decorativa ed è sempre nascosta alla tecnologia assistiva. Mostra separatamente il testo di caricamento e monta o rimuovi l’icona in base allo stato dell’applicazione.
string
Class applied to the SVG. The icon is always hidden from assistive technology.
string | number
predefinito:"14"
Width and height in pixels.
Catalogo delle icone denominate
Questo catalogo è generato dalle esportazioni pubbliche ditwenty-ui/icon e raggruppa le icone in base alle proprietà che accettano.
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