【antd】antd 4.X Icon组件引入及使用方式变更

目录

一、Icon引入方式变更

二、Icon使用方式变更

三、使用示例

---

一、Icon引入方式变更

从直接对其在antd引入Icon

import { Icon } from 'antd'

变更为从 @ant-design/icons 引入 对应的名称

代码如下：

import { LeftOutlined } from '@ant-design/icons'

二、Icon使用方式变更

使用时不再是在Icon组件api type中填写对应图标名称

 <Icon type="smile" /> 

变更为直接使用该图标对应的名称为组件

代码如下：

<LeftOutlined style={{ marginRight: '5px' }}/>

三、使用示例

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


class XXXX extends React.Component {
    ......

    render() {
        return( 
            ......
            <LeftOutlined style={{ marginRight: '5px' }}/>

        )

    }

}

展示效果(如下图)：