Code Monkey home page Code Monkey logo

wc-fontawesome-free's Introduction

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.

wc-fontawesome-free's People

Contributors

dependabot[bot] avatar pinkhominid avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.