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: 29 days 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 (2 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

        
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# @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.