how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Files
master
react-test/docs/data/joy/integrations/icon-libraries/icon-libraries.md

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

216 lines
7.9 KiB
Markdown
Raw Permalink Normal View History

init project
2025-12-12 14:26:25 +09:00
# Using icon libraries
<p class="description">Learn how to use your favorite icon library with Joy UI.</p>
## Material UI Icons
[@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material)
includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [SVG Icon](/material-ui/api/svg-icon/) components.
### Installation
This section assumes that you've already installed Joy UI in your app—see [Installation](/joy-ui/getting-started/installation/) for instructions.
#### yarn
```bash
yarn add @mui/icons-material @mui/material
```
:::warning
Because `@mui/material` is a required dependency of `@mui/icons-material`, you have to add a workaround with yarn resolutions:
```json
{
"dependencies": {
"@mui/material": "npm:@mui/joy@latest"
},
"resolutions": {
"@mui/material": "npm:@mui/joy@latest"
}
}
```
After that, run `yarn install` in your terminal.
We are aware of this limitation and are considering removing the dependency.
You can keep track of the progress in [this issue](https://github.com/mui/material-ui/issues/34489).
:::
#### npm
```bash
npm install @mui/icons-material @mui/material
```
:::warning
Because `@mui/material` is a required dependency of `@mui/icons-material`, you have to update your bundler's config to add an alias.
Here is an example of how you can do it, if you use [webpack](https://webpack.js.org/):
**webpack.config.js**
```diff
module.exports = {
//...
+ resolve: {
+ alias: {
+ '@mui/material': '@mui/joy',
+ },
+ },
};
```
If you use TypeScript, you will need to update the TSConfig.
**tsconfig.json**
```diff
{
"compilerOptions": {
+ "paths": {
+ "@mui/material": ["./node_modules/@mui/joy"]
+ }
}
}
```
:::
:::error
`<CssVarsProvider />` is _required_ when working with Material UI's icons inside an app using Joy UI, so that the components can correctly adjust the icons based on the usage.
:::
### Usage
By default, Joy UI components are able to control an icon's color, font size, and margins when its size or variant changes.
{{"demo": "JoyMaterialIcon.js"}}
### Size
To control the size of the icon, use `fontSize` prop. The value can be one of the keys in `theme.fontSize` (the default value is `"xl"`).
{{"demo": "IconFontSizes.js"}}
## Third-party icons
To use other icon libraries, web font icons, or plain SVG icons with Joy UI, apply the styles with specific CSS variables as shown in the example below:
```jsx
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 components can control those variables based on their size and variant to make the icons fit perfectly.
---
Here is a collection of well-known icon libraries that you can use with Joy UI.
### react-icons
- [Installation](https://react-icons.github.io/react-icons/)
<iframe src="https://codesandbox.io/embed/joy-ui-react-icons-n6jljq?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-react-icons"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Ionicons
- [Browse icons](https://ionic.io/ionicons)
- [Installation](https://ionic.io/ionicons/usage)
<iframe src="https://codesandbox.io/embed/inspiring-visvesvaraya-etcc3x?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="inspiring-visvesvaraya-etcc3x"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Heroicons
- [Browse icons](https://heroicons.com/)
- [Installation](https://github.com/tailwindlabs/heroicons#react)
<iframe src="https://codesandbox.io/embed/joy-ui-heroicons-wv2ev1?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-heroicons"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Bootstrap Icons
- [Browse icons](https://icons.getbootstrap.com/)
- [Installation](https://icons.getbootstrap.com/#install)
<iframe src="https://codesandbox.io/embed/joy-ui-bootstrap-icons-x8g0cm?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-bootstrap"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Font Awesome Icons
- [Browse icons](https://fontawesome.com/icons)
- [Installation](https://docs.fontawesome.com/web/use-with/react)
<iframe src="https://codesandbox.io/embed/joy-ui-fontawesome-kjbnqj?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-fontawesome"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Iconify
- [Browse icons](https://icon-sets.iconify.design/)
- [Installation—React](https://iconify.design/docs/icon-components/react/)
- [Installation—Web component](https://iconify.design/docs/iconify-icon/)
- [Figma plugin](https://iconify.design/docs/design/figma/)
<iframe src="https://codesandbox.io/embed/joy-ui-iconify-r8fjrm?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-iconify"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
### Lucide
- [Browse icons](https://icon-sets.iconify.design/)
- [Installation—React](https://lucide.dev/guide/packages/lucide-react)
<iframe src="https://codesandbox.io/embed/joy-ui-lucide-sy7hio?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
title="joy-ui-lucide"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
Reference in New Issue Copy Permalink