Files
react-test/docs/data/material/components/icons/FontAwesomeIcon.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

35 lines
1.1 KiB
TypeScript

import * as React from 'react';
import { loadCSS } from 'fg-loadcss';
import Stack from '@mui/material/Stack';
import { green } from '@mui/material/colors';
import Icon from '@mui/material/Icon';
export default function FontAwesomeIcon() {
React.useEffect(() => {
const node = loadCSS(
'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
// Inject before JSS
(document.querySelector('#font-awesome-css') ||
document.head.firstChild) as HTMLElement,
);
return () => {
node.parentNode!.removeChild(node);
};
}, []);
return (
<Stack direction="row" spacing={4} sx={{ alignItems: 'flex-end' }}>
<Icon baseClassName="fas" className="fa-plus-circle" />
<Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
<Icon
baseClassName="fas"
className="fa-plus-circle"
sx={{ color: green[500] }}
/>
<Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
<Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
</Stack>
);
}