react icon 如何做

在 React 中使用图标的方法

安装图标库
React 项目可以通过流行的图标库（如 react-icons）快速集成图标。运行以下命令安装：

npm install react-icons

引入图标组件
从 react-icons 中按需导入具体图标。例如使用 Font Awesome 的图标：

import { FaReact } from "react-icons/fa";

在组件中使用
直接以组件形式调用图标，可通过 size 和 color 等属性自定义样式：

function App() {
  return <FaReact size={40} color="#61DAFB" />;
}

自定义 SVG 图标的方法

内联 SVG
将 SVG 代码直接嵌入组件，便于控制样式和交互：

function CustomIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M12 2L4 12l8 10 8-10z" fill="currentColor" />
    </svg>
  );
}

动态导入 SVG 文件
使用 @svgr/webpack 将 SVG 转换为 React 组件。配置 Webpack 后，可直接导入：

import StarIcon from './star.svg';
function App() {
  return <StarIcon />;
}

优化图标性能的建议

按需加载
避免全量引入图标库，仅导入需要的图标以减少打包体积。例如：

import FaReact from "react-icons/fa/FaReact";

使用图标精灵图（Sprite）
将多个 SVG 合并为精灵图，减少 HTTP 请求：

<svg>
  <use xlinkHref="/sprite.svg#react-icon" />
</svg>

懒加载非关键图标
对非首屏图标使用 React.lazy 动态加载：

const LazyIcon = React.lazy(() => import('./LazyIcon'));