Resumen
Importa iconos con nombre desdetwenty-ui/icon. Usa el control circundante o el texto visible para comunicar el significado. Los iconos decorativos deben ocultarse de la tecnología de asistencia.
Props compatibles
Los iconos de Tabler aceptansize (número o longitud CSS), stroke (ancho de trazo), color y atributos y refs SVG nativos. Los iconos personalizados de marca e ilustración solo aceptan las props enumeradas en el catálogo generado a continuación. Sus valores predeterminados de tamaño varían; pasa size para obtener un resultado coherente. Los colores de marca pueden estar fijados por la ilustración, por lo que la anulación de color solo está disponible donde se indica.
Los iconos personalizados que no aceptan atributos de accesibilidad necesitan un contenedor con la etiqueta adecuada o aria-hidden. className y style también están disponibles solo donde se indican. Importa un icono específico cuando sea posible para evitar cargar el catálogo dinámico.
Los iconos exportados mantienen el ancho solicitado en los diseños flex, incluso dentro de botones. Permite que el texto adyacente se trunque o que el elemento principal se ajuste o se desplace cuando el espacio sea limitado. Cuando un icono admite className o style, puedes anular explícitamente flex-shrink para un diseño que lo necesite. Los contenedores de ilustraciones también conservan su ancho.
Nombres de iconos dinámicos
UsaIconsProvider e Icon cuando los nombres se eligen en tiempo de ejecución. El proveedor carga el mapa completo de iconos de forma asíncrona; los paquetes creados sin división de código, como los componentes de front-end, incluyen el mapa completo. Antes de que se complete la carga y para nombres desconocidos, Icon representa Icon123. El mapa dinámico difiere del catálogo de exportaciones con nombre; no supongas que todas las exportaciones de marca o ilustración se pueden resolver por nombre.
useIcons() expone getIcon(name, customDefaultIcon) y getIcons() dentro del mismo proveedor. getIcons() devuelve inicialmente un mapa vacío. getIcon usa la alternativa con nombre cuando existe y, después, Icon123. El proveedor acepta un elemento hijo; usa un fragmento para varios hijos.
Props de Icon
Hides a decorative icon from assistive technology.
string
Class forwarded to the resolved icon.
string
Color forwarded to the resolved icon.
string
requerido
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.
Props de IconsProvider
Element
requerido
One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously.
Contenedor de ilustración
IllustrationIconWrapper proporciona el estilo del contenedor de ilustración y reenvía atributos div nativos, hijos, estilos y refs. Cada exportación de IllustrationIcon* ya se representa dentro de él, así que usa el contenedor solo para enmarcar tu propio contenido de ilustración.
ReactNode
Illustration content to center inside the wrapper.
string
Class merged with the illustration wrapper styling.
Icono de cargador animado
ThinkingOrbitLoaderIcon se anima continuamente mientras está montado. Es decorativo y siempre está oculto de la tecnología de asistencia. Muestra el texto de carga por separado y monta o elimina el icono según el estado de la aplicación.
string
Class applied to the SVG. The icon is always hidden from assistive technology.
string | number
predeterminado:"14"
Width and height in pixels.
Catálogo de iconos con nombre
Este catálogo se genera a partir de las exportaciones públicas detwenty-ui/icon y agrupa los iconos según las props que aceptan.
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