Skip to content

add Font Awesome (free) icons library#17

Open
arielff3 wants to merge 8 commits intoAvijit07x:devfrom
arielff3:feat/fontawesome-icons
Open

add Font Awesome (free) icons library#17
arielff3 wants to merge 8 commits intoAvijit07x:devfrom
arielff3:feat/fontawesome-icons

Conversation

@arielff3
Copy link

This PR introduces Font Awesome as a new icon library for AnimateIcons. This is the initial commit — I plan to expand the library significantly with many more icons in upcoming PRs.

All SVGs are sourced from [Font Awesome Free 7.x](https://github.com/FortAwesome/Font-Awesome) and licensed under CC BY 4.0 (icons) / MIT (code), fully compatible with this project's MIT license.

What's included

  • New icons/fontawesome/ directory with animated icon components
  • Each icon follows the existing project template and animation architecture
  • Icons registered in icons/fontawesome-solid/index.ts
  • Integration with the app routing, icon library hook, and homepage card

Animation approach

Font Awesome icons use fill instead of stroke, so the animation strategy differs slightly from Lucide:

  • SVG paths are split at z + M boundaries to animate subpaths independently (e.g., bell body vs clapper, lock body vs shackle)

  • Multi-layered animations: container pulse + body rotation/translation + detail elements with staggered delays

  • Single-path icons use transform-based animations (scale, rotate, translate)

Roadmap

This is just the beginning. I'm planning to cover the most popular FA Solid icons across these categories:

  • Navigation & UI (house, bars, magnifying-glass, xmark, arrows, chevrons)
  • User & Auth (user, lock, sign-in/out)
  • Communication (envelope, comment, phone, paper-plane)
  • Status & Feedback (check, circle-check, triangle-exclamation, circle-xmark)
  • Actions (trash, pen, download, plus)
  • Media & Content (image, camera, eye)
  • Commerce (cart-shopping, credit-card)
  • Social & Misc (heart, star, gear, bell)

Checklist

  • Icons follow the existing template and structure
  • Animations implemented using motion/react
  • Icons added to icons/fontawesome/
  • Icons registered in index.ts
  • Tested locally using pnpm dev
  • PR targets the dev branch

@vercel
Copy link

vercel bot commented Feb 18, 2026

@arielff3 is attempting to deploy a commit to the avijit07x's projects Team on Vercel.

A member of the Team first needs to authorize it.

@arielff3
Copy link
Author

Hello @Avijit07x . I will be free if there is some questions about this PR

@Avijit07x
Copy link
Owner

Hi @arielff3,

First of all, great work on this PR. The implementation, animation structure, and overall integration are really well done. The approach is clean and fits nicely with the project. Appreciate the effort you put into this.

I just have a few changes before we can merge:

1. Font Awesome Types

  • Please keep Regular only.
  • Remove all Solid-related code, files, registrations, and type handling.
  • Supporting multiple types will increase the JSON list size and overall bundle size, so we want to keep it minimal.

2. Console Error Fix
There is a React DOM issue:

Invalid DOM property 'fill-rule'. Did you mean 'fillRule'?

Please replace:

fill-rule="evenodd"

with:

fillRule="evenodd"

(Apply this wherever used.)

3. Homepage Card Layout

  • The current card style doesn’t match the existing library cards.
  • Please revert to the previous layout style.
  • Add the Font Awesome card as a simple card below, using the same flex layout as other libraries.
  • Avoid the larger/custom card design.

4. Minimum Icons for Preview

  • Currently only 4–5 icons are visible in the card.
  • Please add at least 31 icons so the preview grid looks consistent with other libraries.

5. Sidebar Icon

  • The sidebar is using a Solid icon.
  • Please switch it to the Regular version.

Everything else looks solid. Once these changes are done, it should be ready to merge. Thanks again for the contribution.

@Avijit07x Avijit07x added the enhancement New feature or request label Feb 19, 2026
@arielff3
Copy link
Author

Hi @arielff3,

First of all, great work on this PR. The implementation, animation structure, and overall integration are really well done. The approach is clean and fits nicely with the project. Appreciate the effort you put into this.

I just have a few changes before we can merge:

1. Font Awesome Types

  • Please keep Regular only.
  • Remove all Solid-related code, files, registrations, and type handling.
  • Supporting multiple types will increase the JSON list size and overall bundle size, so we want to keep it minimal.

2. Console Error Fix There is a React DOM issue:

Invalid DOM property 'fill-rule'. Did you mean 'fillRule'?

Please replace:

fill-rule="evenodd"

with:

fillRule="evenodd"

(Apply this wherever used.)

3. Homepage Card Layout

  • The current card style doesn’t match the existing library cards.
  • Please revert to the previous layout style.
  • Add the Font Awesome card as a simple card below, using the same flex layout as other libraries.
  • Avoid the larger/custom card design.

4. Minimum Icons for Preview

  • Currently only 4–5 icons are visible in the card.
  • Please add at least 31 icons so the preview grid looks consistent with other libraries.

5. Sidebar Icon

  • The sidebar is using a Solid icon.
  • Please switch it to the Regular version.

Everything else looks solid. Once these changes are done, it should be ready to merge. Thanks again for the contribution.

Hello @Avijit07x I will make the adjustments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants