{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/icon","result":{"data":{"current":{"frontmatter":{"title":"Icon","order":26,"brief":"Semantic vector graphics.","icon":"doc-icons"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#icon-list","title":"Icon List"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#rotate--spin","title":"Rotate & Spin"},{"url":"#size","title":"Size"},{"url":"#color","title":"Color"},{"url":"#bicolor-icon","title":"Bicolor icon"},{"url":"#multicolor-buttons","title":"Multicolor buttons"},{"url":"#custom-icon","title":"Custom icon"},{"url":"#use-svgr-to-convert-svg-files-into-reactcomponent","title":"Use svgr to convert svg files into ReactComponent"}]},{"url":"#api-reference","title":"API reference","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\": \"en-US\",\n \"order\": 26,\n \"category\": \"Basic\",\n \"title\": \"Icon\",\n \"subTitle\": \"Icon\",\n \"icon\": \"doc-icons\",\n \"brief\": \"Semantic vector graphics.\"\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 }, \"Icon List\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The default icon set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons\"), \" includes three sets of icons: surface, linear, and AI. Surface icons, linear icons, and monochrome icons in AI icons have no color by default, and the color can be changed through the css color attribute.\\nDual-color and multi-color icons in AI icons have default colors, which can be changed via fill.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"AI icons are available since v2.86.0.\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons-lab\"), \" is a color icon set, which needs to be installed separately and cannot be changed. The lab icon set is provided after v2.48\"), 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\"), 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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), 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';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Import icons from the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@douyinfe/semi-icons\"), \" package\"), 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);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Size\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"You can change the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"font-size\"), \" to change the icon size\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra-small\"), \" (8x8), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \" (12x12), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \" (16x16), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"large\"), \" (20x20), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra-large \"), \"(24x24), When size is specified as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"inherit\"), \", the icon size inherits the current context font size.\"), 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 = [{sizes.map(size => React.cloneElement(type, { size, key: size }))}
;\\n });\\n return icons;\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Color\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The icon will automatically inherit the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color\"), \" property of the external container CSS\\nYou can also modify the color of the icon by setting style props to the Icon.\"), 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
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Multicolor buttons\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Multi-color icon, the current multi-color button can pass in four colors. The color can be set through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fill\"), \" attribute, which supports string and string[].\"), 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 }, \"Custom icon\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use custom icons to pass in Icon components\\nIcon component supports size, rotate, spin and other attributes\"), 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 );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Use svgr to convert svg files into ReactComponent\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"If the icons provided by Semi are not enough to meet business needs, you can also introduce custom icons through @svgr/webpack and use them as React components\"), 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