or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

additional-icons.mdanimations.mdfontawesome.mdindex.mdionicons.mdmaterial-icons.mdmdi.mdroboto-font.md
tile.json

tessl/npm-quasar--extras

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@quasar/extras@1.17.x

To install, run

npx @tessl/cli install tessl/npm-quasar--extras@1.17.0

index.mddocs/

Quasar Extras

Quasar Extras provides a comprehensive collection of web fonts, icons, and animations specifically curated for the Quasar Framework ecosystem. It includes popular icon libraries, the Roboto font family, and Animate.css animations with streamlined delivery and testing.

Package Information

  • Package Name: @quasar/extras
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @quasar/extras

Core Imports

Icon Libraries (SVG)

// Material Icons
import { matHome, matSettings, matAdd } from "@quasar/extras/material-icons";

// Material Design Icons (MDI)
import { mdiAccount, mdiAlert, mdiHome } from "@quasar/extras/mdi-v7";

// FontAwesome
import { fasHome, fabFacebook, farUser } from "@quasar/extras/fontawesome-v6";

// Other libraries follow similar patterns
import { iconName } from "@quasar/extras/bootstrap-icons";
import { iconName } from "@quasar/extras/eva-icons";
import { iconName } from "@quasar/extras/ionicons-v8";

Webfont CSS

/* Import CSS for webfont usage */
@import '@quasar/extras/material-icons/material-icons.css';
@import '@quasar/extras/mdi-v7/mdi-v7.css';
@import '@quasar/extras/fontawesome-v6/fontawesome-v6.css';

Animations

import { 
  generalAnimations, 
  inAnimations, 
  outAnimations 
} from "@quasar/extras/animate/animate-list.common";

For CommonJS:

const { matHome } = require("@quasar/extras/material-icons");
const { mdiAccount } = require("@quasar/extras/mdi-v7");
const { generalAnimations } = require("@quasar/extras/animate/animate-list.common");

Basic Usage

SVG Icon Usage in Quasar

import { matHome, matSettings } from "@quasar/extras/material-icons";

// In Vue component
<template>
  <q-icon :name="homeIcon" />
  <q-btn :icon="settingsIcon" />
</template>

<script>
export default {
  created() {
    this.homeIcon = matHome;
    this.settingsIcon = matSettings;
  }
}
</script>

Webfont Usage

<!-- After importing CSS -->
<i class="material-icons">home</i>
<i class="mdi mdi-account"></i>
<i class="fas fa-home"></i>

Animation Usage

import { inAnimations } from "@quasar/extras/animate/animate-list.common";

// Use with CSS classes
const fadeInClass = inAnimations[8]; // "fadeIn"

Architecture

Quasar Extras is organized around several key concepts:

  • Multi-format Support: Each icon library provides SVG exports (for programmatic use) and webfonts (for CSS styling)
  • Version Management: Multiple versions of popular libraries (MDI, FontAwesome, Ionicons) for compatibility
  • Optimized Assets: Streamlined files with unnecessary assets removed for faster downloads
  • TypeScript Integration: Full type definitions for all SVG exports
  • Quasar Integration: Seamless integration with Quasar's component system and build tools

Capabilities

Material Icons

Google's official Material Design icons with multiple style variants and comprehensive SVG exports.

// SVG exports - each icon as string constant
export declare const matHome: string;
export declare const matSettings: string;
export declare const matAdd: string;
// ... 2100+ more icons

Material Icons

Material Symbols

Google's newer Material Symbols collection with updated designs and expanded icon set beyond Material Icons.

// SVG exports - Material Symbols variants
export declare const matSymbolOutlined: string;
export declare const matSymbolRounded: string; 
export declare const matSymbolSharp: string;
// ... expanded Material Symbols set

Also covered in Material Icons

Material Design Icons (MDI)

Extended Material Design icon collection from the community with multiple versions available.

// SVG exports - each icon as string constant  
export declare const mdiAccount: string;
export declare const mdiAlert: string;
export declare const mdiHome: string;
// ... thousands more icons

Material Design Icons

FontAwesome Icons

Popular icon library with multiple styles (solid, regular, light, brands, duotone).

// SVG exports - categorized by style
export declare const fasHome: string;      // Solid
export declare const farUser: string;      // Regular  
export declare const fabFacebook: string;  // Brand
// ... hundreds more icons per style

FontAwesome Icons

Ionicons

Ionic Framework's icon library with multiple versions for compatibility.

// SVG exports - each icon as string constant
export declare const ionHome: string;
export declare const ionSettings: string;
export declare const ionAdd: string;
// ... hundreds more icons

Ionicons

Additional Icon Libraries

Bootstrap Icons, Eva Icons, Themify Icons, and Line Awesome icon libraries.

// Bootstrap Icons  
export declare const biHouse: string;
export declare const biGear: string;

// Eva Icons
export declare const evaHome: string;
export declare const evaSettings: string;

// Themify Icons
export declare const tiHome: string;
export declare const tiSettings: string;

// Line Awesome
export declare const lasHome: string;
export declare const lasUser: string;

Additional Icon Libraries

Roboto Font

Google's Roboto font family optimized for Material Design interfaces.

/* Font face definition */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2');
}

/* CSS class */
.roboto {
  font-family: 'Roboto', sans-serif;
}

Roboto Font

Animate.css Integration

Curated animation class lists from Animate.css for smooth transitions and effects.

export declare const generalAnimations: string[];
export declare const inAnimations: string[];  
export declare const outAnimations: string[];

Animations