图标可选择配置

平生不会相思，才会相思，便害相思。

图标可选择配置

• 将图标做成可选择的选项

1. 阿里云矢量图标库选择图标并下载

2. 将下载文件的 json 文件引入项目

import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import { getFormList, fetchLink } from '../service';
import styles from './index.less';
import { createFromIconfontCN } from '@ant-design/icons';
import iconFont from '@/utils/iconfont';
import iconData from '@/utils/iconfont.json';

const IconFont = createFromIconfontCN({
  scriptUrl: iconFont,
});

return (
  <Form>
    <Form.Item label="选择图标" name="icon">
      <Select placeholder="请选择图标" allowClear>
        {iconData.glyphs.map((val, ind) => (
          <Option key={ind} value={val.font_class}>
            <IconFont type={`icon-${val.font_class}`}></IconFont>
          </Option>
        ))}
      </Select>
    </Form.Item>
  </Form>
);

3. 菜单展示

import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import { getFormList, fetchLink } from '../service';
import styles from './index.less';
import { createFromIconfontCN } from '@ant-design/icons';
import iconFont from '@/utils/iconfont';
import iconData from '@/utils/iconfont.json';

const IconFont = createFromIconfontCN({
  scriptUrl: iconFont,
});

return (
  <SubMenu
    icon={
      <Dropdown overlay={() => menu(item)} placement="bottomLeft" arrow>
        <MenuOutlined />
      </Dropdown>
    }
    title={item.group_name}
    key={item.group_id + item.group_name}
  >
    {item.children &&
      item.children.map((val) => (
        <Menu.Item
          title={val.name}
          key={val.id}
          icon={<IconFont type={`icon-${val.icon}`} />}
          onClick={() => {
            setVisiblePlugIn(true), setMenuDetail(val);
          }}
        >
          <a>{val.name}</a>
        </Menu.Item>
      ))}
  </SubMenu>
);

4. 效果