lit-fontawesome's Introduction

Lit-fontawesome

Icons of Fontawesome for Polymer 3 and LitElement

Installation

Use the package manager npm to install Lit-fontawesome.

npm install lit-fontawesome

In the HTML file, link css of Lit-fontawesome

<link rel="stylesheet" href="node_modules/lit-fontawesome/css/font.css">

Usage with LitElement

import { LitElement, html} from 'lit-element';
import Fontawesome from 'lit-fontawesome';

class SomeClass extends LitElement {
 static get styles() {
    return [ Fontawesome ];
 }
 render() {
    return html`
      <div>
         <i class="fas fa-address-card"></i>
      </div>
    `;
  }
}

customElements.define('custom-component', SomeClass );

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

lit-fontawesome's People

Contributors

Stargazers

Watchers

lit-fontawesome's Issues

Importing CSS styles inside component and rendering is a must

The web components scheme is based on atomic design. This means that, in this case of atom, it should do its small job by itself.

What is missing here:

Import Font Awesome stylesheet directly into the element.
Remove import of stylesheet outside the component.
Render the icon inside the component.

add typescript support

I've been using Lit with typescript and found out the library wasn't working because missing types.
I actually added support for typescript and tried a pull request but I don't have the required rights to open a pull request.

In the meantime, to everyone who uses ts:

$ npm i -D typescript @types/node
$ tsc --init
$ mv fontawesome.js fontawesome.ts

just copy this into tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2020",
    "sourceMap": true,
    "declaration": true,
    "outDir": "./dist",
    "moduleResolution": "Node"
  },
  "include": [
    "*"
  ],
  "exclude": [
    "dist"
  ]
}