如何使用功能組件導出 React 圖標？

Question

我得到的錯誤：./src/components/ ./src/components/IconsOne.js Attempted import error: 'TiHome' is not exported from 'react-icons/fa'.

IconsOne.js：

import { TiHome } from 'react-icons/fa';

const IconsOne = () => {
    return (
        <div className="homeIcon">
            <h3>
                <TiHome />
            </h3>
        </div>
    )
}

export default IconsOne

應用程序.js

import './App.css';
import IconsOne from "./components/IconsOne";


function App() {
  return (
    <div className="App">
      <Router>
        <IconsOne />
      </Router>
    </div>
  );
}

export default App;

我正在嘗試構建一個導航欄，第一步是呈現一個主頁圖標。 我使用此頁面獲取有關導入圖標以進行反應的文檔： https://react-icons.github.io/react-icons/並且我要導入的圖標的名稱是TiHome

圖標的鏈接是： https://react-icons.github.io/react-icons/search?q=tihome謝謝。

Answer 1

問題是fa ，這不是 Typicons 的路徑，而是 FontAwesome 的路徑，所以如果你想要 Typicons 的 TiHome，那么根據 react-icons 你必須使用ti路徑，所以：

import { TiHome } from 'react-icons/ti';

const IconsOne = () => {
    return (
        <div className="homeIcon">
            <h3>
                <TiHome />
            </h3>
        </div>
    )
}

export default IconsOne