{"id":11614,"library":"quasar-extras-svg-icons","title":"Quasar Extras SVG Icons","description":"The `quasar-extras-svg-icons` package, currently at stable version 2.2.0, provides a curated collection of pre-processed SVG icon sets specifically optimized for the Quasar Framework. It distinguishes itself by streamlining icons from various upstream sources, significantly reducing package sizes for quicker downloads and improved application performance. The package flattens SVG code, normalizes icon colors to `currentColor` (allowing for dynamic styling via CSS), and in some cases, provides \"two-tone\" variants for enhanced visual flexibility. It aims to offer consistent access to popular icon sets that might otherwise be difficult to integrate due to npm synchronization issues or bloat. Furthermore, it includes TypeScript type definitions for robust development and maintains backward compatibility by preserving previous major icon set versions. This package acts as a vital complement to the core `@quasar/extras` package, greatly expanding the available SVG icon options for Quasar v1.7+ projects. Its release cadence is generally tied to significant updates of underlying icon sets and the broader Quasar ecosystem developments.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/quasarframework/quasar","tags":["javascript","quasar","framework","svg icons"],"install":[{"cmd":"npm install quasar-extras-svg-icons","lang":"bash","label":"npm"},{"cmd":"yarn add quasar-extras-svg-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add quasar-extras-svg-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required at runtime for Quasar's icon system and QIcon component. Specific features like SVG icon sets require Quasar v1.7+.","package":"quasar","optional":false},{"reason":"Complements the core Quasar Extras package by providing additional SVG icon sets. Essential for certain type definitions and integration since v1.18+.","package":"@quasar/extras","optional":false}],"imports":[{"note":"Icon sets are typically imported as default exports for registration with Quasar's icon system. CommonJS `require()` is not supported in modern Quasar projects using ESM.","wrong":"const akarIcons = require('quasar-extras-svg-icons/akar-icons');","symbol":"akarIcons","correct":"import akarIcons from 'quasar-extras-svg-icons/akar-icons';"},{"note":"The 'ant-design-icons' module provides multiple named exports for different icon styles (e.g., outlined, filled), each being an icon set object suitable for Quasar.","wrong":"import antDesignIcons from 'quasar-extras-svg-icons/ant-design-icons';","symbol":"{ antOutlined, antFilled }","correct":"import { antOutlined, antFilled } from 'quasar-extras-svg-icons/ant-design-icons';"},{"note":"Each supported SVG icon set usually resides in its own module and is imported as a default export.","symbol":"BoxIcons","correct":"import boxIcons from 'quasar-extras-svg-icons/box-icons';"}],"quickstart":{"code":"import { boot } from 'quasar/wrappers';\nimport { Quasar } from 'quasar';\n\n// Import specific icon sets you intend to use\nimport akarIcons from 'quasar-extras-svg-icons/akar-icons';\nimport { antOutlined } from 'quasar-extras-svg-icons/ant-design-icons';\n\nexport default boot(() => {\n  // Register Akar Icons with Quasar's icon system\n  // The imported 'akarIcons' object should conform to Quasar's icon set structure.\n  // 'add' replaces if a set with the same name exists, 'extend' merges.\n  Quasar.iconSet.add(akarIcons);\n\n  // Register Ant Design Outlined Icons\n  Quasar.iconSet.add(antOutlined);\n\n  // To use these icons in a Vue component (e.g., src/pages/IndexPage.vue):\n  // <template>\n  //   <q-page class=\"flex flex-center q-gutter-md\">\n  //     <q-icon name=\"akar:home\" size=\"lg\" color=\"primary\" />\n  //     <q-icon name=\"antOutlined:user-add\" size=\"lg\" color=\"secondary\" />\n  //     <p>SVG icons loaded from quasar-extras-svg-icons.</p>\n  //   </q-page>\n  // </template>\n});","lang":"typescript","description":"Demonstrates how to import and register custom SVG icon sets from `quasar-extras-svg-icons` using a Quasar boot file, making the icons available for use with the `QIcon` component throughout your application via their defined prefixes."},"warnings":[{"fix":"Ensure your Quasar project is using `quasar` package version `1.7.0` or newer. Update your `quasar` and `@quasar/app-*` packages if necessary.","message":"This package requires Quasar Framework version 1.7 or higher to properly support and display SVG icon sets within your application.","severity":"gotcha","affected_versions":"<1.7.0"},{"fix":"Upgrade your Node.js installation to version 20.20 or later. Check the official Quasar documentation for specific build tool requirements.","message":"Projects using `quasar-extras-svg-icons` within the Quasar ecosystem should be aware of a breaking change in the Quasar CLI and build tools (Quasar v2.19.0, @quasar/cli-v3.0.0). Node.js runtime environment 20.20 or newer is now required.","severity":"breaking","affected_versions":">=2.19.0 (Quasar ecosystem)"},{"fix":"Update your `@quasar/extras` package to version `1.18.0` or higher to ensure proper TypeScript type resolution and compatibility.","message":"Quasar's internal type handling for `@quasar/extras` was decoupled from the UI package (Qv2.19.3), affecting how types might be consumed. For correct type definitions and integration, ensure `@quasar/extras` is at least v1.18.0.","severity":"gotcha","affected_versions":"<=2.19.2 (Quasar), <1.18.0 (@quasar/extras)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install quasar-extras-svg-icons` (or `yarn add quasar-extras-svg-icons`) to install the package. Verify the exact import path matches the icon set name (e.g., 'quasar-extras-svg-icons/akar-icons').","cause":"The `quasar-extras-svg-icons` package is not installed, or the import path specified for the icon set is incorrect.","error":"Error: Module not found: Error: Can't resolve 'quasar-extras-svg-icons/akar-icons'"},{"fix":"Ensure icon set registration code is placed within a Quasar boot file (`src/boot/*.ts`) or a lifecycle hook that executes after the Quasar framework has been properly initialized.","cause":"The `Quasar` global object or its `iconSet` property is not available or fully initialized when `Quasar.iconSet.add()` is called.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'add')"},{"fix":"Verify that the icon set (`akarIcons`) is imported and registered correctly via `Quasar.iconSet.add(akarIcons)` in a boot file. Ensure the prefix (e.g., `akar`) used in the `QIcon`'s `name` prop matches the `name` property of the registered icon set.","cause":"The specified icon set ('akar') or the specific icon ('home') has not been correctly registered with Quasar's icon system, or the prefix in the `name` prop does not match the registered set.","error":"[QIcon] icon 'akar:home' not found"}],"ecosystem":"npm"}