React + Antd 实现 icon 选择

封装组件 SelectIcon

import React from "react";
import { Select } from "antd";
import Icon from "@ant-design/icons";
import * as icons from "@ant-design/icons";

const SelectIcon = ({ placeholder = "请选择图标", setValue, iconStyle, mode, ...rest }) => {
  // 里面有一些是方法,要筛选一遍,否则页面会报错
  const iconList = Object.keys(icons).filter(
    (item) => typeof icons[item] === "object" && item !== "default"
  );
  const [defaultValue, setDefaultValue] = React.useState();

  const onSelect = (value) => {
    mode === "multiline"
      ? setDefaultValue(value)
      : setDefaultValue([...(defaultValue || []), value]);
    setValue(defaultValue);
  };
  return (
    <Select
      onSelect={onSelect}
      placeholder={placeholder}
      defaultValue={defaultValue}
      showSearch
      allowClear
      optionLabelProp="children"
      mode={mode}
      style={{ width: "100%" }}
      {...rest}>
      {iconList.map((item) => {
        return (
          <Select.Option value={item} key={item}>
            <Icon component={icons[item]} style={{ marginRight: "8px", ...iconStyle }} />
            {item}
          </Select.Option>
        );
      })}
    </Select>
  );
};

export default SelectIcon;

页面使用

import React from "react";
import SelectIcon from "../../../components/Select-Icon";
import Icon from "@ant-design/icons";
import * as icons from "@ant-design/icons";

const Index = () => {
  const [iconValue, setIconValue] = React.useState();
  const setValue = (value) => {
    setIconValue(value);
  };
  return (
    <>
      <div className="main">
        <SelectIcon setValue={setValue} />
        <div>
          选中的图标：
          {iconValue ? <Icon component={icons[iconValue]} style={{ marginRight: "8px" }} /> : "--"}
        </div>
        <div>
          图标名称：
          {iconValue || "--"}
        </div>
      </div>
    </>
  );
};

export default Index;

效果

参数

适应 Ant Design Select 组件的参数 Ant Design Select

参数名	描述
setValue	返回选中图标的 value
iconStyle	下拉框 图标的 style