Antd Pro实现Icon图标选择器

最近使用antd pro搭建的项目中作到了动态菜单那部分，所以就先将菜单模块实现了出来，其中自定义选择图标那块在网上没有自己想要的那种，所以就自己封装了一个并且记录使用。

antd pro使用版本：v6
umi使用版本：4

展示效果：

具体使用流程

准备工作

创建自定义图标组件

目录结构

iconData.ts文件(这个文件比较大，是我根据antd官网中icon分类创建的)

// icon分类数据整合
// 方向性图标-线框风格
export const directionOutlined: string[] = [
  "StepBackwardOutlined",
  "StepForwardOutlined",
  "FastBackwardOutlined",
  "FastForwardOutlined",
  "ShrinkOutlined",
  "ArrowsAltOutlined",
  "DownOutlined",
  "UpOutlined",
  "LeftOutlined",
  "RightOutlined",
  "CaretUpOutlined",
  "CaretDownOutlined",
  "CaretLeftOutlined",
  "CaretRightOutlined",
  "UpCircleOutlined",
  "DownCircleOutlined",
  "LeftCircleOutlined",
  "RightCircleOutlined",
  "DoubleRightOutlined",
  "DoubleLeftOutlined",
  "VerticalLeftOutlined",
  "VerticalRightOutlined",
  "VerticalAlignTopOutlined",
  "VerticalAlignMiddleOutlined",
  "VerticalAlignBottomOutlined",
  "ForwardOutlined",
  "BackwardOutlined",
  "RollbackOutlined",
  "EnterOutlined",
  "RetweetOutlined",
  "SwapOutlined",
  "SwapLeftOutlined",
  "SwapRightOutlined",
  "ArrowUpOutlined",
  "ArrowDownOutlined",
  "ArrowLeftOutlined",
  "ArrowRightOutlined",
  "PlayCircleOutlined",
  "UpSquareOutlined",
  "DownSquareOutlined",
  "LeftSquareOutlined",
  "RightSquareOutlined",
  "LoginOutlined",
  "LogoutOutlined",
  "MenuFoldOutlined",
  "MenuUnfoldOutlined",
  "BorderBottomOutlined",
  "BorderHorizontalOutlined",
  "BorderInnerOutlined",
  "BorderOuterOutlined",
  "BorderLeftOutlined",
  "BorderRightOutlined",
  "BorderTopOutlined",
  "BorderVerticleOutlined",
  "PicCenterOutlined",
  "PicLeftOutlined",
  "PicRightOutlined",
  "RadiusBottomleftOutlined",
  "RadiusBottomrightOutlined",
  "RadiusUpleftOutlined",
  "RadiusUprightOutlined",
  "FullscreenOutlined",
  "FullscreenExitOutlined"
]

// 提示建议性图标-线框风格
export const suggestionOutlined: string[] = [
  "QuestionOutlined",
  "QuestionCircleOutlined",
  "PlusOutlined",
  "PlusCircleOutlined",
  "PauseOutlined",
  "PauseCircleOutlined",
  "MinusOutlined",
  "MinusCircleOutlined",
  "PlusSquareOutlined",
  "MinusSquareOutlined",
  "InfoOutlined",
  "InfoCircleOutlined",
  "ExclamationOutlined",
  "ExclamationCircleOutlined",
  "CloseOutlined",
  "CloseCircleOutlined",
  "CloseSquareOutlined",
  "CheckOutlined",
  "CheckCircleOutlined",
  "CheckSquareOutlined",
  "ClockCircleOutlined",
  "WarningOutlined",
  "IssuesCloseOutlined",
  "StopOutlined"
]

// 编辑类图标-线框风格
export const editorOutlined: string[] = [
  "EditOutlined",
  "FormOutlined",
  "CopyOutlined",
  "ScissorOutlined",
  "DeleteOutlined",
  "SnippetsOutlined",
  "DiffOutlined",
  "HighlightOutlined",
  "AlignCenterOutlined",
  "AlignLeftOutlined",
  "AlignRightOutlined",
  "BgColorsOutlined",
  "BoldOutlined",
  "ItalicOutlined",
  "UnderlineOutlined",
  "StrikethroughOutlined",
  "RedoOutlined",
  "UndoOutlined",
  "ZoomInOutlined",
  "ZoomOutOutlined",
  "FontColorsOutlined",
  "FontSizeOutlined",
  "LineHeightOutlined",
  "DashOutlined",
  "SmallDashOutlined",
  "SortAscendingOutlined",
  "SortDescendingOutlined",
  "DragOutlined",
  "OrderedListOutlined",
  "UnorderedListOutlined",
  "RadiusSettingOutlined",
  "ColumnWidthOutlined",
  "ColumnHeightOutlined"
]

// 数据类图标-线框风格
export const dataOutlined: string[] = [
  "AreaChartOutlined",
  "PieChartOutlined",
  "BarChartOutlined",
  "DotChartOutlined",
  "LineChartOutlined",
  "RadarChartOutlined",
  "HeatMapOutlined",
  "FallOutlined",
  "RiseOutlined",
  "StockOutlined",
  "BoxPlotOutlined",
  "FundOutlined",
  "SlidersOutlined"
]

// 品牌类图标-线框风格
export const logoOutlined: string[] = [
  "AndroidOutlined",
  "AppleOutlined",
  "WindowsOutlined",
  "IeOutlined",
  "ChromeOutlined",
  "GithubOutlined",
  "AliwangwangOutlined",
  "DingdingOutlined",
  "WeiboSquareOutlined",
  "WeiboCircleOutlined",
  "TaobaoCircleOutlined",
  "Html5Outlined",
  "WeiboOutlined",
  "TwitterOutlined",
  "WechatOutlined",
  "WhatsAppOutlined",
  "YoutubeOutlined",
  "AlipayCircleOutlined",
  "TaobaoOutlined",
  "DingtalkOutlined",
  "SkypeOutlined",
  "QqOutlined",
  "MediumWorkmarkOutlined",
  "GitlabOutlined",
  "MediumOutlined",
  "LinkedinOutlined",
  "GooglePlusOutlined",
  "DropboxOutlined",
  "FacebookOutlined",
  "CodepenOutlined",
  "CodeSandboxOutlined",
  "AmazonOutlined",
  "GoogleOutlined",
  "CodepenCircleOutlined",
  "AlipayOutlined",
  "AntDesignOutlined",
  "AntCloudOutlined",
  "AliyunOutlined",
  "ZhihuOutlined",
  "SlackOutlined",
  "SlackSquareOutlined",
  "BehanceOutlined",
  "BehanceSquareOutlined",
  "DribbbleOutlined",
  "DribbbleSquareOutlined",
  "InstagramOutlined",
  "YuqueOutlined",
  "AlibabaOutlined",
  "YahooOutlined",
  "RedditOutlined",
  "SketchOutlined"
]

// 网站通用图标-线框风格
export const otherOutlined: string[] = [
  "AccountBookOutlined",
  "AimOutlined",
  "AlertOutlined",
  "ApartmentOutlined",
  "ApiOutlined",
  "AppstoreAddOutlined",
  "AppstoreOutlined",
  "AudioOutlined",
  "AudioMutedOutlined",
  "AuditOutlined",
  "BankOutlined",
  "BarcodeOutlined",
  "BarsOutlined",
  "BellOutlined",
  "BlockOutlined",
  "BookOutlined",
  "BorderOutlined",
  "BorderlessTableOutlined",
  "BranchesOutlined",
  "BugOutlined",
  "BuildOutlined",
  "BulbOutlined",
  "CalculatorOutlined",
  "CalendarOutlined",
  "CameraOutlined",
  "CarOutlined",
  "CarryOutOutlined",
  "CiCircleOutlined",
  "CiOutlined",
  "ClearOutlined",
  "CloudDownloadOutlined",
  "CloudOutlined",
  "CloudServerOutlined",
  "CloudSyncOutlined",
  "CloudUploadOutlined",
  "ClusterOutlined",
  "CodeOutlined",
  "CoffeeOutlined",
  "CommentOutlined",
  "CompassOutlined",
  "CompressOutlined",
  "ConsoleSqlOutlined",
  "ContactsOutlined",
  "ContainerOutlined",
  "ControlOutlined",
  "CopyrightOutlined",
  "CreditCardOutlined",
  "CrownOutlined",
  "CustomerServiceOutlined",
  "DashboardOutlined",
  "DatabaseOutlined",
  "DeleteColumnOutlined",
  "DeleteRowOutlined",
  "DeliveredProcedureOutlined",
  "DeploymentUnitOutlined",
  "DesktopOutlined",
  "DisconnectOutlined",
  "DislikeOutlined",
  "DollarOutlined",
  "DownloadOutlined",
  "EllipsisOutlined",
  "EnvironmentOutlined",
  "EuroCircleOutlined",
  "EuroOutlined",
  "ExceptionOutlined",
  "ExpandAltOutlined",
  "ExpandOutlined",
  "ExperimentOutlined",
  "ExportOutlined",
  "EyeOutlined",
  "EyeInvisibleOutlined",
  "FieldBinaryOutlined",
  "FieldNumberOutlined",
  "FieldStringOutlined",
  "FieldTimeOutlined",
  "FileAddOutlined",
  "FileDoneOutlined",
  "FileExcelOutlined",
  "FileExclamationOutlined",
  "FileOutlined",
  "FileGifOutlined",
  "FileImageOutlined",
  "FileJpgOutlined",
  "FileMarkdownOutlined",
  "FilePdfOutlined",
  "FilePptOutlined",
  "FileProtectOutlined",
  "FileSearchOutlined",
  "FileSyncOutlined",
  "FileTextOutlined",
  "FileUnknownOutlined",
  "FileWordOutlined",
  "FileZipOutlined",
  "FilterOutlined",
  "FireOutlined",
  "FlagOutlined",
  "FolderAddOutlined",
  "FolderOutlined",
  "FolderOpenOutlined",
  "FolderViewOutlined",
  "ForkOutlined",
  "FormatPainterOutlined",
  "FrownOutlined",
  "FunctionOutlined",
  "FundProjectionScreenOutlined",
  "FundViewOutlined",
  "FunnelPlotOutlined",
  "GatewayOutlined",
  "GifOutlined",
  "GiftOutlined",
  "GlobalOutlined",
  "GoldOutlined",
  "GroupOutlined",
  "HddOutlined",
  "HeartOutlined",
  "HistoryOutlined",
  "HolderOutlined",
  "HomeOutlined",
  "HourglassOutlined",
  "IdcardOutlined",
  "ImportOutlined",
  "InboxOutlined",
  "InsertRowAboveOutlined",
  "InsertRowBelowOutlined",
  "InsertRowLeftOutlined",
  "InsertRowRightOutlined",
  "InsuranceOutlined",
  "InteractionOutlined",
  "KeyOutlined",
  "LaptopOutlined",
  "LayoutOutlined",
  "LikeOutlined",
  "LineOutlined",
  "LinkOutlined",
  "Loading3QuartersOutlined",
  "LoadingOutlined",
  "LockOutlined",
  "MacCommandOutlined",
  "MailOutlined",
  "ManOutlined",
  "MedicineBoxOutlined",
  "MehOutlined",
  "MenuOutlined",
  "MergeCellsOutlined",
  "MessageOutlined",
  "MobileOutlined",
  "MoneyCollectOutlined",
  "MonitorOutlined",
  "MoreOutlined",
  "NodeCollapseOutlined",
  "NodeExpandOutlined",
  "NodeIndexOutlined",
  "NotificationOutlined",
  "NumberOutlined",
  "OneToOneOutlined",
  "PaperClipOutlined",
  "PartitionOutlined",
  "PayCircleOutlined",
  "PercentageOutlined",
  "PhoneOutlined",
  "PictureOutlined",
  "PlaySquareOutlined",
  "PoundCircleOutlined",
  "PoundOutlined",
  "PoweroffOutlined",
  "PrinterOutlined",
  "ProfileOutlined",
  "ProjectOutlined",
  "PropertySafetyOutlined",
  "PullRequestOutlined",
  "PushpinOutlined",
  "QrcodeOutlined",
  "ReadOutlined",
  "ReconciliationOutlined",
  "RedEnvelopeOutlined",
  "ReloadOutlined",
  "RestOutlined",
  "RobotOutlined",
  "RocketOutlined",
  "RotateLeftOutlined",
  "RotateRightOutlined",
  "SafetyCertificateOutlined",
  "SafetyOutlined",
  "SaveOutlined",
  "ScanOutlined",
  "ScheduleOutlined",
  "SearchOutlined",
  "SecurityScanOutlined",
  "SelectOutlined",
  "SendOutlined",
  "SettingOutlined",
  "ShakeOutlined",
  "ShareAltOutlined",
  "ShopOutlined",
  "ShoppingCartOutlined",
  "ShoppingOutlined",
  "SisternodeOutlined",
  "SkinOutlined",
  "SmileOutlined",
  "SolutionOutlined",
  "SoundOutlined",
  "SplitCellsOutlined",
  "StarOutlined",
  "SubnodeOutlined",
  "SwitcherOutlined",
  "SyncOutlined",
  "TableOutlined",
  "TabletOutlined",
  "TagOutlined",
  "TagsOutlined",
  "TeamOutlined",
  "ThunderboltOutlined",
  "ToTopOutlined",
  "ToolOutlined",
  "TrademarkCircleOutlined",
  "TrademarkOutlined",
  "TransactionOutlined",
  "TranslationOutlined",
  "TrophyOutlined",
  "UngroupOutlined",
  "UnlockOutlined",
  "UploadOutlined",
  "UsbOutlined",
  "UserAddOutlined",
  "UserDeleteOutlined",
  "UserOutlined",
  "UserSwitchOutlined",
  "UsergroupAddOutlined",
  "UsergroupDeleteOutlined",
  "VerifiedOutlined",
  "VideoCameraAddOutlined",
  "VideoCameraOutlined",
  "WalletOutlined",
  "WifiOutlined",
  "WomanOutlined"
]

// 方向性图标-实底风格
export const directionFilled: string[] = [
  "StepBackwardFilled",
  "StepForwardFilled",
  "FastBackwardFilled",
  "FastForwardFilled",
  "CaretUpFilled",
  "CaretDownFilled",
  "CaretLeftFilled",
  "CaretRightFilled",
  "UpCircleFilled",
  "DownCircleFilled",
  "LeftCircleFilled",
  "RightCircleFilled",
  "ForwardFilled",
  "BackwardFilled",
  "PlayCircleFilled",
  "UpSquareFilled",
  "DownSquareFilled",
  "LeftSquareFilled",
  "RightSquareFilled"
]

// 提示建议性图标-实底风格
export const suggestionFilled: string[] = [
  "QuestionCircleFilled",
  "PlusCircleFilled",
  "PauseCircleFilled",
  "MinusCircleFilled",
  "PlusSquareFilled",
  "MinusSquareFilled",
  "InfoCircleFilled",
  "ExclamationCircleFilled",
  "CloseCircleFilled",
  "CloseSquareFilled",
  "CheckCircleFilled",
  "CheckSquareFilled",
  "ClockCircleFilled",
  "WarningFilled",
  "StopFilled"
]

// 编辑类图标-实底风格
export const editorFilled: string[] = [
  "EditFilled",
  "CopyFilled",
  "DeleteFilled",
  "SnippetsFilled",
  "DiffFilled",
  "HighlightFilled"
]

// 数据类图标-实底风格
export const dataFilled: string[] = [
  "PieChartFilled",
  "BoxPlotFilled",
  "FundFilled",
  "SlidersFilled"
]

// 品牌类图标-实底风格
export const logoFilled: string[] = [
  "AndroidFilled",
  "AppleFilled",
  "WindowsFilled",
  "ChromeFilled",
  "GithubFilled",
  "AliwangwangFilled",
  "WeiboSquareFilled",
  "WeiboCircleFilled",
  "TaobaoCircleFilled",
  "Html5Filled",
  "WechatFilled",
  "YoutubeFilled",
  "AlipayCircleFilled",
  "SkypeFilled",
  "GitlabFilled",
  "LinkedinFilled",
  "FacebookFilled",
  "CodeSandboxCircleFilled",
  "CodepenCircleFilled",
  "SlackSquareFilled",
  "BehanceSquareFilled",
  "DribbbleSquareFilled",
  "InstagramFilled",
  "YuqueFilled",
  "YahooFilled"
]

// 网站通用图标-实底风格
export const otherFilled: string[] = [
  "AccountBookFilled",
  "AlertFilled",
  "AlipaySquareFilled",
  "AmazonCircleFilled",
  "AmazonSquareFilled",
  "ApiFilled",
  "AppstoreFilled",
  "AudioFilled",
  "BankFilled",
  "BehanceCircleFilled",
  "BellFilled",
  "BookFilled",
  "BugFilled",
  "BuildFilled",
  "BulbFilled",
  "CalculatorFilled",
  "CalendarFilled",
  "CameraFilled",
  "CarFilled",
  "CarryOutFilled",
  "CiCircleFilled",
  "CloudFilled",
  "CodeFilled",
  "CodeSandboxSquareFilled",
  "CodepenSquareFilled",
  "CompassFilled",
  "ContactsFilled",
  "ContainerFilled",
  "ControlFilled",
  "CreditCardFilled",
  "CrownFilled",
  "CustomerServiceFilled",
  "DashboardFilled",
  "DatabaseFilled",
  "DingtalkCircleFilled",
  "DingtalkSquareFilled",
  "DislikeFilled",
  "DribbbleCircleFilled",
  "DropboxCircleFilled",
  "DropboxSquareFilled",
  "EnvironmentFilled",
  "EuroCircleFilled",
  "ExperimentFilled",
  "EyeFilled",
  "EyeInvisibleFilled",
  "FileAddFilled",
  "FileExcelFilled",
  "FileExclamationFilled",
  "FileFilled",
  "FileImageFilled",
  "FileMarkdownFilled",
  "FilePdfFilled",
  "FilePptFilled",
  "FileTextFilled",
  "FileUnknownFilled",
  "FileWordFilled",
  "FileZipFilled",
  "FilterFilled",
  "FireFilled",
  "FlagFilled",
  "FolderAddFilled",
  "FolderFilled",
  "FolderOpenFilled",
  "FormatPainterFilled",
  "FrownFilled",
  "FunnelPlotFilled",
  "GiftFilled",
  "GoldFilled",
  "GoldenFilled",
  "GoogleCircleFilled",
  "GooglePlusCircleFilled",
  "GooglePlusSquareFilled",
  "GoogleSquareFilled",
  "HddFilled",
  "HeartFilled",
  "HomeFilled",
  "HourglassFilled",
  "IdcardFilled",
  "IeCircleFilled",
  "IeSquareFilled",
  "InsuranceFilled",
  "InteractionFilled",
  "LayoutFilled",
  "LikeFilled",
  "LockFilled",
  "MacCommandFilled",
  "MailFilled",
  "MedicineBoxFilled",
  "MediumCircleFilled",
  "MediumSquareFilled",
  "MehFilled",
  "MessageFilled",
  "MobileFilled",
  "MoneyCollectFilled",
  "NotificationFilled",
  "PayCircleFilled",
  "PhoneFilled",
  "PictureFilled",
  "PlaySquareFilled",
  "PoundCircleFilled",
  "PrinterFilled",
  "ProfileFilled",
  "ProjectFilled",
  "PropertySafetyFilled",
  "PushpinFilled",
  "QqCircleFilled",
  "QqSquareFilled",
  "ReadFilled",
  "ReconciliationFilled",
  "RedEnvelopeFilled",
  "RedditCircleFilled",
  "RedditSquareFilled",
  "RestFilled",
  "RobotFilled",
  "RocketFilled",
  "SafetyCertificateFilled",
  "SaveFilled",
  "ScheduleFilled",
  "SecurityScanFilled",
  "SettingFilled",
  "ShopFilled",
  "ShoppingFilled",
  "SignalFilled",
  "SketchCircleFilled",
  "SketchSquareFilled",
  "SkinFilled",
  "SlackCircleFilled",
  "SmileFilled",
  "SoundFilled",
  "StarFilled",
  "SwitcherFilled",
  "TabletFilled",
  "TagFilled",
  "TagsFilled",
  "TaobaoSquareFilled",
  "ThunderboltFilled",
  "ToolFilled",
  "TrademarkCircleFilled",
  "TrophyFilled",
  "TwitterCircleFilled",
  "TwitterSquareFilled",
  "UnlockFilled",
  "UsbFilled",
  "VideoCameraFilled",
  "WalletFilled",
  "ZhihuCircleFilled",
  "ZhihuSquareFilled"
]

// 方向性图标-双色风格
export const directionTwoTone: string[] = [
  "UpCircleTwoTone",
  "DownCircleTwoTone",
  "LeftCircleTwoTone",
  "RightCircleTwoTone",
  "PlayCircleTwoTone",
  "UpSquareTwoTone",
  "DownSquareTwoTone",
  "LeftSquareTwoTone",
  "RightSquareTwoTone"
]

// 提示建议性图标-双色风格
export const suggestionTwoTone: string[] = [
  "QuestionCircleTwoTone",
  "PlusCircleTwoTone",
  "PauseCircleTwoTone",
  "MinusCircleTwoTone",
  "PlusSquareTwoTone",
  "MinusSquareTwoTone",
  "InfoCircleTwoTone",
  "ExclamationCircleTwoTone",
  "CloseCircleTwoTone",
  "CloseSquareTwoTone",
  "CheckCircleTwoTone",
  "CheckSquareTwoTone",
  "ClockCircleTwoTone",
  "WarningTwoTone",
  "StopTwoTone"
]

// 编辑类图标-双色风格
export const editorTwoTone: string[] = [
  "EditTwoTone",
  "CopyTwoTone",
  "DeleteTwoTone",
  "SnippetsTwoTone",
  "DiffTwoTone",
  "HighlightTwoTone"
]

// 数据类图标-双色风格
export const dataTwoTone: string[] = [
  "PieChartTwoTone",
  "BoxPlotTwoTone",
  "FundTwoTone",
  "SlidersTwoTone"
]

// 品牌和标识-双色风格
export const logoTwoTone: string[] = ["Html5TwoTone"]

// 网站通用图标-双色风格
export const otherTwoTone: string[] = [
  "AccountBookTwoTone",
  "AlertTwoTone",
  "ApiTwoTone",
  "AppstoreTwoTone",
  "AudioTwoTone",
  "BankTwoTone",
  "BellTwoTone",
  "BookTwoTone",
  "BugTwoTone",
  "BuildTwoTone",
  "BulbTwoTone",
  "CalculatorTwoTone",
  "CalendarTwoTone",
  "CameraTwoTone",
  "CarTwoTone",
  "CarryOutTwoTone",
  "CiCircleTwoTone",
  "CiTwoTone",
  "CloudTwoTone",
  "CodeTwoTone",
  "CompassTwoTone",
  "ContactsTwoTone",
  "ContainerTwoTone",
  "ControlTwoTone",
  "CopyrightTwoTone",
  "CreditCardTwoTone",
  "CrownTwoTone",
  "CustomerServiceTwoTone",
  "DashboardTwoTone",
  "DatabaseTwoTone",
  "DislikeTwoTone",
  "DollarTwoTone",
  "EnvironmentTwoTone",
  "EuroCircleTwoTone",
  "EuroTwoTone",
  "ExperimentTwoTone",
  "EyeTwoTone",
  "EyeInvisibleTwoTone",
  "FileAddTwoTone",
  "FileExcelTwoTone",
  "FileExclamationTwoTone",
  "FileTwoTone",
  "FileImageTwoTone",
  "FileMarkdownTwoTone",
  "FilePdfTwoTone",
  "FilePptTwoTone",
  "FileTextTwoTone",
  "FileUnknownTwoTone",
  "FileWordTwoTone",
  "FileZipTwoTone",
  "FilterTwoTone",
  "FireTwoTone",
  "FlagTwoTone",
  "FolderAddTwoTone",
  "FolderTwoTone",
  "FolderOpenTwoTone",
  "FrownTwoTone",
  "FunnelPlotTwoTone",
  "GiftTwoTone",
  "GoldTwoTone",
  "HddTwoTone",
  "HeartTwoTone",
  "HomeTwoTone",
  "HourglassTwoTone",
  "IdcardTwoTone",
  "InsuranceTwoTone",
  "InteractionTwoTone",
  "LayoutTwoTone",
  "LikeTwoTone",
  "LockTwoTone",
  "MailTwoTone",
  "MedicineBoxTwoTone",
  "MehTwoTone",
  "MessageTwoTone",
  "MobileTwoTone",
  "MoneyCollectTwoTone",
  "NotificationTwoTone",
  "PhoneTwoTone",
  "PictureTwoTone",
  "PlaySquareTwoTone",
  "PoundCircleTwoTone",
  "PrinterTwoTone",
  "ProfileTwoTone",
  "ProjectTwoTone",
  "PropertySafetyTwoTone",
  "PushpinTwoTone",
  "ReconciliationTwoTone",
  "RedEnvelopeTwoTone",
  "RestTwoTone",
  "RocketTwoTone",
  "SafetyCertificateTwoTone",
  "SaveTwoTone",
  "ScheduleTwoTone",
  "SecurityScanTwoTone",
  "SettingTwoTone",
  "ShopTwoTone",
  "ShoppingTwoTone",
  "SkinTwoTone",
  "SmileTwoTone",
  "SoundTwoTone",
  "StarTwoTone",
  "SwitcherTwoTone",
  "TabletTwoTone",
  "TagTwoTone",
  "TagsTwoTone",
  "ThunderboltTwoTone",
  "ToolTwoTone",
  "TrademarkCircleTwoTone",
  "TrophyTwoTone",
  "UnlockTwoTone",
  "UsbTwoTone",
  "VideoCameraTwoTone",
  "WalletTwoTone"
]

// 线框风格全部种类数据
export const Outlined = [
  {'title': '方向性图标', key: 'direction', icons: directionOutlined},
  {'title': '提示建议性图标', key: 'suggestion', icons: suggestionOutlined},
  {'title': '编辑类图标', key: 'editor', icons: editorOutlined},
  {'title': '数据类图标', key: 'data', icons: dataOutlined},
  {'title': '品牌和标识', key: 'logo', icons: logoOutlined},
  {'title': '网站通用图标', key: 'other', icons: otherOutlined},
]

// 实底风格全部种类数据
export const Filled = [
  {'title': '方向性图标', key: 'direction', icons: directionFilled},
  {'title': '提示建议性图标', key: 'suggestion', icons: suggestionFilled},
  {'title': '编辑类图标', key: 'editor', icons: editorFilled},
  {'title': '数据类图标', key: 'data', icons: dataFilled},
  {'title': '品牌和标识', key: 'logo', icons: logoFilled},
  {'title': '网站通用图标', key: 'other', icons: otherFilled},
]

// 双色风格全部种类数据
export const TwoTone = [
  {'title': '方向性图标', key: 'direction', icons: directionTwoTone},
  {'title': '提示建议性图标', key: 'suggestion', icons: suggestionTwoTone},
  {'title': '编辑类图标', key: 'editor', icons: editorTwoTone},
  {'title': '数据类图标', key: 'data', icons: dataTwoTone},
  {'title': '品牌和标识', key: 'logo', icons: logoTwoTone},
  {'title': '网站通用图标', key: 'other', icons: otherTwoTone},
]

export const iconData = [
  {'title': '线框风格', key: 'outlined', icons: Outlined},
  {'title': '实底风格', key: 'filled', icons: Filled},
  {'title': '双色风格', key: 'twoTone', icons: TwoTone}
]

index.tsx组件定义

import React, {useEffect, useState} from 'react';
import {Button, Modal, Row, Tabs} from 'antd';
import * as icons from "@ant-design/icons";
import {iconData} from "./iconData"
import {Tab} from "rc-tabs/lib/interface";

const IconSelect: React.FC<XH.ChildComponentProps> = (props) => {

  // @ts-ignore
  const [currentIcon, setCurrentIcon] = useState<string>(props.parentKey)
  const [viewData, setViewData] = useState<Tab[]>([])

  useEffect(() => {
    // 定义风格分类数据
    const styleData: Tab[] = [];
    iconData.forEach(styleItem => {
      // 定义图标分类数据
      const typeData: Tab[] = [];
      // 遍历展示各个图标分类
      const typeIcons = styleItem.icons
      typeIcons.filter(typeItem => {
        // 将各分类下的图标遍历到页面
        const childData = typeItem.icons
        typeData.push({
          key: typeItem.key,
          label: typeItem.title,
          children: (
            <>
              {
                childData.map(item => {
                  return <Button key={item} onClick={() => change(item)} type="text"><Icon name={item}/></Button>
                })
              }
            </>
          )
        })
      })

      styleData.push({
        key: styleItem.key,
        label: styleItem.title,
        children: (
          <Tabs items={typeData}/>
        )
      })
    })
    setViewData(styleData)
  }, [])

  const change = (value: string) => {
    console.log("展示获取数据", value)
    setCurrentIcon(value)
  }

  return (
    <Modal
      open={props.visible}
      onCancel={props.cancelView}
      onOk={() => props.submitView?.(currentIcon)}
      closable={false}
      width={'50vw'}
      title="图标选择"
      destroyOnClose
    >
      <Tabs items={viewData}/>
      <Row style={{paddingTop: '30px'}}>
        当前选择图标：
        {
          currentIcon ? <><Icon name={currentIcon}/> {currentIcon}</> : ''
        }
      </Row>
    </Modal>
  )
}

export const Icon = (props: { name: string }) => {
  const {name} = props
  const antIcon: { [key: string]: any } = icons
  return React.createElement(antIcon[name])
}

export default IconSelect;

上方使用的XH.ChildComponentProps是我项目中自定义的一个类型
typings.d.ts文件定义

// 首先看此文件的全名称，是以.d.ts结尾的。ts规定在.d.ts中声明的变量或者模块，其他位置不需要使用import也能直接使用，还包含提示
// 但是需要在tsconfig.json的include中配置.d.ts文件路径（父路径即可）
// .d.ts文件中的顶级声明必须以declare或export修饰符开头

declare namespace XH {
  // 统一返回对象
  type XingHuoResult = {
    code?: number;
    msg?: string;
    data?: any | CurrentUser | NoticeIconItem[];
    // 类型，目前只表示登录类型（密码登录与手机验证码登录）
    type?: string;
    // 分页查询总条数
    total?: number;
  }
  // 子组件接收对象
  type ChildComponentProps = {
    // 是否展示
    visible: boolean
    // 回调父组件函数-关闭
    cancelView?: () => void
    // 回调父组件函数-提交
    submitView?: (data: any) => void
    // 唯一键值（一般用于详细等功能使用）
    parentKey: string | number
  }
}

组件引用方式
这里我主要粘贴表单那块的内容

// 用于展示自定义图标组件
const [iconVisible, setIconVisible] = useState<boolean>(false)
// 当前展示图标
const [currentIcon, setCurrentIcon] = useState<string>('')

// 将子组件选择的icon进行存储
const setIcon = (icon: string) => {
    form.current?.setFieldValue('icon', icon)
    setCurrentIcon(icon)
    setIconVisible(false)
}

<ModalForm<SysMenuItem>
        title={title}
        visible={visible}
        formRef={form}
        autoFocusFirstInput
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false)
          },
        }}
        submitTimeout={2000}
        onFinish={async (data) => {
          let result;
          if (type == 'add') {
            result = await addMenu(data)
          } else {
            result = await updateMenu(data)
          }
          if (result.code === 200) {
            setVisible(false);
            actionRef.current?.reload();
            message.success('提交成功');
          } else {
            message.success('操作失败');
          }
          return true;
        }}
        grid={true}
      >
        <ProForm.Item name="menuId" hidden/>
        <ProFormText
          width="md"
          name="parentId"
          label="上级菜单"
          placeholder="请选择上级菜单"
          colProps={{span: 12}}
        />
        <ProFormRadio.Group
          width="md"
          name="menuType"
          label="菜单类型"
          colProps={{span: 12}}
          initialValue={'M'}
          options={[
            {
              label: '目录',
              value: 'M',
            },
            {
              label: '菜单',
              value: 'C',
            },
            {
              label: '按钮',
              value: 'F',
            },
          ]}
        />
        <ProFormText
          width="md"
          name="icon"
          label="菜单图标"
          placeholder="点击选择图标"
          colProps={{span: 12}}
          fieldProps={{
            readOnly: true,
            onClick: () => {
              setIconVisible(true)
              console.log(form.current?.getFieldValue('icon'));
            },
            suffix: <SearchOutlined/>,
            // 用于展示已经选择的图标icon
            prefix: currentIcon != '' ? <Icon name={currentIcon}/> : <></>
          }}
        />
        <ProFormText
          width="md"
          name="menuName"
          label="菜单名称"
          placeholder="请输入菜单名称"
          colProps={{span: 12}}
        />
        <ProFormDigit
          width="md"
          label="显示顺序"
          name="orderNum"
          placeholder="请输入显示顺序"
          colProps={{span: 12}}
          min={0}
        />
        <ProFormRadio.Group
          width="md"
          name="isFrame"
          label="是否外链"
          colProps={{span: 12}}
          initialValue={'1'}
          options={[
            {
              label: '是',
              value: '0',
            },
            {
              label: '否',
              value: '1',
            },
          ]}
        />
        <ProFormText
          width="md"
          name="path"
          label="路由地址"
          placeholder="请输入路由地址"
          colProps={{span: 12}}
        />
        <ProFormRadio.Group
          width="md"
          name="visible"
          label="显示状态"
          colProps={{span: 12}}
          initialValue={'0'}
          options={[
            {
              label: '显示',
              value: '0',
            },
            {
              label: '隐藏',
              value: '1',
            },
          ]}
        />
        <ProFormRadio.Group
          width="md"
          name="status"
          label="菜单状态"
          colProps={{span: 12}}
          initialValue={'0'}
          options={[
            {
              label: '正常',
              value: '0',
            },
            {
              label: '停用',
              value: '1',
            },
          ]}
        />
      </ModalForm>
      <IconSelect visible={iconVisible} parentKey={form.current?.getFieldValue('icon')} cancelView={() => setIconVisible(false)} submitView={setIcon}/>

至此自定义图标选择器功能完成。如果大家有更优的解决方法，可以及时留言更正，互相学习。