[Ant Design] Attempted import error: 'Icon' is not exported from 'antd'.

Attempted import error: 'Icon' is not exported from 'antd'.

Footer.js에 아이콘을 넣었더니

이런 에러가 뜸

감사하게도 아래 블로그에서 해결책을 찾을 수 있었다!

---

방법 1. antd 재설치 및 코드 수정

[오류해결] 'Icon' is not exported from 'antd'

import 코드를 바꿔준 뒤

import React, { useState } from 'react';
import Icon from '@ant-design/icons';

function Footer() {
    return (
        <div style={{
            height: '80px', display: 'flex',
            flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', fontSize:'1rem'
        }}>
           <p> Happy Coding <Icon type="smile" /></p>
        </div>
    )
}

export default Footer

터미널에서 npm install @ant-design/icons --save-dev 입력해 설치 후 재실행

NavBar.js도 마찬가지로 밑줄 친 부분에 유의하며 코드를 수정하자

import React, { useState } from 'react';
import LeftMenu from './Sections/LeftMenu';
import RightMenu from './Sections/RightMenu';
import { Drawer, Button } from 'antd';
import Icon from '@ant-design/icons';
import './Sections/Navbar.css';

function NavBar() {
  const [visible, setVisible] = useState(false)

  const showDrawer = () => {
    setVisible(true)
  };

  const onClose = () => {
    setVisible(false)
  };

    return (
        <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}>
      <div className="menu__logo">
        <a href="/">Logo</a>
      </div>
      <div className="menu__container">
        <div className="menu_left">
          <LeftMenu mode="horizontal" />
        </div>
        <div className="menu_rigth">
          <RightMenu mode="horizontal" />
        </div>
        <Button
          className="menu__mobile-button"
          type="primary"
          onClick={showDrawer}
        >
          <Icon type="align-right" />
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          className="menu_drawer"
          closable={false}
          onClose={onClose}
          visible={visible}
        >
          <LeftMenu mode="inline" />
          <RightMenu mode="inline" />
        </Drawer>
      </div>
    </nav>
    )
}

export default NavBar

컴파일은 되지만 아직 아이콘이 안 보임

---

방법 2. 설치 명령어 변경

앤트디자인 에러(Ant Design Error) Warning: [@ant-design/icons] Should have `component` prop or `children`.

---

방법 3. 코드 변경

앤트디자인 아이콘 에러/미표시 문제(Ant Design Error)