init project

docs/data/joy/integrations/icon-libraries/IconFontSizes.js

@@ -0,0 +1,21 @@
+import Stack from '@mui/joy/Stack';
+import Person from '@mui/icons-material/Person';
+
+export default function IconFontSizes() {
+  return (
+    <Stack
+      spacing={2}
+      direction="row"
+      sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
+    </Stack>
+  );
+}

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx

@@ -0,0 +1,21 @@
+import Stack from '@mui/joy/Stack';
+import Person from '@mui/icons-material/Person';
+
+export default function IconFontSizes() {
+  return (
+    <Stack
+      spacing={2}
+      direction="row"
+      sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
+    </Stack>
+  );
+}

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview

@@ -0,0 +1,8 @@
+<Person fontSize="xs" />
+<Person fontSize="sm" />
+<Person fontSize="md" />
+<Person fontSize="lg" />
+<Person fontSize="xl" />
+<Person fontSize="xl2" />
+<Person fontSize="xl3" />
+<Person fontSize="xl4" />

docs/data/joy/integrations/icon-libraries/JoyMaterialIcon.js

@@ -0,0 +1,37 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import Person from '@mui/icons-material/Person';
+
+export default function JoyMaterialIcon() {
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 2 }}>
+      <Stack spacing={2}>
+        {['sm', 'md', 'lg'].map((size) => (
+          <Button key={size} size={size} startDecorator={<Person />}>
+            Button
+          </Button>
+        ))}
+      </Stack>
+      <Stack spacing={2}>
+        {['sm', 'md', 'lg'].map((size) => (
+          <Input
+            key={size}
+            size={size}
+            startDecorator={<Person />}
+            placeholder="Placeholder"
+          />
+        ))}
+      </Stack>
+      <Stack spacing={2}>
+        {['sm', 'md', 'lg', 'xl'].map((size) => (
+          <Typography key={size} startDecorator={<Person />} sx={{ fontSize: size }}>
+            Hello World
+          </Typography>
+        ))}
+      </Stack>
+    </Box>
+  );
+}

docs/data/joy/integrations/icon-libraries/JoyMaterialIcon.tsx

@@ -0,0 +1,37 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import Person from '@mui/icons-material/Person';
+
+export default function JoyMaterialIcon() {
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 2 }}>
+      <Stack spacing={2}>
+        {(['sm', 'md', 'lg'] as const).map((size) => (
+          <Button key={size} size={size} startDecorator={<Person />}>
+            Button
+          </Button>
+        ))}
+      </Stack>
+      <Stack spacing={2}>
+        {(['sm', 'md', 'lg'] as const).map((size) => (
+          <Input
+            key={size}
+            size={size}
+            startDecorator={<Person />}
+            placeholder="Placeholder"
+          />
+        ))}
+      </Stack>
+      <Stack spacing={2}>
+        {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+          <Typography key={size} startDecorator={<Person />} sx={{ fontSize: size }}>
+            Hello World
+          </Typography>
+        ))}
+      </Stack>
+    </Box>
+  );
+}

docs/data/joy/integrations/icon-libraries/icon-libraries.md

@@ -0,0 +1,215 @@
+# 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>