使用图标库

了解如何在 Joy UI 中使用您最喜欢的图标库。

Material UI 图标

@mui/icons-material 包括 2,100 多个官方 Material 图标转换为 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 组件的尺寸或变体更改时，它们能够控制图标的颜色、字体大小和边距。

你好，世界

尺寸

要控制图标的大小，请使用 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 开始编辑

第三方图标

要将其他图标库、Web 字体图标或纯 SVG 图标与 Joy UI 一起使用，请应用具有特定 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 图标

Font Awesome 图标

Iconify

Lucide