https://github.com/adamlacombe/fa-icon
Unofficial web component for Font Awesome 5
https://github.com/adamlacombe/fa-icon
custom-element font-awesome fontawesome icon stenciljs svg typescript web-component webcomponent
Last synced: 4 months ago
JSON representation
Unofficial web component for Font Awesome 5
- Host: GitHub
- URL: https://github.com/adamlacombe/fa-icon
- Owner: adamlacombe
- License: mit
- Created: 2020-08-02T13:23:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-03T13:07:59.000Z (over 4 years ago)
- Last Synced: 2024-11-15T23:05:43.100Z (5 months ago)
- Topics: custom-element, font-awesome, fontawesome, icon, stenciljs, svg, typescript, web-component, webcomponent
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@adamlacombe/fa-icon
- Size: 37.1 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - fa-icon
README
# @adamlacombe/fa-icon
A web component for [Font Awesome 5](https://fontawesome.com/icons?d=gallery&m=free)
[See it in action on codepen.io](https://codepen.io/adamlacombe/pen/abderMg)
## Examples
### TSX
```tsx
import { Component, h, Host } from '@stencil/core';
import '@adamlacombe/fa-icon';
@Component({
tag: 'my-component'
})
export class MyComponent {
render() {
return
;
}
}
```
### HTML
```html
```
## Properties
| Attribute | Description | Type |
|---|---|---|
| `type` | The icon prefix. | `"fab"` \| `"far"` \| `"fas"` |
| `name` | The name of the icon. | `string` |
| `size` | The size of the icon. | `"large"` \| `"medium"` \| `"small"` \| `"x-large"` \| `"x-small"` \| `"xx-large"` |
| `color` | The color of the icon. This can be a css color name, hex value or custom property. | `string`
**Examples:**
`--primary-color` \| `blue` \| `#c412ef` \| `primary-color` |
## Using this component
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil project
- Run `npm install @adamlacombe/fa-icon --save`
- Add an import to the npm package `import '@adamlacombe/fa-icon';`
- Then you can use the element anywhere in your stencil project.