Registry / web-framework / quasar-extras

quasar-extras

library2.0.9jsnpmunverified

Quasar Extras is a collection of essential static assets, including popular icon sets like Material Icons, Material Design Icons (MDI), Font Awesome, and Ionicons, alongside the Roboto font and Animate.css for animations. It is designed to integrate seamlessly with the Quasar Framework, a Vue.js-based UI framework for building various application types. The current stable version is 2.0.9, and the package receives updates as its bundled upstream assets are updated, reflecting a consistent maintenance cadence. Its key differentiators include optimizing asset bundles by stripping unnecessary files for faster downloads, consolidating these assets in a single, tested package tailored for Quasar, and providing a reliable way to include assets like Material Icons, circumventing common npm installation issues with their native packages.

web-framework

npm install quasar-extras

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · QUASAR-EXTRAS

quasar-extras

web-frameworkjavascriptv2.0.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Material Icons (via config)

✓ module.exports = function (ctx) { return { extras: [ 'material-icons' ] } }

✗ import 'material-icons'

This package provides assets configured through `quasar.conf.js` (or `quasar.config.js` in Quasar v2+), not via direct JavaScript or CSS `@import` statements. Adding `'material-icons'` to the `extras` array makes the font available globally in your Quasar app.

Font Awesome (via config)

✓ module.exports = function (ctx) { return { extras: [ 'fontawesome' ] } }

✗ import '@fortawesome/fontawesome-svg-core'

Similar to other extras, Font Awesome is enabled by adding `'fontawesome'` to the `extras` array in `quasar.conf.js`. This provides the Font Awesome CSS, making the icons available for use in your Quasar components.

Animate.css (via config)

✓ module.exports = function (ctx) { return { animations: 'all' // or an array like ['bounceInDown', 'bounceOutUp'] } }

✗ import 'animate.css'

Animate.css is enabled via the `animations` property in `quasar.conf.js`. Setting it to `'all'` includes all animations, while specifying an array of desired animations helps optimize bundle size.

Demonstrates how to enable multiple font, icon, and animation sets within your Quasar Framework project's configuration file.

// quasar.conf.js (or quasar.config.js for Quasar v2+) // This file runs in a Node context, so use only ES6 features supported by your Node version. const { configure } = require('quasar/wrappers') module.exports = configure(function (ctx) { return { // Quasar Framework extras extras: [ 'roboto-font', 'material-icons', // Material Design Icons 'mdi', // Material Design Icons (Community) 'fontawesome', // Font Awesome 5 'ionicons' // Ionicons 4 (Note: v2.0.0+ ships Ionicons v4+) ], // Animate.css animations animations: 'all' // or specify an array of specific animations: ['bounceInLeft', 'bounceOutRight'] // ... other Quasar config options } })

Debug

Known issues

breakingUpgrading to `quasar-extras` v2.0.0 (or newer) includes Ionicons v4.1.1, which introduced breaking changes compared to previous Ionicons v2.x versions. Icon names and usage patterns may have changed, requiring updates in your application code.

fix

Refer to the Ionicons v4 documentation for updated icon names and usage. Update your application's icon references accordingly. For Quasar v1 and below, consider staying on `quasar-extras` v1.x if Ionicons v2 compatibility is critical.

affects: >=2.0.0

gotcha`quasar-extras` is a collection of static assets (fonts, icon fonts, CSS animations) intended for configuration within a Quasar Framework project via `quasar.conf.js` (or `quasar.config.js`). It does not expose JavaScript modules for direct `import` or `require` statements.

fix

Configure desired extras by adding their names to the `extras` array or `animations` property in your project's `quasar.conf.js` (or `quasar.config.js`) file. Do not attempt to import them like regular npm packages in your JavaScript or style files.

affects: >=1.0.0

gotchaThe `quasar-extras` package bundles specific, often slightly older, versions of third-party assets (e.g., Font Awesome 5.5.0, MDI 3.0.39 as of `quasar-extras@2.0.9`). If your project explicitly requires a newer or specific external asset version not bundled, updating `quasar-extras` might not provide it, or it may conflict with a manually added, newer version.

fix

Check the `quasar-extras` README or release notes for the bundled versions of specific assets. If a different external asset version is required, you might need to include that asset manually in your project, overriding or augmenting what `quasar-extras` provides.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Module not found: Error: Can't resolve 'material-icons' in '/path/to/your/project'

Attempting to directly `import 'material-icons'` in JavaScript or CSS, or Webpack failing to resolve the asset despite `quasar.conf.js` configuration.

fix

Ensure 'material-icons' is correctly added to the `extras` array within the `framework` object in your `quasar.conf.js` (or `quasar.config.js`). This package integrates assets via configuration, not direct module imports.

Icons are not displaying correctly or are missing after updating `quasar-extras`.

This usually indicates either a breaking change in an included icon set (e.g., Ionicons v4 in `quasar-extras` v2.0.0) where icon names or classes changed, or incorrect icon class names being used in your application code.

fix

Verify that your `extras` configuration in `quasar.conf.js` (or `quasar.config.js`) is correct and that the desired icon sets are enabled. If you recently updated `quasar-extras`, consult the release notes for any breaking changes related to specific icon sets and update your icon class names according to their respective documentation.

Animate.css animations are not working in my Quasar application.

The `animations` property in `quasar.conf.js` (or `quasar.config.js`) is either not configured, or the animation class names used in your components do not match those provided by Animate.css.

fix

Ensure the `animations` property is set in your `quasar.conf.js` (or `quasar.config.js`). For example, set `animations: 'all'` to include all animations, or provide an array of specific animation names like `animations: ['fadeIn', 'fadeOut']`. Then, double-check the animation class names in your components against the Animate.css documentation.

Upgrade

Version history

2.0.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/quasarframework/quasar-extras ↗

packagehttps://www.npmjs.com/package/quasar-extras ↗

homepagehttps://quasar.dev ↗