图标 Icon |
您所在的位置：网站首页 › ID无法登录到icon的 › 图标 Icon |
图标 Icon
|
使用方法 使用图标组件，你需要安装 @ant-design/icons 图标组件包： npmyarnpnpmBun LogoBunnpm install @ant-design/icons --save设计师专属安装 Kitchen Sketch 插件 💎，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。 图标列表方向性图标StepBackwardOutlinedStepForwardOutlinedFastBackwardOutlinedFastForwardOutlinedShrinkOutlinedArrowsAltOutlinedDownOutlinedUpOutlinedLeftOutlinedRightOutlinedCaretUpOutlinedCaretDownOutlinedCaretLeftOutlinedCaretRightOutlinedUpCircleOutlinedDownCircleOutlinedLeftCircleOutlinedRightCircleOutlinedDoubleRightOutlinedDoubleLeftOutlinedVerticalLeftOutlinedVerticalRightOutlinedVerticalAlignTopOutlinedVerticalAlignMiddleOutlinedVerticalAlignBottomOutlinedForwardOutlinedBackwardOutlinedRollbackOutlinedEnterOutlinedRetweetOutlinedSwapOutlinedSwapLeftOutlinedSwapRightOutlinedArrowUpOutlinedArrowDownOutlinedArrowLeftOutlinedArrowRightOutlinedPlayCircleOutlinedUpSquareOutlinedDownSquareOutlinedLeftSquareOutlinedRightSquareOutlinedLoginOutlinedLogoutOutlinedMenuFoldOutlinedMenuUnfoldOutlinedBorderBottomOutlinedBorderHorizontalOutlinedBorderInnerOutlinedBorderOuterOutlinedBorderLeftOutlinedBorderRightOutlinedBorderTopOutlinedBorderVerticleOutlinedPicCenterOutlinedPicLeftOutlinedPicRightOutlinedRadiusBottomleftOutlinedRadiusBottomrightOutlinedRadiusUpleftOutlinedRadiusUprightOutlinedFullscreenOutlinedFullscreenExitOutlined提示建议性图标QuestionOutlinedQuestionCircleOutlinedPlusOutlinedPlusCircleOutlinedPauseOutlinedPauseCircleOutlinedMinusOutlinedMinusCircleOutlinedPlusSquareOutlinedMinusSquareOutlinedInfoOutlinedInfoCircleOutlinedExclamationOutlinedExclamationCircleOutlinedCloseOutlinedCloseCircleOutlinedCloseSquareOutlinedCheckOutlinedCheckCircleOutlinedCheckSquareOutlinedClockCircleOutlinedWarningOutlinedIssuesCloseOutlinedStopOutlined编辑类图标EditOutlinedFormOutlinedCopyOutlinedScissorOutlinedDeleteOutlinedSnippetsOutlinedDiffOutlinedHighlightOutlinedAlignCenterOutlinedAlignLeftOutlinedAlignRightOutlinedBgColorsOutlinedBoldOutlinedItalicOutlinedUnderlineOutlinedStrikethroughOutlinedRedoOutlinedUndoOutlinedZoomInOutlinedZoomOutOutlinedFontColorsOutlinedFontSizeOutlinedLineHeightOutlinedDashOutlinedSmallDashOutlinedSortAscendingOutlinedSortDescendingOutlinedDragOutlinedOrderedListOutlinedUnorderedListOutlinedRadiusSettingOutlinedColumnWidthOutlinedColumnHeightOutlined数据类图标AreaChartOutlinedPieChartOutlinedBarChartOutlinedDotChartOutlinedLineChartOutlinedRadarChartOutlinedHeatMapOutlinedFallOutlinedRiseOutlinedStockOutlinedBoxPlotOutlinedFundOutlinedSlidersOutlined品牌和标识AndroidOutlinedAppleOutlinedWindowsOutlinedIeOutlinedChromeOutlinedGithubOutlinedAliwangwangOutlinedDingdingOutlinedWeiboSquareOutlinedWeiboCircleOutlinedTaobaoCircleOutlinedHtml5OutlinedWeiboOutlinedTwitterOutlinedWechatOutlinedWhatsAppOutlinedYoutubeOutlinedAlipayCircleOutlinedTaobaoOutlinedDingtalkOutlinedSkypeOutlinedQqOutlinedMediumWorkmarkOutlinedGitlabOutlinedMediumOutlinedLinkedinOutlinedGooglePlusOutlinedDropboxOutlinedFacebookOutlinedCodepenOutlinedCodeSandboxOutlinedAmazonOutlinedGoogleOutlinedCodepenCircleOutlinedAlipayOutlinedAntDesignOutlinedAntCloudOutlinedAliyunOutlinedZhihuOutlinedSlackOutlinedSlackSquareOutlinedBehanceOutlinedBehanceSquareOutlinedDribbbleOutlinedDribbbleSquareOutlinedInstagramOutlinedYuqueOutlinedAlibabaOutlinedYahooOutlinedRedditOutlinedSketchOutlinedWechatWorkOutlinedOpenAIOutlinedDiscordOutlinedXOutlinedBilibiliOutlinedPinterestOutlinedTikTokOutlinedSpotifyOutlinedTwitchOutlinedLinuxOutlinedJavaOutlinedJavaScriptOutlinedPythonOutlinedRubyOutlinedDotNetOutlinedKubernetesOutlinedDockerOutlinedBaiduOutlinedHarmonyOSOutlined网站通用图标AccountBookOutlinedAimOutlinedAlertOutlinedApartmentOutlinedApiOutlinedAppstoreAddOutlinedAppstoreOutlinedAudioOutlinedAudioMutedOutlinedAuditOutlinedBankOutlinedBarcodeOutlinedBarsOutlinedBellOutlinedBlockOutlinedBookOutlinedBorderOutlinedBorderlessTableOutlinedBranchesOutlinedBugOutlinedBuildOutlinedBulbOutlinedCalculatorOutlinedCalendarOutlinedCameraOutlinedCarOutlinedCarryOutOutlinedCiCircleOutlinedCiOutlinedClearOutlinedCloudDownloadOutlinedCloudOutlinedCloudServerOutlinedCloudSyncOutlinedCloudUploadOutlinedClusterOutlinedCodeOutlinedCoffeeOutlinedCommentOutlinedCompassOutlinedCompressOutlinedConsoleSqlOutlinedContactsOutlinedContainerOutlinedControlOutlinedCopyrightOutlinedCreditCardOutlinedCrownOutlinedCustomerServiceOutlinedDashboardOutlinedDatabaseOutlinedDeleteColumnOutlinedDeleteRowOutlinedDeliveredProcedureOutlinedDeploymentUnitOutlinedDesktopOutlinedDisconnectOutlinedDislikeOutlinedDollarOutlinedDownloadOutlinedEllipsisOutlinedEnvironmentOutlinedEuroCircleOutlinedEuroOutlinedExceptionOutlinedExpandAltOutlinedExpandOutlinedExperimentOutlinedExportOutlinedEyeOutlinedEyeInvisibleOutlinedFieldBinaryOutlinedFieldNumberOutlinedFieldStringOutlinedFieldTimeOutlinedFileAddOutlinedFileDoneOutlinedFileExcelOutlinedFileExclamationOutlinedFileOutlinedFileGifOutlinedFileImageOutlinedFileJpgOutlinedFileMarkdownOutlinedFilePdfOutlinedFilePptOutlinedFileProtectOutlinedFileSearchOutlinedFileSyncOutlinedFileTextOutlinedFileUnknownOutlinedFileWordOutlinedFileZipOutlinedFilterOutlinedFireOutlinedFlagOutlinedFolderAddOutlinedFolderOutlinedFolderOpenOutlinedFolderViewOutlinedForkOutlinedFormatPainterOutlinedFrownOutlinedFunctionOutlinedFundProjectionScreenOutlinedFundViewOutlinedFunnelPlotOutlinedGatewayOutlinedGifOutlinedGiftOutlinedGlobalOutlinedGoldOutlinedGroupOutlinedHddOutlinedHeartOutlinedHistoryOutlinedHolderOutlinedHomeOutlinedHourglassOutlinedIdcardOutlinedImportOutlinedInboxOutlinedInsertRowAboveOutlinedInsertRowBelowOutlinedInsertRowLeftOutlinedInsertRowRightOutlinedInsuranceOutlinedInteractionOutlinedKeyOutlinedLaptopOutlinedLayoutOutlinedLikeOutlinedLineOutlinedLinkOutlinedLoading3QuartersOutlinedLoadingOutlinedLockOutlinedMacCommandOutlinedMailOutlinedManOutlinedMedicineBoxOutlinedMehOutlinedMenuOutlinedMergeCellsOutlinedMergeOutlinedMessageOutlinedMobileOutlinedMoneyCollectOutlinedMonitorOutlinedMoonOutlinedMoreOutlinedMutedOutlinedNodeCollapseOutlinedNodeExpandOutlinedNodeIndexOutlinedNotificationOutlinedNumberOutlinedOneToOneOutlinedPaperClipOutlinedPartitionOutlinedPayCircleOutlinedPercentageOutlinedPhoneOutlinedPictureOutlinedPlaySquareOutlinedPoundCircleOutlinedPoundOutlinedPoweroffOutlinedPrinterOutlinedProductOutlinedProfileOutlinedProjectOutlinedPropertySafetyOutlinedPullRequestOutlinedPushpinOutlinedQrcodeOutlinedReadOutlinedReconciliationOutlinedRedEnvelopeOutlinedReloadOutlinedRestOutlinedRobotOutlinedRocketOutlinedRotateLeftOutlinedRotateRightOutlinedSafetyCertificateOutlinedSafetyOutlinedSaveOutlinedScanOutlinedScheduleOutlinedSearchOutlinedSecurityScanOutlinedSelectOutlinedSendOutlinedSettingOutlinedShakeOutlinedShareAltOutlinedShopOutlinedShoppingCartOutlinedShoppingOutlinedSignatureOutlinedSisternodeOutlinedSkinOutlinedSmileOutlinedSolutionOutlinedSoundOutlinedSplitCellsOutlinedStarOutlinedSubnodeOutlinedSunOutlinedSwitcherOutlinedSyncOutlinedTableOutlinedTabletOutlinedTagOutlinedTagsOutlinedTeamOutlinedThunderboltOutlinedToTopOutlinedToolOutlinedTrademarkCircleOutlinedTrademarkOutlinedTransactionOutlinedTranslationOutlinedTrophyOutlinedTruckOutlinedUngroupOutlinedUnlockOutlinedUploadOutlinedUsbOutlinedUserAddOutlinedUserDeleteOutlinedUserOutlinedUserSwitchOutlinedUsergroupAddOutlinedUsergroupDeleteOutlinedVerifiedOutlinedVideoCameraAddOutlinedVideoCameraOutlinedWalletOutlinedWifiOutlinedWomanOutlined代码演示基本用法通过 @ant-design/icons 引用 Icon 组件，不同主题的 Icon 组件名为图标名加主题做为后缀，也可以通过设置 spin 属性来实现动画旋转效果。   自定义图标利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。 使用 iconfont.cn 的多个资源@ant-design/[email protected] 以后，scriptUrl 可引用多个资源，用户可灵活的管理 iconfont.cn 图标。如果资源的图标出现重名，会按照数组顺序进行覆盖。 多色图标双色图标可以通过 twoToneColor 属性设置主题色。 使用 iconfont.cn对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。 API从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。 通用图标参数说明类型默认值版本className设置图标的样式名string-rotate图标旋转角度（IE9 无效）number-spin是否有旋转动画booleanfalsestyle设置图标的样式，例如 fontSize 和 colorCSSProperties-twoToneColor仅适用双色图标。设置双色图标的主要颜色，支持设置十六进制颜色字符串string | string[]-其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。 import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons'; 自定义 Icon参数说明类型默认值版本component控制如何渲染图标，通常是一个渲染根标签为 的 React 组件ComponentType-rotate图标旋转角度（IE9 无效）number-spin是否有旋转动画booleanfalsestyle设置图标的样式， |
【本文地址】
今日新闻 |
推荐新闻 |