如何在Ant设计中将图标组件嵌套在输入组件中

import React from 'react';
import { Input, Icon } from 'antd';

const { Search } = Input;

const App = () => (
  <div>
    {/* 基本用法 */}
    <Input
      placeholder="input search text"
      prefix={<Icon type="search" />}
      suffix={<Icon type="setting" />}
    />

    {/* 使用Search组件 */}
    <Search
      placeholder="input search text"
      enterButton="Search"
      onSearch={(direction, value) => console.log(value)}
    />
  </div>
);

export default App;

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

<Input prefix={<IconFont type="icon-example" />} />

<Input
  prefix={<Icon type="search" style={{ marginRight: 8 }} />}
  suffix={<Icon type="setting" style={{ marginLeft: 8 }} />}
/>