Files
react-test/docs/data/joy/components/aspect-ratio/IconWrapper.tsx
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

37 lines
905 B
TypeScript

import AspectRatio from '@mui/joy/AspectRatio';
import Stack from '@mui/joy/Stack';
import Favorite from '@mui/icons-material/Favorite';
export default function IconWrapper() {
return (
<Stack direction="row" spacing={2}>
<AspectRatio ratio="1" variant="solid" color="primary" sx={{ minWidth: 40 }}>
{/* an extra div is required to make the icon center */}
<div>
<Favorite />
</div>
</AspectRatio>
<AspectRatio
ratio="1"
variant="outlined"
color="success"
sx={{ minWidth: 40, borderRadius: 'sm' }}
>
<div>
<Favorite />
</div>
</AspectRatio>
<AspectRatio
ratio="1"
variant="soft"
color="danger"
sx={{ minWidth: 40, borderRadius: '50%' }}
>
<div>
<Favorite />
</div>
</AspectRatio>
</Stack>
);
}