https://github.com/gnomical/solid-fontawesome
A SolidJS component for the font-awesome icon library.
https://github.com/gnomical/solid-fontawesome
List: solid-fontawesome
fontawesome icons solidjs
Last synced: 16 days ago
JSON representation
A SolidJS component for the font-awesome icon library.
- Host: GitHub
- URL: https://github.com/gnomical/solid-fontawesome
- Owner: gnomical
- License: mit
- Created: 2023-01-05T03:14:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-03-13T20:00:37.000Z (3 months ago)
- Last Synced: 2026-04-24T04:32:54.660Z (about 2 months ago)
- Topics: fontawesome, icons, solidjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/solid-fontawesome
- Size: 136 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-fontawesome
[](https://www.npmjs.com/package/solid-fontawesome)
[](https://www.npmjs.com/package/solid-fontawesome)
[](LICENSE)
A SolidJS component for the font-awesome icon library.
## How to Use
This is intended to work just like the react-fontawesome component.
Official docs for that component can be found [here](https://fontawesome.com/v6/docs/web/use-with/react/).
Instead of Step 3 on that page, "Add the React Component". You should:
### Add the Solid Component
```bash
npm install solid-fontawesome
```
This library does not support babel-macros or a few of the "alternative" methods of adding icons. It only supports the "[Globally](https://fontawesome.com/v6/docs/web/use-with/react/add-icons#add-icons-globally)" option at this time.
## Supported Props work in progress
✅ icon: string
✅ size?: SizeProp
▢ mask?: IconProp
▢ maskId?: string
✅ className?: string
▢ color?: string
▢ spin?: boolean
▢ spinPulse?: boolean
▢ spinReverse?: boolean
▢ pulse?: boolean
▢ beat?: boolean
▢ fade?: boolean
▢ beatFade?: boolean
▢ bounce?: boolean
▢ shake?: boolean
▢ border?: boolean
▢ fixedWidth?: boolean
✅ inverse?: boolean
> instead of making the icon white, this library truly inverts the `currentColor`.
> That way it more easily works with dark or custom themes.
▢ listItem?: boolean
▢ flip?: FlipProp
▢ pull?: PullProp
▢ rotation?: RotateProp
▢ transform?: string | Transform
▢ symbol?: FaSymbol
▢ style?: any
▢ tabIndex?: number
▢ title?: string
▢ titleId?: string
✅ swapOpacity?: boolean