使用圖示庫

了解如何在 Joy UI 中使用您最愛的圖示庫。

Material UI 圖示

@mui/icons-material 包含 2,100 多個官方 Material Icons，已轉換為 SVG 圖示組件。

安裝

本節假設您已在您的應用程式中安裝 Joy UI — 請參閱安裝以取得說明。

yarn

yarn add @mui/icons-material @mui/material

由於 @mui/material 是 @mui/icons-material 的必要依賴項，您必須使用 yarn resolutions 新增一個變通方法

{
  "dependencies": {
    "@mui/material": "npm:@mui/joy@latest"
  },
  "resolutions": {
    "@mui/material": "npm:@mui/joy@latest"
  }
}

在那之後，在您的終端機中執行 yarn install。

我們已意識到這個限制，並正在考慮移除這個依賴項。您可以在這個 issue 中追蹤進度。

npm

npm install @mui/icons-material @mui/material

由於 @mui/material 是 @mui/icons-material 的必要依賴項，您必須更新您的 bundler 設定以新增一個別名。

如果您使用 webpack，以下是如何操作的範例

webpack.config.js

 module.exports = {
   //...
+  resolve: {
+    alias: {
+      '@mui/material': '@mui/joy',
+    },
+  },
 };

如果您使用 TypeScript，您將需要更新 TSConfig。

tsconfig.json

 {
   "compilerOptions": {
+    "paths": {
+      "@mui/material": ["./node_modules/@mui/joy"]
+    }
   }
 }

使用方法

預設情況下，當 Joy UI 組件的大小或變體變更時，能夠控制圖示的顏色、字體大小和邊距。

Hello World

尺寸

要控制圖示的大小，請使用 fontSize 屬性。值可以是 theme.fontSize 中的其中一個鍵（預設值為 "xl"）。

<Person fontSize="xs" />
<Person fontSize="sm" />
<Person fontSize="md" />
<Person fontSize="lg" />
<Person fontSize="xl" />
<Person fontSize="xl2" />
<Person fontSize="xl3" />
<Person fontSize="xl4" />

<Person fontSize="xs" />
<Person fontSize="sm" />
<Person fontSize="md" />
<Person fontSize="lg" />
<Person fontSize="xl" />
<Person fontSize="xl2" />
<Person fontSize="xl3" />
<Person fontSize="xl4" />

按下 Enter 以開始編輯

第三方圖示

若要在 Joy UI 中使用其他圖示庫、網頁字型圖示或純 SVG 圖示，請套用具有特定 CSS 變數的樣式，如下例所示

import { CssVarsProvider } from '@mui/joy/styles';
import GlobalStyles from '@mui/joy/GlobalStyles';
// The `GlobalStyles` component is used to create a global style sheet.
// You can replace it with your preferred CSS solution.

function App() {
  return (
    <CssVarsProvider>
      <GlobalStyles styles={{
        // The {selector} is the CSS selector to target the icon.
        // We recommend using a class over a tag if possible.
        '{selector}': {
          color: "var(--Icon-color)",
          margin: "var(--Icon-margin)",
          fontSize: "var(--Icon-fontSize, 20px)",
          width: "1em",
          height: "1em"
        }
      }}>
    </CssVarsProvider>
  )
}

Joy UI 組件可以根據其大小和變體控制這些變數，以使圖示完美契合。

使用圖示庫

Material UI 圖示

安裝

yarn

npm

使用方法

尺寸

第三方圖示

react-icons

Ionicons

Heroicons

Bootstrap Icons

Font Awesome Icons

Iconify

Lucide