{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/icon","result":{"data":{"current":{"frontmatter":{"title":"Icon 图标","order":26,"brief":"语义化的矢量图形。","icon":"doc-icons"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#图标列表","title":"图标列表"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基础使用","title":"基础使用"},{"url":"#旋转","title":"旋转"},{"url":"#尺寸","title":"尺寸"},{"url":"#颜色","title":"颜色"},{"url":"#双色图标","title":"双色图标"},{"url":"#多色按钮","title":"多色按钮"},{"url":"#自定义图标","title":"自定义图标"},{"url":"#使用svgr将svg文件转成reactcomponent","title":"使用svgr将svg文件转成ReactComponent"}]},{"url":"#api参考","title":"API参考","items":[{"url":"#icon","title":"Icon"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 26,\n \"category\": \"基础\",\n \"title\": \"Icon 图标\",\n \"icon\": \"doc-icons\",\n \"brief\": \"语义化的矢量图形。\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u56FE\\u6807\\u5217\\u8868\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u9ED8\\u8BA4\\u7684\\u56FE\\u6807\\u96C6 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons\"), \" \\u5305\\u542B\\u9762\\u6027\\u3001\\u7EBF\\u6027\\u3001AI \\u4E09\\u5957\\u56FE\\u6807\\u3002\\u9762\\u6027\\u56FE\\u6807\\u3001\\u7EBF\\u6027\\u56FE\\u6807\\uFF0C\\u4EE5\\u53CA AI \\u56FE\\u6807\\u4E2D\\u7684\\u5355\\u8272\\u56FE\\u6807\\u9ED8\\u8BA4\\u4E0D\\u5E26\\u989C\\u8272\\uFF0C\\u53EF\\u901A\\u8FC7 css color \\u5C5E\\u6027\\u66F4\\u6539\\u989C\\u8272\\u3002\\nAI \\u56FE\\u6807\\u4E2D\\u7684\\u53CC\\u8272\\uFF0C\\u591A\\u8272\\u56FE\\u6807\\u6709\\u9ED8\\u8BA4\\u989C\\u8272\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 fill \\u66F4\\u6539\\u989C\\u8272\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"AI \\u56FE\\u6807\\u81EA v2.86.0 \\u63D0\\u4F9B\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons-lab\"), \" \\u4E3A\\u5F69\\u8272\\u56FE\\u6807\\u96C6\\uFF0C\\u9700\\u5355\\u72EC\\u5B89\\u88C5\\uFF0C\\u4E0D\\u53EF\\u6539\\u8272, lab \\u56FE\\u6807\\u96C6\\u4E8E v2.48 \\u540E\\u63D0\\u4F9B\"), mdx(\"div\", {\n style: {\n display: \"none\"\n }\n }, \"@douyinfe/semi-icons icon list:\", mdx(\"p\", {\n parentName: \"section\"\n }, \"IconAbsoluteStroked\\nIconActivity\\nIconAlarm\\nIconAlarmStroked\\nIconAlertCircle\\nIconAlertTriangle\\nIconAlignBottom\\nIconAlignCenter\\nIconAlignCenterVertical\\nIconAlignHCenterStroked\\nIconAlignHLeftStroked\\nIconAlignHRightStroked\\nIconAlignJustify\\nIconAlignLeft\\nIconAlignRight\\nIconAlignTop\\nIconAlignVBotStroked\\nIconAlignVBottomStroked\\nIconAlignVCenterStroked\\nIconAlignVTopStroked\\nIconApartment\\nIconAppCenter\\nIconApps\\nIconArchive\\nIconArrowDown\\nIconArrowDownLeft\\nIconArrowDownRight\\nIconArrowLeft\\nIconArrowRight\\nIconArrowUp\\nIconArrowUpLeft\\nIconArrowUpRight\\nIconArticle\\nIconAscend\\nIconAt\\nIconBackTop\\nIconBackward\\nIconBarChartHStroked\\nIconBarChartVStroked\\nIconBeaker\\nIconBell\\nIconBellStroked\\nIconBold\\nIconBolt\\nIconBook\\nIconBookH5Stroked\\nIconBookOpenStroked\\nIconBookStroked\\nIconBookmark\\nIconBookmarkAddStroked\\nIconBookmarkDeleteStroked\\nIconBottomCenterStroked\\nIconBottomLeftStroked\\nIconBottomRightStroked\\nIconBox\\nIconBrackets\\nIconBranch\\nIconBriefStroked\\nIconBriefcase\\nIconBriefcaseStroked\\nIconBulb\\nIconButtonStroked\\nIconBytedanceLogo\\nIconCalendar\\nIconCalendarClock\\nIconCalendarClockStroked\\nIconCalendarStroked\\nIconCamera\\nIconCameraStroked\\nIconCandlestickChartStroked\\nIconCaretdown\\nIconCaretup\\nIconCarouselStroked\\nIconCart\\nIconCartStroked\\nIconCaseSensitive\\nIconCenterLeftStroked\\nIconCenterRightStroked\\nIconChainStroked\\nIconCheckChoiceStroked\\nIconCheckCircleStroked\\nIconCheckList\\nIconCheckboxIndeterminate\\nIconCheckboxTick\\nIconChecklistStroked\\nIconChevronDown\\nIconChevronDownStroked\\nIconChevronLeft\\nIconChevronRight\\nIconChevronRightStroked\\nIconChevronUp\\nIconChevronUpDown\\nIconClear\\nIconClock\\nIconClockStroked\\nIconClose\\nIconCloud\\nIconCloudStroked\\nIconCloudUploadStroked\\nIconCode\\nIconCodeStroked\\nIconCoinMoney\\nIconCoinMoneyStroked\\nIconColorPalette\\nIconColumnsStroked\\nIconCommand\\nIconComment\\nIconCommentStroked\\nIconComponent\\nIconComponentPlaceholderStroked\\nIconComponentStroked\\nIconConfigStroked\\nIconConnectionPoint1\\nIconConnectionPoint2\\nIconContrast\\nIconCopy\\nIconCopyAdd\\nIconCopyStroked\\nIconCornerRadiusStroked\\nIconCreditCard\\nIconCreditCardStroked\\nIconCrop\\nIconCrossCircleStroked\\nIconCrossStroked\\nIconCrown\\nIconCrownStroked\\nIconCustomerSupport\\nIconCustomerSupportStroked\\nIconCustomize\\nIconDelete\\nIconDeleteStroked\\nIconDescend\\nIconDescend2\\nIconDesktop\\nIconDisc\\nIconDislikeThumb\\nIconDivide\\nIconDongchediLogo\\nIconDoubleChevronLeft\\nIconDoubleChevronRight\\nIconDownCircle\\nIconDownCircleStroked\\nIconDownload\\nIconDownloadStroked\\nIconDuration\\nIconEdit\\nIconEdit2\\nIconEdit2Stroked\\nIconEditStroked\\nIconElementStroked\\nIconEmoji\\nIconExit\\nIconExpand\\nIconExport\\nIconExternalOpen\\nIconExternalOpenStroked\\nIconEyeClosed\\nIconEyeClosedSolid\\nIconEyeClosedSolidStroked\\nIconEyeClosedStroked\\nIconEyeOpened\\nIconEyeOpenedStroked\\nIconEyedropper\\nIconFacebook\\nIconFaceuLogo\\nIconFastForward\\nIconFastFoward\\nIconFavoriteList\\nIconFeishuLogo\\nIconFemale\\nIconFigma\\nIconFile\\nIconFillStroked\\nIconFilledArrowDown\\nIconFilledArrowUp\\nIconFilpVertical\\nIconFilter\\nIconFilterStroked\\nIconFingerLeftStroked\\nIconFixedStroked\\nIconFlag\\nIconFlagStroked\\nIconFlipHorizontal\\nIconFlowChartStroked\\nIconFolder\\nIconFolderOpen\\nIconFolderOpenStroked\\nIconFolderStroked\\nIconFollowStroked\\nIconFont\\nIconFontColor\\nIconForward\\nIconForwardStroked\\nIconFullScreenStroked\\nIconGallery\\nIconGift\\nIconGiftStroked\\nIconGit\\nIconGithubLogo\\nIconGitlabLogo\\nIconGlobe\\nIconGlobeStroke\\nIconGlobeStrokeStroked\\nIconGlobeStroked\\nIconGridRectangle\\nIconGridSquare\\nIconGridStroked\\nIconGridView\\nIconGridView1\\nIconH1\\nIconH2\\nIconH3\\nIconH4\\nIconH5\\nIconH6\\nIconH7\\nIconH8\\nIconH9\\nIconHandle\\nIconHash\\nIconHeartStroked\\nIconHelm\\nIconHelpCircle\\nIconHelpCircleStroked\\nIconHistogram\\nIconHistory\\nIconHn\\nIconHome\\nIconHomeStroked\\nIconHorn\\nIconHornStroked\\nIconHourglass\\nIconHourglassStroked\\nIconIdCard\\nIconIdCardStroked\\nIconIdentity\\nIconImage\\nIconImageStroked\\nIconImport\\nIconInbox\\nIconIndenpentCornersStroked\\nIconIndentLeft\\nIconIndentRight\\nIconIndependentCornersStroked\\nIconInfoCircle\\nIconInherit\\nIconInheritStroked\\nIconInnerSectionStroked\\nIconInstagram\\nIconInteractiveStroked\\nIconInviteStroked\\nIconIssueStroked\\nIconItalic\\nIconJianying\\nIconKanban\\nIconKey\\nIconKeyStroked\\nIconLanguage\\nIconLayers\\nIconLeftCircle\\nIconLeftCircleStroked\\nIconLightningStroked\\nIconLikeHeart\\nIconLikeThumb\\nIconLineChartStroked\\nIconLineHeight\\nIconLink\\nIconList\\nIconListView\\nIconLive\\nIconLoading\\nIconLock\\nIconLockStroked\\nIconLoopTextStroked\\nIconMail\\nIconMailStroked\\nIconMailStroked1\\nIconMale\\nIconMapPin\\nIconMapPinStroked\\nIconMarginLeftStroked\\nIconMarginStroked\\nIconMark\\nIconMaximize\\nIconMaximize2\\nIconMaximize2Stroked\\nIconMember\\nIconMenu\\nIconMicrophone\\nIconMicrophoneOff\\nIconMicrophoneOffStroked\\nIconMicrophoneStroked\\nIconMiniPlayer\\nIconMinimize\\nIconMinus\\nIconMinusCircle\\nIconMinusCircleStroked\\nIconMinusStroked\\nIconModalStroked\\nIconMoneyExchangeStroked\\nIconMonitorStroked\\nIconMoon\\nIconMoonStroked\\nIconMore\\nIconMoreStroked\\nIconMusic\\nIconMusicNoteStroked\\nIconMute\\nIconMuteStroked\\nIconNineGridStroked\\nIconNoteMoney\\nIconNoteMoneyStroked\\nIconOption\\nIconOrderedList\\nIconOrderedListStroked\\nIconPaperclip\\nIconPaperclipStroked\\nIconPause\\nIconPercentage\\nIconPhone\\nIconPhoneStroke\\nIconPhoneStroked\\nIconPieChart2Stroked\\nIconPieChartStroked\\nIconPiechartH5Stroked\\nIconPipixiaLogo\\nIconPlay\\nIconPlayCircle\\nIconPlus\\nIconPlusCircle\\nIconPlusCircleStroked\\nIconPlusStroked\\nIconPriceTag\\nIconPrint\\nIconPrize\\nIconPrizeStroked\\nIconPulse\\nIconPuzzle\\nIconQingyan\\nIconQrCode\\nIconQuit\\nIconQuote\\nIconRadio\\nIconRankingCardStroked\\nIconRealSize\\nIconRealSizeStroked\\nIconRedo\\nIconRedoStroked\\nIconRefresh\\nIconRefresh2\\nIconRegExp\\nIconReply\\nIconReplyStroked\\nIconResso\\nIconRestart\\nIconRestore\\nIconRestoreStroked\\nIconRingChartStroked\\nIconRotate\\nIconRotationStroked\\nIconRoute\\nIconRowsStroked\\nIconSafe\\nIconSafeStroked\\nIconSave\\nIconSaveStroked\\nIconScan\\nIconScissors\\nIconScissorsStroked\\nIconSearch\\nIconSearchStroked\\nIconSectionStroked\\nIconSemiLogo\\nIconSend\\nIconSendMsgStroked\\nIconSendStroked\\nIconServer\\nIconServerStroked\\nIconSetting\\nIconSettingStroked\\nIconShare\\nIconShareMoneyStroked\\nIconShareStroked\\nIconShield\\nIconShieldStroked\\nIconShift\\nIconShoppingBag\\nIconShoppingBagStroked\\nIconShrink\\nIconShrinkScreenStroked\\nIconSidebar\\nIconSignal\\nIconSimilarity\\nIconSmallTriangleDown\\nIconSmallTriangleLeft\\nIconSmallTriangleRight\\nIconSmallTriangleTop\\nIconSmartphoneCheckStroked\\nIconSmartphoneStroked\\nIconSong\\nIconSonicStroked\\nIconSort\\nIconSortStroked\\nIconSourceControl\\nIconSpin\\nIconStackBarChartStroked\\nIconStar\\nIconStarStroked\\nIconStop\\nIconStopwatchStroked\\nIconStoryStroked\\nIconStrikeThrough\\nIconSun\\nIconSunStroked\\nIconSync\\nIconTabArrowStroked\\nIconTabsStroked\\nIconTaskMoneyStroked\\nIconTemplate\\nIconTemplateStroked\\nIconTerminal\\nIconTestScore\\nIconTestScoreStroked\\nIconText\\nIconTextRectangle\\nIconTextStroked\\nIconThumbUpStroked\\nIconTick\\nIconTickCircle\\nIconTicketCode\\nIconTicketCodeExchangeStroked\\nIconTicketCodeStroked\\nIconTiktokLogo\\nIconTop\\nIconTopCenterStroked\\nIconTopLeftStroked\\nIconTopRightStroked\\nIconTopbuzzLogo\\nIconToutiaoLogo\\nIconTransparentStroked\\nIconTreeTriangleDown\\nIconTreeTriangleRight\\nIconTriangleArrow\\nIconTriangleArrowVertical\\nIconTriangleDown\\nIconTriangleUp\\nIconTrueFalseStroked\\nIconTvCheckedStroked\\nIconTwitter\\nIconTypograph\\nIconUnChainStroked\\nIconUnderline\\nIconUndo\\nIconUnlink\\nIconUnlock\\nIconUnlockStroked\\nIconUpload\\nIconUploadError\\nIconUser\\nIconUserAdd\\nIconUserCardPhone\\nIconUserCardVideo\\nIconUserCardVideoStroked\\nIconUserCircle\\nIconUserCircleStroked\\nIconUserGroup\\nIconUserList\\nIconUserListStroked\\nIconUserSetting\\nIconUserStroked\\nIconVennChartStroked\\nIconVerify\\nIconVersionStroked\\nIconVideo\\nIconVideoDouyinStroked\\nIconVideoListStroked\\nIconVideoStroked\\nIconVideoUrlStroked\\nIconVigoLogo\\nIconVolume1\\nIconVolume1Stroked\\nIconVolume2\\nIconVolume2Stroked\\nIconVolumnSilent\\nIconVolumeSilentStroked\\nIconVoteStroked\\nIconVoteVideoStroked\\nIconWeibo\\nIconWholeWord\\nIconWifi\\nIconWindowAdaptionStroked\\nIconWrench\\nIconWrenchStroked\\nIconXiguaLogo\\nIconYoutube\\nIconAIBellLevel1\\nIconAIBellLevel2\\nIconAIBellLevel3\\nIconAIEditLevel1\\nIconAIEditLevel2\\nIconAIEditLevel3\\nIconAIFileLevel1\\nIconAIFileLevel2\\nIconAIFileLevel3\\nIconAIFiledLevel1\\nIconAIFiledLevel2\\nIconAIFiledLevel3\\nIconAIImageLevel1\\nIconAIImageLevel2\\nIconAIImageLevel3\\nIconAISearchLevel1\\nIconAISearchLevel2\\nIconAISearchLevel3\\nIconAIStrokeLevel1\\nIconAIStrokeLevel2\\nIconAIStrokeLevel3\\nIconAIWandLevel1\\nIconAIWandLevel2\\nIconAIWandLevel3\\nIconAILoading\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"@douyinfe/semi-icons-lab icon list:\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"IconAccessibility\\nIconAnchor\\nIconAutocomplete\\nIconAvatar\\nIconBackTop\\nIconBadge\\nIconBadgeStar\\nIconBanner\\nIconBreadcrumb\\nIconButton\\nIconCalendar\\nIconCard\\nIconCarousel\\nIconCascader\\nIconChangelog\\nIconChart\\nIconChat\\nIconCheckbox\\nIconCodeHighlight\\nIconCollapse\\nIconCollapsible\\nIconColorPlatte\\nIconColorPlatteNew\\nIconConfig\\nIconDarkMode\\nIconDatePicker\\nIconDescriptions\\nIconDivider\\nIconDropdown\\nIconEmpty\\nIconFaq\\nIconForm\\nIconGettingStarted\\nIconGrid\\nIconHeart\\nIconHighlight\\nIconImage\\nIconInput\\nIconInputNumber\\nIconIntro\\nIconJsonViewer\\nIconLayout\\nIconList\\nIconLocaleProvider\\nIconLottie\\nIconMarkdown\\nIconModal\\nIconNavigation\\nIconNotification\\nIconOverflow\\nIconPagination\\nIconPincode\\nIconPopconfirm\\nIconPopover\\nIconProgress\\nIconRadio\\nIconRating\\nIconScrollList\\nIconSelect\\nIconSideSheet\\nIconSkeleton\\nIconSlider\\nIconSpace\\nIconSpin\\nIconSteps\\nIconSwitch\\nIconTable\\nIconTabs\\nIconTag\\nIconTagInput\\nIconTimePicker\\nIconTimeline\\nIconToast\\nIconToken\\nIconTooltip\\nIconTransfer\\nIconTree\\nIconTreeSelect\\nIconTypography\\nIconUpload\\nIconVersionOne\\nIconVersionTwo\\nIconWebcomponents\\nIconWheelChair\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-icon\"\n }, \"\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import Icon, { IconHome } from '@douyinfe/semi-icons';\\nimport { IconAvatar, IconCard } from '@douyinfe/semi-icons-lab';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u7840\\u4F7F\\u7528\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4ECE\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons\"), \"\\u5305\\u4E2D\\u5F15\\u5165\\u56FE\\u6807\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconHome } from '@douyinfe/semi-icons';\\n\\n() => ;\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u65CB\\u8F6C\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4ECE\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons\"), \"\\u5305\\u4E2D\\u5F15\\u5165\\u56FE\\u6807\\uFF0C\\u81EA\\u5E26\\u5C3A\\u5BF8\\u3001\\u65CB\\u8F6C\\u3001spin\\u529F\\u80FD\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';\\n\\n() => (\\n
\\n \\n \\n \\n
\\n);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5C3A\\u5BF8\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u53EF\\u4EE5\\u6539\\u53D8\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"font-size\"), \"\\u6765\\u66F4\\u6539\\u56FE\\u6807\\u5927\\u5C0F\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Icon\\u7EC4\\u4EF6\\u5C01\\u88C5\\u4E86size\\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u66F4\\u65B9\\u4FBF\\u5730\\u5B9A\\u4E49\\u56FE\\u6807\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra-small\"), \" (8x8)\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \" (12x12)\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \" (16x16)\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"large\"), \" (20x20)\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra-large\"), \" (24x24)\\uFF0C\\u5F53size\\u6307\\u5B9A\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"inherit\"), \"\\u65F6\\uFF0C\\u56FE\\u6807\\u5927\\u5C0F\\u7EE7\\u627F\\u5F53\\u524D\\u4E0A\\u4E0B\\u6587\\u5B57\\u4F53\\u5927\\u5C0F\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';\\n\\n() => {\\n // eslint-disable-next-line react/jsx-key\\n const types = [, , , , , , ];\\n const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];\\n let icons = types.map((type, i) => {\\n return
{sizes.map(size => React.cloneElement(type, { size, key: size }))}
;\\n });\\n return icons;\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u989C\\u8272\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5355\\u8272\\u56FE\\u6807\\u4F1A\\u81EA\\u52A8\\u7EE7\\u627F\\u5916\\u90E8\\u5BB9\\u5668 CSS \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color\"), \" \\u5C5E\\u6027\\n\\u4F60\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7\\u7ED9 Icon \\u8BBE\\u7F6E style props \\u6765\\u4FEE\\u6539\\u56FE\\u6807\\u7684\\u989C\\u8272\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-icons';\\n\\n() => (\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \\n \\n
\\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u53CC\\u8272\\u56FE\\u6807\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53CC\\u8272\\u56FE\\u6807\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fill\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u989C\\u8272\\uFF0C\\u652F\\u6301 string \\u4EE5\\u53CA string[]\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconAIWandLevel2, IconAIFilledLevel2 } from '@douyinfe/semi-icons';\\n\\n() => (\\n
\\n \\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u591A\\u8272\\u6309\\u94AE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u591A\\u8272\\u56FE\\u6807\\uFF0C\\u5F53\\u524D\\u7684\\u591A\\u8272\\u6309\\u94AE\\u53EF\\u4F20\\u5165\\u56DB\\u4E2A\\u989C\\u8272\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fill\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u989C\\u8272\\uFF0C\\u652F\\u6301 string \\u4EE5\\u53CA string[]\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconAIBellLevel3, IconAIWandLevel3, IconAIFilledLevel3 } from '@douyinfe/semi-icons';\\n\\n() => (\\n
\\n \\n \\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u4F7F\\u7528\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\u4F20\\u5165Icon\\u7EC4\\u4EF6\\u3002Icon\\u7EC4\\u4EF6\\u652F\\u6301 size\\u3001rotate\\u3001spin \\u7B49\\u5C5E\\u6027\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Icon } from '@douyinfe/semi-ui';\\n\\n() => {\\n function CustomIcon() {\\n return \\n \\n \\n \\n \\n \\n \\n \\n ;\\n }\\n return (\\n
\\n } />\\n } rotate={180} />\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4F7F\\u7528svgr\\u5C06svg\\u6587\\u4EF6\\u8F6C\\u6210ReactComponent\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5982\\u679C Semi \\u63D0\\u4F9B\\u7684\\u56FE\\u6807\\u4E0D\\u8DB3\\u4EE5\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7@svgr/webpack\\u5F15\\u5165\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\uFF0C\\u5E76\\u4EE5React\\u7EC4\\u4EF6\\u5F62\\u5F0F\\u4F7F\\u7528\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// webpack.config.js\\n{\\n test: /\\\\.svg$/,\\n use: ['@svgr/webpack'],\\n}\\n\\nimport { Icon } from '@douyinfe/semi-ui';\\nimport StarIcon from './star.svg';\\n\\n} />\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API\\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Icon\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"fill\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u53CC\\u8272\\uFF0C\\u591A\\u8272\\u56FE\\u6807\\u7684\\u586B\\u5145\\u989C\\u8272\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5355\\u51FB\\u56FE\\u6807\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseDown\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9F20\\u6807\\u6309\\u94AE\\u6309\\u4E0B\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6 >=v1.21\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseEnter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8FDB\\u5165\\u56FE\\u6807\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseLeave\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u79BB\\u5F00\\u56FE\\u6807\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseMove\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u79FB\\u52A8\\u9F20\\u6807\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6 >=v1.21\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseUp\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9F20\\u6807\\u6309\\u94AE\\u62AC\\u8D77\\u7684\\u56DE\\u8C03\\u4E8B\\u4EF6 >=v1.21\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: Event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"rotate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65CB\\u8F6C\\u5EA6\\u6570\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"inherit\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"extra-small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"extra-large\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"spin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65CB\\u8F6C\\u52A8\\u753B\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u56FE\\u6807\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"svg\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u56FE\\u6807\\u5185\\u5BB9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Icon \\u7EC4\\u4EF6 role \\u4E3A img\\uFF0C\\u5B83\\u7684 aria-label \\u9ED8\\u8BA4\\u4E3A\\u7EC4\\u4EF6\\u7684\\u6587\\u4EF6\\u540D\\u3002\\u4F8B\\u5982 IconHome \\u7684 aria-label \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"home\"), \"\\uFF0C\\u5982\\u679C\\u4F60\\u6709\\u66F4\\u597D\\u7684\\u8BED\\u4E49\\u5316\\u540D\\u5B57\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 aria-label \\u4F20\\u5165\\u3002\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { IconHome } from '@douyinfe/semi-icons';\\n\\n() => ;\\n\")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Icon \\u5185\\u90E8\\u7684 svg \\u5143\\u7D20\\u4E3A\\u88C5\\u9970\\u5143\\u7D20\\uFF0C\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\u4E86 aria-hidden \\u4EE5\\u4E0D\\u88AB\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u9605\\u8BFB\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/icon","next":{"fields":{"slug":"en-US/basic/space"},"id":"7f209117-138d-581a-811e-cb901b6379bd","frontmatter":{"title":"Space","localeCode":"en-US","icon":"doc-space","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/icon"},"id":"b9ab711e-8670-5e47-928a-8ac3a22fd0a8","frontmatter":{"title":"Icon","localeCode":"en-US","icon":"doc-icons","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}