antd React 图标选择器

关于antd react图标选择器的文章好少，只找到两三篇还都是类组件的，antd版本还很老o(╥﹏╥)o
自己捣鼓了半天终于能使了，所以来分享一下造福大家！

一、图标文件

图标文件，这边我就加了一些网站通用图标，手动搞了一些，不知道怎么把图标全加进去。

@/utils/iconData.js

import * as Icons from '@ant-design/icons';
/**网站通用图标关键字 */
const webIcons = [
  'group',
  'control',
  'control',
  'compass', 
  'appstore',
  'bank',
  'block',
  'calendar',
  'camera',
  'car',
  'expand',
  'heart',
  'holder',
  'home',
  'setting',
  'cloud',
  'like',
  'picture',
  // ...
];

/**网站通用图标 */
const webIconData = {
  group: <Icons.GroupOutlined />,
  compass: <Icons.CompassOutlined />,
  control: <Icons.ControlOutlined />,
  bell: <Icons.BellOutlined />,
  appstore:<Icons.AppstoreOutlined />,
  bank: <Icons.BankOutlined />,
  block: <Icons.BlockOutlined />,
  calendar: <Icons.CalendarOutlined />,
  camera: <Icons.CameraOutlined />,
  car:<Icons.CarOutlined />,
  expand: <Icons.ExpandOutlined />,
  heart: <Icons.HeartOutlined />,
  holder:<Icons.HolderOutlined />,
  home:<Icons.HomeOutlined />,
  setting:<Icons.SettingOutlined />,
  cloud:<Icons.CloudOutlined />,
  like:<Icons.LikeOutlined />,
  picture:<Icons.PictureOutlined />,
  // ...
};

/**全部图标 */
const iconData = {
  // 'unlock':<Icons. />,
  ...webIconData, //网站通用图标
  // ...dataIconData, //数据类图标
  // ...suggestionIconData, //指示性图标
  // ...editIconData, //编辑类图标
  // ...directionIconData, //方向性图标
};

export {
  webIconData,
  iconData,
  webIcons 
};

二、图标选择弹窗

import React from 'react';
import { iconData } from '@/utils/iconData';
import {
  Modal,
  Tabs,
  Radio,
  Space,
  Form
} from 'antd';
import { connect } from 'umi';

const Index = (props) => {
  const { visible, handleOk, handleCancel, form, selectIcon, selectedItem } = props;
  const changeRole = (item) => {
    selectIcon(item)
  };
  return (
    <Modal
      title="图标选择"
      visible={visible}
      width='800px'
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          //初始化选中图标 但是没生效...
          icon: selectedItem || null
        }}
      >
        <Form.Item
          name='icon'
        >
          <Radio.Group onChange={(item) => {changeRole(item.target.value);}} defaultValue={selectedItem || null}>
            <Space direction={'horizontal'} wrap>
              {
                Object.keys(iconData).map((item, index) =>
                  <Radio.Button key={index} value={item}>
                    {iconData[item]}
                  </Radio.Button>
                )
              }
            </Space>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default connect(() => ({}))(Index);

三、使用

import React, { useState } from 'react';
import { Form, Input } from 'antd';
import { SettingOutlined } from '@ant-design/icons';


const [form] = Form.useForm();
const [iconChooseVisible, setIconChooseVisible] = useState(false); // 弹窗是否可见
const [selectedItem, setSelectedItem] = useState(''); // 选中的图标

const openIconChoose = () => { // 打开弹窗
  const icon = form.getFieldsValue().icon;
  setSelectedItem(icon);
  setIconChooseVisible(true);
};
const closeIconChoose = () => { // 关闭弹窗
  setIconChooseVisible(false);
  setSelectedItem();
};
const confirmIconChoose = () => { // 弹窗确认
  form.setFieldsValue({
    icon: selectedItem,
  });
  setIconChooseVisible(false);
};
const selectIcon = (icon) => { // 给组件调用的set方法
  setSelectedItem(icon);
};

表单item和弹窗使用：

<Form form={form}>
  <Form.Item label="菜单图标" name="icon"> //V4 没有 getFieldDecorator,写label和name就好了
    <Input
      addonAfter={<SettingOutlined onClick={openIconChoose} />}
      allowClear
    />
  </Form.Item>
</Form>

<IconModal
  handleCancel={closeIconChoose}
  handleOk={confirmIconChoose}
  visible={iconChooseVisible}
  selectedItem={selectedItem}
  selectIcon={selectIcon}
/>

不是特别完善，勉强能用，属于是抛砖引玉了哈~可以多多提建议