antdv + vue3图标选择器

Y2000104

于 2024-08-07 13:47:12 发布

阅读量149

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/y2000104/article/details/140989875

版权

一、效果展示

二、使用

1、自定义组件 iconPicker.vue

<template>
  <a-popover
      v-model="visible"
      trigger="focus"
  >
    <template #title>
      <a-input
          v-model:value="searchValue"
          placeholder="输入英文关键词进行搜索"
          @change="filterIcon"
      />
    </template>
 
    <template #content>
      <div class="icon-box">
        <div
            v-for="(item) in iconArr"
            :key="item"
            @click="sendData(item)"
            class="icon-content"
            :style="{ background: icon === item ? '#268961' : ''}"
        >
          <component :is="$icons[item]" />
        </div>
      </div>
    </template>
    <slot name="iconSelect" ></slot>
  </a-popover>
</template>
 
<script lang="ts" setup>
import { defineComponent,ref,watch } from 'vue';
import icons from './icons.json';
defineProps(['sendData'])
const iconArr = ref<string[]>(icons)
const visible = ref<boolean>(false)
const searchValue = ref('')
 
/**
 * 进行搜索过滤
 */
const filterIcon = () => {
  if (searchValue.value){
    iconArr.value = icons.filter(item =>  item.toLowerCase().includes(searchValue.value.toLowerCase()) )
  }else{
    iconArr.value = icons;
  }
}
 
watch(visible,()=>{
  searchValue.value = ''
  iconArr.value = icons;
})
 
</script>
 
<style scoped>
.icon-box{
  overflow: auto;
  font-size: 20px;
  width: 250px;
  height: 230px;
}
 
.icon-content{
  width: 45px;
  height: 40px;
  margin:  5px;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ccc;
  display: inline-block;
}
 
.icon-content:hover{
  background: #1890ff;
}
</style>

2、引入icons.json文件

[
  "AccountBookFilled",
  "AccountBookOutlined",
  "AccountBookTwoTone",
  "AimOutlined",
  "AlertFilled",
  "AlertOutlined",
  "AlertTwoTone",
  "AlibabaOutlined",
  "AlignCenterOutlined",
  "AlignLeftOutlined",
  "AlignRightOutlined",
  "AlipayCircleFilled",
  "AlipayCircleOutlined",
  "AlipayOutlined",
  "AlipaySquareFilled",
  "AliwangwangFilled",
  "AliwangwangOutlined",
  "AliyunOutlined",
  "AmazonCircleFilled",
  "AmazonOutlined",
  "AmazonSquareFilled",
  "AndroidFilled",
  "AndroidOutlined",
  "AntCloudOutlined",
  "AntDesignOutlined",
  "ApartmentOutlined",
  "ApiFilled",
  "ApiOutlined",
  "ApiTwoTone",
  "AppleFilled",
  "AppleOutlined",
  "AppstoreAddOutlined",
  "AppstoreFilled",
  "AppstoreOutlined",
  "AppstoreTwoTone",
  "AreaChartOutlined",
  "ArrowDownOutlined",
  "ArrowLeftOutlined",
  "ArrowRightOutlined",
  "ArrowUpOutlined",
  "ArrowsAltOutlined",
  "AudioFilled",
  "AudioMutedOutlined",
  "AudioOutlined",
  "AudioTwoTone",
  "AuditOutlined",
  "BackwardFilled",
  "BackwardOutlined",
  "BankFilled",
  "BankOutlined",
  "BankTwoTone",
  "BarChartOutlined",
  "BarcodeOutlined",
  "BarsOutlined",
  "BehanceCircleFilled",
  "BehanceOutlined",
  "BehanceSquareFilled",
  "BehanceSquareOutlined",
  "BellFilled",
  "BellOutlined",
  "BellTwoTone",
  "BgColorsOutlined",
  "BlockOutlined",
  "BoldOutlined",
  "BookFilled",
  "BookOutlined",
  "BookTwoTone",
  "BorderBottomOutlined",
  "BorderHorizontalOutlined",
  "BorderInnerOutlined",
  "BorderLeftOutlined",
  "BorderOuterOutlined",
  "BorderOutlined",
  "BorderRightOutlined",
  "BorderTopOutlined",
  "BorderVerticleOutlined",
  "BorderlessTableOutlined",
  "BoxPlotFilled",
  "BoxPlotOutlined",
  "BoxPlotTwoTone",
  "BranchesOutlined",
  "BugFilled",
  "BugOutlined",
  "BugTwoTone",
  "BuildFilled",
  "BuildOutlined",
  "BuildTwoTone",
  "BulbFilled",
  "BulbOutlined",
  "BulbTwoTone",
  "CalculatorFilled",
  "CalculatorOutlined",
  "CalculatorTwoTone",
  "CalendarFilled",
  "CalendarOutlined",
  "CalendarTwoTone",
  "CameraFilled",
  "CameraOutlined",
  "CameraTwoTone",
  "CarFilled",
  "CarOutlined",
  "CarTwoTone",
  "CaretDownFilled",
  "CaretDownOutlined",
  "CaretLeftFilled",
  "CaretLeftOutlined",
  "CaretRightFilled",
  "CaretRightOutlined",
  "CaretUpFilled",
  "CaretUpOutlined",
  "CarryOutFilled",
  "CarryOutOutlined",
  "CarryOutTwoTone",
  "CheckCircleFilled",
  "CheckCircleOutlined",
  "CheckCircleTwoTone",
  "CheckOutlined",
  "CheckSquareFilled",
  "CheckSquareOutlined",
  "CheckSquareTwoTone",
  "ChromeFilled",
  "ChromeOutlined",
  "CiCircleFilled",
  "CiCircleOutlined",
  "CiCircleTwoTone",
  "CiOutlined",
  "CiTwoTone",
  "ClearOutlined",
  "ClockCircleFilled",
  "ClockCircleOutlined",
  "ClockCircleTwoTone",
  "CloseCircleFilled",
  "CloseCircleOutlined",
  "CloseCircleTwoTone",
  "CloseOutlined",
  "CloseSquareFilled",
  "CloseSquareOutlined",
  "CloseSquareTwoTone",
  "CloudDownloadOutlined",
  "CloudFilled",
  "CloudOutlined",
  "CloudServerOutlined",
  "CloudSyncOutlined",
  "CloudTwoTone",
  "CloudUploadOutlined",
  "ClusterOutlined",
  "CodeFilled",
  "CodeOutlined",
  "CodeSandboxCircleFilled",
  "CodeSandboxOutlined",
  "CodeSandboxSquareFilled",
  "CodeTwoTone",
  "CodepenCircleFilled",
  "CodepenCircleOutlined",
  "CodepenOutlined",
  "CodepenSquareFilled",
  "CoffeeOutlined",
  "ColumnHeightOutlined",
  "ColumnWidthOutlined",
  "CommentOutlined",
  "CompassFilled",
  "CompassOutlined",
  "CompassTwoTone",
  "CompressOutlined",
  "ConsoleSqlOutlined",
  "ContactsFilled",
  "ContactsOutlined",
  "ContactsTwoTone",
  "ContainerFilled",
  "ContainerOutlined",
  "ContainerTwoTone",
  "ControlFilled",
  "ControlOutlined",
  "ControlTwoTone",
  "CopyFilled",
  "CopyOutlined",
  "CopyTwoTone",
  "CopyrightCircleFilled",
  "CopyrightCircleOutlined",
  "CopyrightCircleTwoTone",
  "CopyrightOutlined",
  "CopyrightTwoTone",
  "CreditCardFilled",
  "CreditCardOutlined",
  "CreditCardTwoTone",
  "CrownFilled",
  "CrownOutlined",
  "CrownTwoTone",
  "CustomerServiceFilled",
  "CustomerServiceOutlined",
  "CustomerServiceTwoTone",
  "DashOutlined",
  "DashboardFilled",
  "DashboardOutlined",
  "DashboardTwoTone",
  "DatabaseFilled",
  "DatabaseOutlined",
  "DatabaseTwoTone",
  "DeleteColumnOutlined",
  "DeleteFilled",
  "DeleteOutlined",
  "DeleteRowOutlined",
  "DeleteTwoTone",
  "DeliveredProcedureOutlined",
  "DeploymentUnitOutlined",
  "DesktopOutlined",
  "DiffFilled",
  "DiffOutlined",
  "DiffTwoTone",
  "DingdingOutlined",
  "DingtalkCircleFilled",
  "DingtalkOutlined",
  "DingtalkSquareFilled",
  "DisconnectOutlined",
  "DislikeFilled",
  "DislikeOutlined",
  "DislikeTwoTone",
  "DollarCircleFilled",
  "DollarCircleOutlined",
  "DollarCircleTwoTone",
  "DollarOutlined",
  "DollarTwoTone",
  "DotChartOutlined",
  "DoubleLeftOutlined",
  "DoubleRightOutlined",
  "DownCircleFilled",
  "DownCircleOutlined",
  "DownCircleTwoTone",
  "DownOutlined",
  "DownSquareFilled",
  "DownSquareOutlined",
  "DownSquareTwoTone",
  "DownloadOutlined",
  "DragOutlined",
  "DribbbleCircleFilled",
  "DribbbleOutlined",
  "DribbbleSquareFilled",
  "DribbbleSquareOutlined",
  "DropboxCircleFilled",
  "DropboxOutlined",
  "DropboxSquareFilled",
  "EditFilled",
  "EditOutlined",
  "EditTwoTone",
  "EllipsisOutlined",
  "EnterOutlined",
  "EnvironmentFilled",
  "EnvironmentOutlined",
  "EnvironmentTwoTone",
  "EuroCircleFilled",
  "EuroCircleOutlined",
  "EuroCircleTwoTone",
  "EuroOutlined",
  "EuroTwoTone",
  "ExceptionOutlined",
  "ExclamationCircleFilled",
  "ExclamationCircleOutlined",
  "ExclamationCircleTwoTone",
  "ExclamationOutlined",
  "ExpandAltOutlined",
  "ExpandOutlined",
  "ExperimentFilled",
  "ExperimentOutlined",
  "ExperimentTwoTone",
  "ExportOutlined",
  "EyeFilled",
  "EyeInvisibleFilled",
  "EyeInvisibleOutlined",
  "EyeInvisibleTwoTone",
  "EyeOutlined",
  "EyeTwoTone",
  "FacebookFilled",
  "FacebookOutlined",
  "FallOutlined",
  "FastBackwardFilled",
  "FastBackwardOutlined",
  "FastForwardFilled",
  "FastForwardOutlined",
  "FieldBinaryOutlined",
  "FieldNumberOutlined",
  "FieldStringOutlined",
  "FieldTimeOutlined",
  "FileAddFilled",
  "FileAddOutlined",
  "FileAddTwoTone",
  "FileDoneOutlined",
  "FileExcelFilled",
  "FileExcelOutlined",
  "FileExcelTwoTone",
  "FileExclamationFilled",
  "FileExclamationOutlined",
  "FileExclamationTwoTone",
  "FileFilled",
  "FileGifOutlined",
  "FileImageFilled",
  "FileImageOutlined",
  "FileImageTwoTone",
  "FileJpgOutlined",
  "FileMarkdownFilled",
  "FileMarkdownOutlined",
  "FileMarkdownTwoTone",
  "FileOutlined",
  "FilePdfFilled",
  "FilePdfOutlined",
  "FilePdfTwoTone",
  "FilePptFilled",
  "FilePptOutlined",
  "FilePptTwoTone",
  "FileProtectOutlined",
  "FileSearchOutlined",
  "FileSyncOutlined",
  "FileTextFilled",
  "FileTextOutlined",
  "FileTextTwoTone",
  "FileTwoTone",
  "FileUnknownFilled",
  "FileUnknownOutlined",
  "FileUnknownTwoTone",
  "FileWordFilled",
  "FileWordOutlined",
  "FileWordTwoTone",
  "FileZipFilled",
  "FileZipOutlined",
  "FileZipTwoTone",
  "FilterFilled",
  "FilterOutlined",
  "FilterTwoTone",
  "FireFilled",
  "FireOutlined",
  "FireTwoTone",
  "FlagFilled",
  "FlagOutlined",
  "FlagTwoTone",
  "FolderAddFilled",
  "FolderAddOutlined",
  "FolderAddTwoTone",
  "FolderFilled",
  "FolderOpenFilled",
  "FolderOpenOutlined",
  "FolderOpenTwoTone",
  "FolderOutlined",
  "FolderTwoTone",
  "FolderViewOutlined",
  "FontColorsOutlined",
  "FontSizeOutlined",
  "ForkOutlined",
  "FormOutlined",
  "FormatPainterFilled",
  "FormatPainterOutlined",
  "ForwardFilled",
  "ForwardOutlined",
  "FrownFilled",
  "FrownOutlined",
  "FrownTwoTone",
  "FullscreenExitOutlined",
  "FullscreenOutlined",
  "FunctionOutlined",
  "FundFilled",
  "FundOutlined",
  "FundProjectionScreenOutlined",
  "FundTwoTone",
  "FundViewOutlined",
  "FunnelPlotFilled",
  "FunnelPlotOutlined",
  "FunnelPlotTwoTone",
  "GatewayOutlined",
  "GifOutlined",
  "GiftFilled",
  "GiftOutlined",
  "GiftTwoTone",
  "GithubFilled",
  "GithubOutlined",
  "GitlabFilled",
  "GitlabOutlined",
  "GlobalOutlined",
  "GoldFilled",
  "GoldOutlined",
  "GoldTwoTone",
  "GoldenFilled",
  "GoogleCircleFilled",
  "GoogleOutlined",
  "GooglePlusCircleFilled",
  "GooglePlusOutlined",
  "GooglePlusSquareFilled",
  "GoogleSquareFilled",
  "GroupOutlined",
  "HddFilled",
  "HddOutlined",
  "HddTwoTone",
  "HeartFilled",
  "HeartOutlined",
  "HeartTwoTone",
  "HeatMapOutlined",
  "HighlightFilled",
  "HighlightOutlined",
  "HighlightTwoTone",
  "HistoryOutlined",
  "HomeFilled",
  "HomeOutlined",
  "HomeTwoTone",
  "HourglassFilled",
  "HourglassOutlined",
  "HourglassTwoTone",
  "Html5Filled",
  "Html5Outlined",
  "Html5TwoTone",
  "IdcardFilled",
  "IdcardOutlined",
  "IdcardTwoTone",
  "IeCircleFilled",
  "IeOutlined",
  "IeSquareFilled",
  "ImportOutlined",
  "InboxOutlined",
  "InfoCircleFilled",
  "InfoCircleOutlined",
  "InfoCircleTwoTone",
  "InfoOutlined",
  "InsertRowAboveOutlined",
  "InsertRowBelowOutlined",
  "InsertRowLeftOutlined",
  "InsertRowRightOutlined",
  "InstagramFilled",
  "InstagramOutlined",
  "InsuranceFilled",
  "InsuranceOutlined",
  "InsuranceTwoTone",
  "InteractionFilled",
  "InteractionOutlined",
  "InteractionTwoTone",
  "IssuesCloseOutlined",
  "ItalicOutlined",
  "KeyOutlined",
  "LaptopOutlined",
  "LayoutFilled",
  "LayoutOutlined",
  "LayoutTwoTone",
  "LeftCircleFilled",
  "LeftCircleOutlined",
  "LeftCircleTwoTone",
  "LeftOutlined",
  "LeftSquareFilled",
  "LeftSquareOutlined",
  "LeftSquareTwoTone",
  "LikeFilled",
  "LikeOutlined",
  "LikeTwoTone",
  "LineChartOutlined",
  "LineHeightOutlined",
  "LineOutlined",
  "LinkOutlined",
  "LinkedinFilled",
  "LinkedinOutlined",
  "Loading3QuartersOutlined",
  "LoadingOutlined",
  "LockFilled",
  "LockOutlined",
  "LockTwoTone",
  "LoginOutlined",
  "LogoutOutlined",
  "MacCommandFilled",
  "MacCommandOutlined",
  "MailFilled",
  "MailOutlined",
  "MailTwoTone",
  "ManOutlined",
  "MedicineBoxFilled",
  "MedicineBoxOutlined",
  "MedicineBoxTwoTone",
  "MediumCircleFilled",
  "MediumOutlined",
  "MediumSquareFilled",
  "MediumWorkmarkOutlined",
  "MehFilled",
  "MehOutlined",
  "MehTwoTone",
  "MenuFoldOutlined",
  "MenuOutlined",
  "MenuUnfoldOutlined",
  "MergeCellsOutlined",
  "MessageFilled",
  "MessageOutlined",
  "MessageTwoTone",
  "MinusCircleFilled",
  "MinusCircleOutlined",
  "MinusCircleTwoTone",
  "MinusOutlined",
  "MinusSquareFilled",
  "MinusSquareOutlined",
  "MinusSquareTwoTone",
  "MobileFilled",
  "MobileOutlined",
  "MobileTwoTone",
  "MoneyCollectFilled",
  "MoneyCollectOutlined",
  "MoneyCollectTwoTone",
  "MonitorOutlined",
  "MoreOutlined",
  "NodeCollapseOutlined",
  "NodeExpandOutlined",
  "NodeIndexOutlined",
  "NotificationFilled",
  "NotificationOutlined",
  "NotificationTwoTone",
  "NumberOutlined",
  "OneToOneOutlined",
  "OrderedListOutlined",
  "PaperClipOutlined",
  "PartitionOutlined",
  "PauseCircleFilled",
  "PauseCircleOutlined",
  "PauseCircleTwoTone",
  "PauseOutlined",
  "PayCircleFilled",
  "PayCircleOutlined",
  "PercentageOutlined",
  "PhoneFilled",
  "PhoneOutlined",
  "PhoneTwoTone",
  "PicCenterOutlined",
  "PicLeftOutlined",
  "PicRightOutlined",
  "PictureFilled",
  "PictureOutlined",
  "PictureTwoTone",
  "PieChartFilled",
  "PieChartOutlined",
  "PieChartTwoTone",
  "PlayCircleFilled",
  "PlayCircleOutlined",
  "PlayCircleTwoTone",
  "PlaySquareFilled",
  "PlaySquareOutlined",
  "PlaySquareTwoTone",
  "PlusCircleFilled",
  "PlusCircleOutlined",
  "PlusCircleTwoTone",
  "PlusOutlined",
  "PlusSquareFilled",
  "PlusSquareOutlined",
  "PlusSquareTwoTone",
  "PoundCircleFilled",
  "PoundCircleOutlined",
  "PoundCircleTwoTone",
  "PoundOutlined",
  "PoweroffOutlined",
  "PrinterFilled",
  "PrinterOutlined",
  "PrinterTwoTone",
  "ProfileFilled",
  "ProfileOutlined",
  "ProfileTwoTone",
  "ProjectFilled",
  "ProjectOutlined",
  "ProjectTwoTone",
  "PropertySafetyFilled",
  "PropertySafetyOutlined",
  "PropertySafetyTwoTone",
  "PullRequestOutlined",
  "PushpinFilled",
  "PushpinOutlined",
  "PushpinTwoTone",
  "QqCircleFilled",
  "QqOutlined",
  "QqSquareFilled",
  "QrcodeOutlined",
  "QuestionCircleFilled",
  "QuestionCircleOutlined",
  "QuestionCircleTwoTone",
  "QuestionOutlined",
  "RadarChartOutlined",
  "RadiusBottomleftOutlined",
  "RadiusBottomrightOutlined",
  "RadiusSettingOutlined",
  "RadiusUpleftOutlined",
  "RadiusUprightOutlined",
  "ReadFilled",
  "ReadOutlined",
  "ReconciliationFilled",
  "ReconciliationOutlined",
  "ReconciliationTwoTone",
  "RedEnvelopeFilled",
  "RedEnvelopeOutlined",
  "RedEnvelopeTwoTone",
  "RedditCircleFilled",
  "RedditOutlined",
  "RedditSquareFilled",
  "RedoOutlined",
  "ReloadOutlined",
  "RestFilled",
  "RestOutlined",
  "RestTwoTone",
  "RetweetOutlined",
  "RightCircleFilled",
  "RightCircleOutlined",
  "RightCircleTwoTone",
  "RightOutlined",
  "RightSquareFilled",
  "RightSquareOutlined",
  "RightSquareTwoTone",
  "RiseOutlined",
  "RobotFilled",
  "RobotOutlined",
  "RocketFilled",
  "RocketOutlined",
  "RocketTwoTone",
  "RollbackOutlined",
  "RotateLeftOutlined",
  "RotateRightOutlined",
  "SafetyCertificateFilled",
  "SafetyCertificateOutlined",
  "SafetyCertificateTwoTone",
  "SafetyOutlined",
  "SaveFilled",
  "SaveOutlined",
  "SaveTwoTone",
  "ScanOutlined",
  "ScheduleFilled",
  "ScheduleOutlined",
  "ScheduleTwoTone",
  "ScissorOutlined",
  "SearchOutlined",
  "SecurityScanFilled",
  "SecurityScanOutlined",
  "SecurityScanTwoTone",
  "SelectOutlined",
  "SendOutlined",
  "SettingFilled",
  "SettingOutlined",
  "SettingTwoTone",
  "ShakeOutlined",
  "ShareAltOutlined",
  "ShopFilled",
  "ShopOutlined",
  "ShopTwoTone",
  "ShoppingCartOutlined",
  "ShoppingFilled",
  "ShoppingOutlined",
  "ShoppingTwoTone",
  "ShrinkOutlined",
  "SignalFilled",
  "SisternodeOutlined",
  "SketchCircleFilled",
  "SketchOutlined",
  "SketchSquareFilled",
  "SkinFilled",
  "SkinOutlined",
  "SkinTwoTone",
  "SkypeFilled",
  "SkypeOutlined",
  "SlackCircleFilled",
  "SlackOutlined",
  "SlackSquareFilled",
  "SlackSquareOutlined",
  "SlidersFilled",
  "SlidersOutlined",
  "SlidersTwoTone",
  "SmallDashOutlined",
  "SmileFilled",
  "SmileOutlined",
  "SmileTwoTone",
  "SnippetsFilled",
  "SnippetsOutlined",
  "SnippetsTwoTone",
  "SolutionOutlined",
  "SortAscendingOutlined",
  "SortDescendingOutlined",
  "SoundFilled",
  "SoundOutlined",
  "SoundTwoTone",
  "SplitCellsOutlined",
  "StarFilled",
  "StarOutlined",
  "StarTwoTone",
  "StepBackwardFilled",
  "StepBackwardOutlined",
  "StepForwardFilled",
  "StepForwardOutlined",
  "StockOutlined",
  "StopFilled",
  "StopOutlined",
  "StopTwoTone",
  "StrikethroughOutlined",
  "SubnodeOutlined",
  "SwapLeftOutlined",
  "SwapOutlined",
  "SwapRightOutlined",
  "SwitcherFilled",
  "SwitcherOutlined",
  "SwitcherTwoTone",
  "SyncOutlined",
  "TableOutlined",
  "TabletFilled",
  "TabletOutlined",
  "TabletTwoTone",
  "TagFilled",
  "TagOutlined",
  "TagTwoTone",
  "TagsFilled",
  "TagsOutlined",
  "TagsTwoTone",
  "TaobaoCircleFilled",
  "TaobaoCircleOutlined",
  "TaobaoOutlined",
  "TaobaoSquareFilled",
  "TeamOutlined",
  "ThunderboltFilled",
  "ThunderboltOutlined",
  "ThunderboltTwoTone",
  "ToTopOutlined",
  "ToolFilled",
  "ToolOutlined",
  "ToolTwoTone",
  "TrademarkCircleFilled",
  "TrademarkCircleOutlined",
  "TrademarkCircleTwoTone",
  "TrademarkOutlined",
  "TransactionOutlined",
  "TranslationOutlined",
  "TrophyFilled",
  "TrophyOutlined",
  "TrophyTwoTone",
  "TwitterCircleFilled",
  "TwitterOutlined",
  "TwitterSquareFilled",
  "UnderlineOutlined",
  "UndoOutlined",
  "UngroupOutlined",
  "UnlockFilled",
  "UnlockOutlined",
  "UnlockTwoTone",
  "UnorderedListOutlined",
  "UpCircleFilled",
  "UpCircleOutlined",
  "UpCircleTwoTone",
  "UpOutlined",
  "UpSquareFilled",
  "UpSquareOutlined",
  "UpSquareTwoTone",
  "UploadOutlined",
  "UsbFilled",
  "UsbOutlined",
  "UsbTwoTone",
  "UserAddOutlined",
  "UserDeleteOutlined",
  "UserOutlined",
  "UserSwitchOutlined",
  "UsergroupAddOutlined",
  "UsergroupDeleteOutlined",
  "VerifiedOutlined",
  "VerticalAlignBottomOutlined",
  "VerticalAlignMiddleOutlined",
  "VerticalAlignTopOutlined",
  "VerticalLeftOutlined",
  "VerticalRightOutlined",
  "VideoCameraAddOutlined",
  "VideoCameraFilled",
  "VideoCameraOutlined",
  "VideoCameraTwoTone",
  "WalletFilled",
  "WalletOutlined",
  "WalletTwoTone",
  "WarningFilled",
  "WarningOutlined",
  "WarningTwoTone",
  "WechatFilled",
  "WechatOutlined",
  "WeiboCircleFilled",
  "WeiboCircleOutlined",
  "WeiboOutlined",
  "WeiboSquareFilled",
  "WeiboSquareOutlined",
  "WhatsAppOutlined",
  "WifiOutlined",
  "WindowsFilled",
  "WindowsOutlined",
  "WomanOutlined",
  "YahooFilled",
  "YahooOutlined",
  "YoutubeFilled",
  "YoutubeOutlined",
  "YuqueFilled",
  "YuqueOutlined",
  "ZhihuCircleFilled",
  "ZhihuOutlined",
  "ZhihuSquareFilled",
  "ZoomInOutlined",
  "ZoomOutOutlined"
]

3、使用

<template>
<icon-picker :sendData="getSonData">
          <template #iconSelect>
            <a-input v-model:value="formState.icon" >
              <template #prefix>
                <component :is="$icons[formState.icon]" />
              </template>
            </a-input>
          </template>
        </icon-picker>
</template>
 
<script lang="ts" setup>
const getSonData = (data) => {
  formState.icon = data;
  console.log("子组件中的数据：",data)
}
</script>

三、main.ts

1、因为使用的是动态图标，所以你还得做以下配置

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import './assets/icon/iconfont.css'
import * as Icons from '@ant-design/icons-vue'
import { nextTick } from "@vue/runtime-core"
// 屏蔽黄色警告信息
app.config.warnHandler = () => null;
app.use(Antd).mount('#app');
nextTick(() => {
    // 配置全局对象
    app.config.globalProperties.$icons = Icons
    // Antd 注入全部图标（这样注入之后，就可以全局直接使用 icon 组件，不需要每个页面去引入了）
    for (const key in Icons) { app.component(key, Icons[key]) }
})