Narwhal Parade Maestro

    wc-fontawesome-free

    1.0.4 • Public • Published

    wc-fontawesome-free

    Font Awesome Free icons as Web Components

    example icons

    Why?

    • Simple to use
    • Import only what you need
    • Tree shakable
    • Shadow DOM encapsulated
    • 1,588 awesome free icons

    Install

    npm i wc-fontawesome-free construct-style-sheets-polyfill

    Use

    1. Look up a free icon
    2. Import using the following format <style-prefix>-<icon-name>-icon.js
    3. Add the custom element tag using the format <style-prefix>-<icon-name>-icon

    Where <style-prefix> is fab (brands), far (regular), or fas (solid)

    <script type="module">
      // Import Constructible Stylesheets polyfill for Firefox & Safari
      // https://www.npmjs.com/package/construct-style-sheets-polyfill
      import '../node_modules/construct-style-sheets-polyfill/dist/adoptedStyleSheets.js';
     
      // Import icons you need
      import '../node_modules/wc-fontawesome-free/dist/fab-accessible-icon.js'
      import '../node_modules/wc-fontawesome-free/dist/far-moon-icon.js'
      import '../node_modules/wc-fontawesome-free/dist/fas-user-astronaut-icon.js'
      import '../node_modules/wc-fontawesome-free/dist/fas-yin-yang-icon.js'
    </script> 
     
    <fab-accessible-icon class="fa-border"></fab-accessible-icon>
    <far-moon-icon class="fa-3x" style="fill:midnightblue"></far-moon-icon>
    <fas-user-astronaut-icon style="fill:skyblue"></fas-user-astronaut-icon>
    <fas-yin-yang-icon class="fa-spin fa-lg"></fas-yin-yang-icon>

    Supports Font Awesome Styling via classes. For example, sizing, rotation, and animation.

    You can change icon colors using the fill property in CSS.

    Install

    npm i wc-fontawesome-free

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    592 kB

    Total Files

    1597

    Last publish

    Collaborators

    • pinkhominid