{"id":18054,"library":"quasar-extras","title":"Quasar Framework Extras","description":"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.","status":"active","version":"2.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/quasarframework/quasar-extras","tags":["javascript","quasar","framework"],"install":[{"cmd":"npm install quasar-extras","lang":"bash","label":"npm"},{"cmd":"yarn add quasar-extras","lang":"bash","label":"yarn"},{"cmd":"pnpm add quasar-extras","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import 'material-icons'","symbol":"Material Icons (via config)","correct":"module.exports = function (ctx) {\n  return {\n    extras: [\n      'material-icons'\n    ]\n  }\n}"},{"note":"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.","wrong":"import '@fortawesome/fontawesome-svg-core'","symbol":"Font Awesome (via config)","correct":"module.exports = function (ctx) {\n  return {\n    extras: [\n      'fontawesome'\n    ]\n  }\n}"},{"note":"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.","wrong":"import 'animate.css'","symbol":"Animate.css (via config)","correct":"module.exports = function (ctx) {\n  return {\n    animations: 'all' // or an array like ['bounceInDown', 'bounceOutUp']\n  }\n}"}],"quickstart":{"code":"// quasar.conf.js (or quasar.config.js for Quasar v2+)\n// This file runs in a Node context, so use only ES6 features supported by your Node version.\n\nconst { configure } = require('quasar/wrappers')\n\nmodule.exports = configure(function (ctx) {\n  return {\n    // Quasar Framework extras\n    extras: [\n      'roboto-font',\n      'material-icons', // Material Design Icons\n      'mdi',            // Material Design Icons (Community)\n      'fontawesome',    // Font Awesome 5\n      'ionicons'        // Ionicons 4 (Note: v2.0.0+ ships Ionicons v4+)\n    ],\n\n    // Animate.css animations\n    animations: 'all' // or specify an array of specific animations: ['bounceInLeft', 'bounceOutRight']\n\n    // ... other Quasar config options\n  }\n})","lang":"javascript","description":"Demonstrates how to enable multiple font, icon, and animation sets within your Quasar Framework project's configuration file."},"warnings":[{"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.","message":"Upgrading 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"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.","cause":"Attempting to directly `import 'material-icons'` in JavaScript or CSS, or Webpack failing to resolve the asset despite `quasar.conf.js` configuration.","error":"Error: Module not found: Error: Can't resolve 'material-icons' in '/path/to/your/project'"},{"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.","cause":"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.","error":"Icons are not displaying correctly or are missing after updating `quasar-extras`."},{"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.","cause":"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.","error":"Animate.css animations are not working in my Quasar application."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}