wc-fontawesome-free

Font Awesome Free icons as Web Components

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.