@meveo-org/mv-font-awesome

mv-font-awesome

MvFontAwesome is a Meveo icon component (based on lit-element) that renders Font Awesome Free library icons.

Features

• Written in vanilla javascript
• Simplifies icon loading from the library using only the icon name without the prefix

Quick Start

To experiment with the MvFontAwesome component.

• Clone this repo.

• Serve the project from the root directory with some http server (best served with meveo itself)

• Make sure the following style is declared.

   <style>
     /* Brands */
     @font-face {
       font-family: 'Font Awesome 5 Brands';
       font-style: normal;
       font-weight: normal;
       font-display: auto;
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.eot");
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.woff2") format("woff2"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.woff") format("woff"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.ttf") format("truetype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-brands-400.svg#fontawesome") format("svg");
     }
  
     /* Regular */
     @font-face {
       font-family: 'Font Awesome 5 Free';
       font-style: normal;
       font-weight: 400;
       font-display: auto;
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.eot");
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.woff2") format("woff2"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.woff") format("woff"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.ttf") format("truetype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-regular-400.svg#fontawesome") format("svg");
     }
  
     /* Solid */
     @font-face {
       font-family: 'Font Awesome 5 Free';
       font-style: normal;
       font-weight: 900;
       font-display: auto;
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.eot");
       src: url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.woff2") format("woff2"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.woff") format("woff"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.ttf") format("truetype"),
         url("{REPLACE_WITH_PATH_TO}/fonts/fa-solid-900.svg#fontawesome") format("svg");
     }
   </style>
  
   OR
  
   <link rel="stylesheet" href="node_modules/@meveo-org/mv-font-awesome/fonts.css">
  

• View the index.html to see available icons, then use the component to load the chosen icon e.g.

  <mv-fa icon="snowflake"></mv-fa>
  

  Note: Some solid icons have the same name as regular icons. To specify that you want to use the regular icons just use:

  <mv-fa icon="snowflake" regular></mv-fa>
  

Acknowledgements

• Uses Font Awesome Free library icons.