نظرة عامة
استورِد الأيقونات المُسمّاة منtwenty-ui/icon. استخدم عنصر التحكم المحيط أو النص المرئي لإيصال المعنى. يجب إخفاء الأيقونات الزخرفية عن التقنيات المساعدة.
الخصائص المدعومة
تقبل أيقونات Tabler كلاً منsize (رقم أو طول CSS)، وstroke (عرض الحد)، وcolor، وسمات ومراجع SVG الأصلية. لا تقبل أيقونات العلامة التجارية والرسوم التوضيحية المخصصة إلا الخصائص المدرجة في الكتالوج المُنشأ أدناه. تختلف أحجامها الافتراضية؛ مرِّر 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 الأصلية والعناصر التابعة والأنماط والمراجع. يُعرَض كل تصدير من 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