CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-quasar--extras

Comprehensive collection of web fonts, icons, and animations for the Quasar Framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

fontawesome.mddocs/

FontAwesome Icons

Popular icon library providing multiple icon styles including solid, regular, light, brands, and duotone variations. Available in both v6 (latest) and v5 (legacy) versions.

Capabilities

FontAwesome v6 (Latest)

FontAwesome Free v6.7.2 with updated icons and new features.

/**
 * FontAwesome v6 SVG exports - categorized by style
 * Each constant contains SVG path data for the icon
 */

// Brands (fab prefix)
export declare const fabFacebook: string;
export declare const fabTwitter: string;
export declare const fabGoogle: string;
export declare const fabGithub: string;
export declare const fabLinkedin: string;
export declare const fabInstagram: string;
export declare const fabYoutube: string;
export declare const fabApple: string;
export declare const fabMicrosoft: string;
export declare const fabAmazon: string;
export declare const fabAndroid: string;
export declare const fabAngular: string;
export declare const fabReact: string;
export declare const fabVuejs: string;
export declare const fabBootstrap: string;
export declare const fabNpm: string;
export declare const fabNodejs: string;
export declare const fabPython: string;
export declare const fabJava: string;
export declare const fabJs: string;
export declare const fabHtml5: string;
export declare const fabCss3: string;

// Solid icons (fas prefix)  
export declare const fasHome: string;
export declare const fasUser: string;
export declare const fasUsers: string;
export declare const fasCog: string;
export declare const fasSettings: string;
export declare const fasPlus: string;
export declare const fasMinus: string;
export declare const fasTimes: string;
export declare const fasCheck: string;
export declare const fasExclamation: string;
export declare const fasExclamationTriangle: string;
export declare const fasInfo: string;
export declare const fasInfoCircle: string;
export declare const fasQuestion: string;
export declare const fasQuestionCircle: string;
export declare const fasSearch: string;
export declare const fasEye: string;
export declare const fasEyeSlash: string;
export declare const fasEdit: string;
export declare const fasTrash: string;
export declare const fasTrashAlt: string;
export declare const fasSave: string;
export declare const fasDownload: string;
export declare const fasUpload: string;
export declare const fasShare: string;
export declare const fasHeart: string;
export declare const fasStar: string;
export declare const fasThumbsUp: string;
export declare const fasThumbsDown: string;
export declare const fasComments: string;
export declare const fasComment: string;
export declare const fasEnvelope: string;
export declare const fasPhone: string;
export declare const fasBell: string;
export declare const fasCalendar: string;
export declare const fasClock: string;
export declare const fasMapMarker: string;
export declare const fasMapMarkerAlt: string;
export declare const fasLock: string;
export declare const fasUnlock: string;
export declare const fasShoppingCart: string;
export declare const fasCreditCard: string;
export declare const fasDollarSign: string;
export declare const fasEuroSign: string;
export declare const fasPoundSign: string;
export declare const fasYenSign: string;
export declare const fasBars: string;
export declare const fasEllipsisV: string;
export declare const fasEllipsisH: string;
export declare const fasChevronUp: string;
export declare const fasChevronDown: string;
export declare const fasChevronLeft: string;
export declare const fasChevronRight: string;
export declare const fasArrowUp: string;
export declare const fasArrowDown: string;
export declare const fasArrowLeft: string;
export declare const fasArrowRight: string;

// Regular icons (far prefix)
export declare const farUser: string;
export declare const farUserCircle: string;
export declare const farEdit: string;
export declare const farTrashAlt: string;
export declare const farSave: string;
export declare const farCopy: string;
export declare const farCut: string;
export declare const farPaste: string;
export declare const farFile: string;
export declare const farFolder: string;
export declare const farFolderOpen: string;
export declare const farHeart: string;
export declare const farStar: string;
export declare const farThumbsUp: string;
export declare const farThumbsDown: string;
export declare const farComments: string;
export declare const farComment: string;
export declare const farEnvelope: string;
export declare const farBell: string;
export declare const farCalendar: string;
export declare const farCalendarAlt: string;
export declare const farClock: string;
export declare const farEye: string;
export declare const farEyeSlash: string;
export declare const farCheckCircle: string;
export declare const farTimesCircle: string;
export declare const farQuestionCircle: string;
export declare const farInfoCircle: string;

// Light icons (fal prefix) - Pro version only, but declarations provided
export declare const falHome: string;
export declare const falUser: string;
export declare const falCog: string;
export declare const falPlus: string;
export declare const falMinus: string;
export declare const falTimes: string;
export declare const falCheck: string;

// Duotone icons (fad prefix) - Pro version only, but declarations provided  
export declare const fadHome: string;
export declare const fadUser: string;
export declare const fadCog: string;
export declare const fadPlus: string;
export declare const fadMinus: string;
export declare const fadTimes: string;
export declare const fadCheck: string;

Usage Examples:

import { 
  fasHome, 
  farUser, 
  fabFacebook, 
  fasSettings,
  fasPlus,
  fasTrash,
  fasEdit,
  fasHeart,
  fasShare
} from "@quasar/extras/fontawesome-v6";

// Use with Quasar QIcon
<template>
  <q-icon :name="homeIcon" />
  <q-btn :icon="addIcon" color="primary" />
  <q-btn :icon="editIcon" flat round />
  <q-btn :icon="deleteIcon" color="negative" />
  <q-btn :icon="facebookIcon" color="primary" />
</template>

<script>
export default {
  data() {
    return {
      homeIcon: fasHome,
      userIcon: farUser,
      addIcon: fasPlus,
      editIcon: fasEdit,
      deleteIcon: fasTrash,
      settingsIcon: fasSettings,
      heartIcon: fasHeart,
      shareIcon: fasShare,
      facebookIcon: fabFacebook
    };
  }
}
</script>

FontAwesome v5 (Legacy)

FontAwesome Free v5.15.4 for compatibility with older projects.

/**
 * FontAwesome v5 SVG exports - legacy version
 * Similar structure to v6 but older icon set
 */

// Brands (fab prefix)
export declare const fabFacebook: string;
export declare const fabTwitter: string;
export declare const fabGoogle: string;
export declare const fabGithub: string;
export declare const fabLinkedin: string;

// Solid icons (fas prefix)
export declare const fasHome: string;
export declare const fasUser: string;
export declare const fasCog: string;
export declare const fasPlus: string;
export declare const fasMinus: string;
export declare const fasTimes: string;
export declare const fasCheck: string;

// Regular icons (far prefix)
export declare const farUser: string;
export declare const farEdit: string;
export declare const farSave: string;
export declare const farHeart: string;
export declare const farStar: string;

// Light icons (fal prefix) - Pro only
export declare const falHome: string;
export declare const falUser: string;

// Duotone icons (fad prefix) - Pro only
export declare const fadHome: string;
export declare const fadUser: string;

Webfont Usage

CSS Import

/* Import FontAwesome CSS - use v6 OR v5, not both */
@import '@quasar/extras/fontawesome-v6/fontawesome-v6.css';
/* OR */
@import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';

HTML Usage

<!-- FontAwesome webfont usage -->
<!-- Solid icons -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>
<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
<i class="fas fa-times"></i>

<!-- Regular icons -->
<i class="far fa-user"></i>
<i class="far fa-edit"></i>
<i class="far fa-save"></i>
<i class="far fa-heart"></i>

<!-- Brand icons -->
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>

<!-- Light icons (Pro only) -->
<i class="fal fa-home"></i>
<i class="fal fa-user"></i>

<!-- Duotone icons (Pro only) -->
<i class="fad fa-home"></i>
<i class="fad fa-user"></i>

QIcon Usage

<!-- With Quasar QIcon component -->
<q-icon name="fas fa-home" />
<q-icon name="far fa-user" />
<q-icon name="fab fa-facebook" />
<q-icon name="fas fa-cog" />
<q-icon name="fas fa-plus" />

Icon Categories and Prefixes

Free Icons (Included)

  • fas: Solid style icons (filled)
  • far: Regular style icons (outlined)
  • fab: Brand icons (logos and brand symbols)

Pro Icons (Declarations Only)

  • fal: Light style icons (thin strokes)
  • fad: Duotone style icons (two-tone coloring)

Note: Light and Duotone styles require FontAwesome Pro license. The free version only includes Solid, Regular, and Brand styles.

Icon Naming Convention

SVG Export Names

  • Prefix based on style: fas, far, fab, fal, fad
  • CamelCase after prefix (e.g., fasHome, farUser, fabFacebook)
  • Hyphens in icon names become CamelCase (e.g., fas-user-circle → fasUserCircle)

Webfont Class Names

  • Two-class system: style prefix + icon name
  • Style prefixes: fas, far, fab, fal, fad
  • Icon names with fa- prefix (e.g., fa-home, fa-user, fa-facebook)

Version Differences

FontAwesome v6 Features

  • Updated and redesigned icons
  • New icons added regularly
  • Better consistency across styles
  • Improved SVG optimization

FontAwesome v5 Compatibility

  • Stable icon set for legacy projects
  • Well-established naming conventions
  • Broad framework compatibility

SVG Format

FontAwesome SVG exports use the same format as other icon libraries:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 512 512')

Most FontAwesome icons use a 512x512 viewBox, unlike Material Icons which use 24x24.

Install with Tessl CLI

npx tessl i tessl/npm-quasar--extras

docs

additional-icons.md

animations.md

fontawesome.md

index.md

ionicons.md

material-icons.md

mdi.md

roboto-font.md

tile.json