https://github.com/springtype-org/st-font-awesome
Font Awesome 5 components for SpringType
https://github.com/springtype-org/st-font-awesome
List: st-font-awesome
components font-awesome springtype svg svg-icons
Last synced: 7 days ago
JSON representation
Font Awesome 5 components for SpringType
- Host: GitHub
- URL: https://github.com/springtype-org/st-font-awesome
- Owner: springtype-org
- License: mit
- Created: 2019-11-21T21:20:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T00:47:59.000Z (over 3 years ago)
- Last Synced: 2025-11-03T01:18:09.852Z (8 months ago)
- Topics: components, font-awesome, springtype, svg, svg-icons
- Language: TypeScript
- Homepage:
- Size: 3.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Font Awesome 5 for SpringType
> Vector icons and social logos from fontawesome.com
Setup
yarn add st-font-awesome
Use
Include the CSS from a CDN or locally:
```html
```
Use the `` SpringType component:
```ts
import { st } from 'springtype';
import { FA } from 'st-font-awesome';
st.render();
```
API
There is full support for all Font Awesome features including Sizing, Fixed-Width, Icons in a List, Rotation, Animation, Borders, Pulled Icons, Stacking, Power Transforms, Masking, Layering, Texts, Counters and Duotone Icons:
The following components are implemented:
- [x] `FA`
- [x] `FALayers`
- [x] `FALayersCounter`
- [x] `FALayersText`
- [x] `FALayers`
- [x] `FAStack` (legacy stacking support, use layers)
Options available:
```ts
// for
interface IFAAttrs {
icon?: IconName;
duotone?: boolean;
swapOpacity?: boolean;
rotate90?: boolean;
rotate180?: boolean;
rotate270?: boolean;
flipHorizontal?: boolean;
flipVertical?: boolean;
flipBoth?: boolean;
animateSpin?: boolean;
animatePulse?: boolean;
pullRight?: boolean;
pullLeft?: boolean;
border?: boolean;
inverse?: boolean;
stack?: StackSizes;
}
```
For example, layering and stacking like this:
```ts
import { st } from 'springtype/core';
import { tsx } from 'springtype/web/vdom';
import { FA, FALayers, FALayersCounter } from 'st-font-awesome';
st.render(
20
);
```
...results in:
Maintainers
Aron Homberg
Michael Mannseicher
Contributing
Please help out to make this project even better and see your name added to the list of our
[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada: