搭建一個自定義的 React 圖標庫可以讓你在多個項目中復用統一的圖標資源，同時支持按需加載、主題化和靈活的配置。以下是詳細的步驟指南：

---

1. 設計圖標庫結構

首先規劃圖標庫的目錄結構和功能：

my-react-icons/
├── src/
│   ├── icons/          # 存放 SVG 或圖標組件
│   │   ├── Home.jsx    # 單個圖標組件
│   │   └── Search.jsx
│   ├── index.js        # 統一導出所有圖標
│   └── IconProvider.js # 可選：主題/全局配置
├── package.json
└── README.md

---

2. 創建圖標組件

方式 1：直接使用 SVG

將 SVG 轉換為 React 組件（推薦使用 SVGR 工具自動轉換）：

// src/icons/Home.jsx
export const Home = (props) => (<svg{...props}viewBox="0 0 24 24"fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
);

方式 2：抽象通用圖標組件

統一處理樣式和屬性：

// src/icons/IconBase.jsx
export const IconBase = ({ size = 24, color = 'currentColor', children, ...props }) => (<svgwidth={size}height={size}viewBox="0 0 24 24"fill={color}xmlns="http://www.w3.org/2000/svg"{...props}>{children}</svg>
);// src/icons/Home.jsx
import { IconBase } from './IconBase';
export const Home = (props) => (<IconBase {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></IconBase>
);

---

3. 統一導出圖標

在 src/index.js 中集中導出所有圖標：

export * from './icons/Home';
export * from './icons/Search';
// 或動態批量導出（需配置構建工具）

---

4. 添加主題/全局配置（可選）

通過 Context 實現主題化：

// src/IconProvider.jsx
import React from 'react';
const IconContext = React.createContext({size: 24,color: '#000',
});export const IconProvider = ({ children, ...config }) => (<IconContext.Provider value={config}>{children}</IconContext.Provider>
);export const useIconContext = () => React.useContext(IconContext);

在圖標組件中使用配置：

// src/icons/Home.jsx
import { IconBase } from './IconBase';
import { useIconContext } from '../IconProvider';export const Home = (props) => {const { size, color } = useIconContext();return (<IconBase size={size} color={color} {...props}><path d="..." /></IconBase>);
};

---

5. 配置構建工具

使用 Rollup 打包（推薦）

安裝依賴：

npm install rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

創建 rollup.config.js：

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';export default {input: 'src/index.js',output: [{file: 'dist/index.js',format: 'cjs', // CommonJS 格式},{file: 'dist/index.esm.js',format: 'esm', // ES Module 格式},],plugins: [resolve(),commonjs(),babel({ babelHelpers: 'bundled' }),],external: ['react'], // 避免打包 React
};

---

6. 發布到 npm

1. 配置 package.json：

   {"name": "my-react-icons","version": "1.0.0","main": "dist/index.js",        // CommonJS 入口"module": "dist/index.esm.js",  // ES Module 入口"files": ["dist"],"peerDependencies": {"react": ">=16.8.0"}
   }
   

2. 登錄 npm 并發布：

   npm login
   npm publish
   

---

7. 在項目中使用

安裝你的圖標庫：

npm install my-react-icons

使用示例：

import { Home } from 'my-react-icons';function App() {return (<IconProvider size={30} color="red"><Home /></IconProvider>);
}

---

高級優化

1. 按需加載：
   配合 Babel 插件（如 babel-plugin-import）實現按需引入。
2. Tree Shaking：
   確保 ES Module 格式支持，并在 package.json 中設置 "sideEffects": false。
3. TypeScript 支持：
   添加 index.d.ts 類型定義文件。
4. 文檔生成：
   使用 Storybook 或 Docusaurus 創建交互式文檔。

---

完整模板參考

• react-icons-boilerplate
• SVGR 模板

通過以上步驟，你可以構建一個靈活、高性能的 React 圖標庫！