---
name: "font-awesome-tree-shaking-svg"
description: "Optimize Font Awesome icon usage with tree-shaken SVG imports and zero CSS bloat."
metadata:
  author: "Fonticons"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "tree shake font awesome"
  - "use react fontawesome"
  - "import specific fontawesome icons"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Font Awesome SVG Tree-Shaking Architecture

Integrates @fortawesome/react-fontawesome and individual icon packages (@fortawesome/free-solid-svg-icons): tree-shaking only imported icons, avoiding global CSS loads, and configuring accessibility.

## When to Invoke
Invoke this skill whenever you need to:
- tree shake font awesome
- use react fontawesome
- import specific fontawesome icons

## Execution SOP & Rules
1. Import specific icon definitions directly: import { faCoffee } from '@fortawesome/free-solid-svg-icons'.
2. Render using <FontAwesomeIcon icon={faCoffee} /> rather than string class names.
3. Disable automated CSS injection: config.autoAddCss = false and import '@fortawesome/fontawesome-svg-core/styles.css' once.
4. Ensure title attribute is supplied on interactive icon-only action buttons.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.