🔗 React에서 Font Awesome 사용하기
🔗 Dynamic Icon Importing | Font Awesome
// Use FontAwesome Component
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// Add Individual Icons Explicitly
import { faCamera } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
<FontAwesomeIcon icon={faCamera} />
<FontAwesomeIcon icon={faBell} />
// Dynamic Icon Importing (Babel Macros)
import { solid, regular } from '@fortawesome/fontawesome-svg-core/import.macro';
<FontAwesomeIcon icon={solid('camera')} />
<FontAwesomeIcon icon={regular('bell')} />Props
🔗 Adding Icon Styling with React
size
- Relative Sizing
| 2xs | xs | sm | md (def) | lg | xl | 2xl |
|---|---|---|---|---|---|---|
| 0.625em | 0.75em | 0.875em | 1em | 1.25em | 1.5em | 2em |
| 10px | 12px | 14px | 16px | 20px | 24px | 32px |
| 62.5% | 75% | 87.5% | 100% | 125% | 150% | 200% |
- Literal Sizing
| 1x | 2x | 3x | 4x | 5x | 6x | 7x | 8x | 9x | 10x |
|---|---|---|---|---|---|---|---|---|---|
| 1em | 2em | 3em | 4em | 5em | 6em | 7em | 8em | 9em | 10em |
fixedWidth
listItem
rotation={deg}
flip="horizontal | vertical | both"
beat | fade | beat-fade | bounce | flip | shake | spin 👉 Animate Icons
border
pull="left | right"
className="fa-layers"
Power Transforms
transform="🔽"
- grow-#, shrink-#
- up-#, down-#, left-#, right-#
- flip-v, flip-h, rotate-#
/* Use basic utilites */
<FontAwesomeIcon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />
/* Or computed */
<FontAwesomeIcon icon="fa-solid fa-coffee" transform={{ rotate: 42 }} />