@weavedev/lit-fontawesome

lit-fontawesome

Convert Fontawesome SVG definitions to LitElement compatible SVGs and data URLs for inline use and in CSS

Install

npm i @weavedev/lit-fontawesome

API documentation

We generate API documentation with TypeDoc.

Usage

Icons in your CSS and HTML

You can use the Fontawesome icons in your HTML as inline SVGs, and in your CSS as data URLs.

import { css, html } from 'lit-element';

import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee';
import { litFontawesome, urlFontawesome } from '@weavedev/lit-fontawesome';

// Use it in your CSS
css`
    .myCoffeeIcon {
        background-image: url('${urlFontawesome(faCoffee)}');
    }
`;

// Use it in your HTML
html`
    <div>${litFontawesome(faCoffee)}</div>
`;

Options

Set custom colors and class-names

litFontawesome(
    faCoffee, // Icon
    // Options
    {
        // Custom class-names
        className: 'myClassName',
        
        // Custom colors
        color: 'palevioletred'
    }
);

License

MIT

Made by Paul Gerarts and Weave