Skip to content

pinkhominid/wc-fontawesome-free

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 'construct-style-sheets-polyfill/dist/adoptedStyleSheets.js';

  // Import icons you need
  import 'wc-fontawesome-free/dist/fab-accessible-icon.js'
  import 'wc-fontawesome-free/dist/far-moon-icon.js'
  import 'wc-fontawesome-free/dist/fas-user-astronaut-icon.js'
  import '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.