@adamlacombe/fa-icon

A web component for Font Awesome 5

See it in action on codepen.io

Examples

TSX

import { Component, h, Host } from '@stencil/core';
import '@adamlacombe/fa-icon';

@Component({
  tag: 'my-component'
})
export class MyComponent {

  render() {
    return <Host>
      <fa-icon type={'far'} name={'surprise'} size={'medium'} />
    </Host>;
  }
}

HTML

<script src='https://unpkg.com/@adamlacombe/fa-icon@latest/dist/fa-icon.js'></script>

<fa-icon type="far" name="surprise" size="medium"></fa-icon>

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 <script src="https://unpkg.com/@adamlacombe/fa-icon@latest/dist/fa-icon.js"></script> 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.