带有react导航的自定义图标5

基础概念

React 导航通常使用 React Router 来实现页面之间的跳转和管理。自定义图标则是通过 SVG 图标或字体图标库（如 FontAwesome）来实现，以增强用户体验和界面美观度。

类型

SVG 图标：矢量图形，可以无损缩放，适用于各种分辨率的设备。
字体图标：如 FontAwesome，通过 CSS 控制样式，加载速度快。

应用场景

导航栏图标：用于表示不同的导航选项。
按钮图标：用于增强按钮的功能性表达。
状态图标：用于表示某种状态或提示信息。

示例代码

以下是一个使用 React Router 和 FontAwesome 实现自定义导航图标的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faUser, faCog } from '@fortawesome/free-solid-svg-icons';

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">
              <FontAwesomeIcon icon={faHome} /> Home
            </Link>
          </li>
          <li>
            <Link to="/profile">
              <FontAwesomeIcon icon={faUser} /> Profile
            </Link>
          </li>
          <li>
            <Link to="/settings">
              <FontAwesomeIcon icon={faCog} /> Settings
            </Link>
          </li>
        </ul>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/profile" component={Profile} />
      <Route path="/settings" component={Settings} />
    </Router>
  );
};

const Home = () => <h1>Home</h1>;
const Profile = () => <h1>Profile</h1>;
const Settings = () => <h1>Settings</h1>;

export default App;