Ant Design of Vue图标选择器_ant 图标选择器

看了一下antDesign并没有图标选择的组件，在网上查找了一下资料发现这篇文章已经实现了下拉选择图标的需求；

antd vue图标选择器https://blog.csdn.net/a2925447584/article/details/116702831

但是实底图标，线性图标，双色图标全部混在了一起，功能虽然已经实现了，但后期用户查找起来比较麻烦，于是打算自己手动写一个图标选择器，实现效果如下：

可对图标风格进行切换 

一、全局图标

main.js中引入全部图标

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as antIcons from "@ant-design/icons-vue";
import RouterIndex from './router/index';
import axios from 'axios';
import VueAxios from 'vue-axios';
 
const app = createApp(App).use(Antd);
app.use(RouterIndex);
 
// 注册组件
Object.keys(antIcons).forEach(key => {
    app.component(key, antIcons[key])
})
// 添加到全局
app.config.globalProperties.$antIcons = antIcons
 
app.mount("#app");

二、图标选择器组件

iconPicker组件

<template>
	<a-radio-group v-model:value="value1" button-style="solid">
		<a-radio-button value="1">线框风格</a-radio-button>
		<a-radio-button value="2">实底风格</a-radio-button>
		<a-radio-button value="3">双色风格</a-radio-button>
	</a-radio-group>
 
	<div style="margin-top: 15px;">
		<span v-for="(item,i) in iconList" class="icons-list">
			<span v-if="value1==1">
				<component class="icon" @click="sendMsg(iconList[i])" v-if="iconList[i].indexOf('Outlined')>0" :is="$antIcons[iconList[i]]" />
			</span>
			<span v-if="value1==2">
				<component class="icon" @click="sendMsg(iconList[i])" v-if="iconList[i].indexOf('Filled')>0" :is="$antIcons[iconList[i]]" />
			</span>
			<span v-if="value1==3">
				<component class="icon" @click="sendMsg(iconList[i])" v-if="iconList[i].indexOf('TwoTone')>0" :is="$antIcons[iconList[i]]" />
			</span>
		</span>
	</div>
 
 
</template>
<script>
	import {
		defineComponent
	} from 'vue';
	import {
		HomeOutlined,
		SettingFilled,
		SmileOutlined,
		SyncOutlined,
		LoadingOutlined,
	} from '@ant-design/icons-vue';
	import iconList from '../iconPicker/icons.json'
 
	export default defineComponent({
		components: {
			HomeOutlined,
			SettingFilled,
			SmileOutlined,
			SyncOutlined,
			LoadingOutlined,
		},
		data() {
			return {
				iconList: iconList,
				value1: "1",
			}
		},
		methods:{
			sendMsg:function(iconText) {
				//func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
				this.$emit('func', iconText)
			}
		},
		created() {
 
		}
 
	});
</script>
<style scoped>
	.icons-list :deep(.anticon) {
		margin-right: 6px;
		font-size: 24px;
	}
 
	.icon:hover {
		background-color: #1890ff;
		color: white;
	}
</style>

需引入的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",
  "BarsO