当前位置：首页 > React

react如何给菜单添加图标

2026-01-25 07:36:19React

使用第三方图标库（如Font Awesome）

安装Font Awesome库：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

在组件中引入并使用：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome } from '@fortawesome/free-solid-svg-icons'

function MenuItem() {
  return (
    <li>
      <FontAwesomeIcon icon={faHome} />
      <span>Home</span>
    </li>
  )
}

使用SVG内联图标

直接将SVG代码嵌入组件：

react如何给菜单添加图标

function MenuItem() {
  return (
    <li>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span>Dashboard</span>
    </li>
  )
}

使用Material-UI图标

安装Material-UI图标包：

npm install @mui/icons-material

在组件中使用：

react如何给菜单添加图标

import HomeIcon from '@mui/icons-material/Home'

function Menu() {
  return (
    <ul>
      <li>
        <HomeIcon />
        <span>Home</span>
      </li>
    </ul>
  )
}

使用CSS背景图标

通过CSS添加背景图片：

const menuItemStyle = {
  backgroundImage: 'url(icon-home.png)',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'left center',
  paddingLeft: '24px'
}

function MenuItem() {
  return <li style={menuItemStyle}>Home</li>
}

使用React Icons库

安装React Icons：

npm install react-icons

使用示例：

import { FaHome } from 'react-icons/fa'

function Menu() {
  return (
    <ul>
      <li>
        <FaHome />
        <span>Home</span>
      </li>
    </ul>
  )
}