Registry /
type-stubs / quasar-extras-svg-icons
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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
akarIcons
✓ import akarIcons from 'quasar-extras-svg-icons/akar-icons';
✗ const akarIcons = require('quasar-extras-svg-icons/akar-icons');
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.
{ antOutlined, antFilled }
✓ import { antOutlined, antFilled } from 'quasar-extras-svg-icons/ant-design-icons';
✗ import antDesignIcons from 'quasar-extras-svg-icons/ant-design-icons';
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.
BoxIcons
✓ import boxIcons from 'quasar-extras-svg-icons/box-icons';
Each supported SVG icon set usually resides in its own module and is imported as a default export.
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.
import { boot } from 'quasar/wrappers';
import { Quasar } from 'quasar';
// Import specific icon sets you intend to use
import akarIcons from 'quasar-extras-svg-icons/akar-icons';
import { antOutlined } from 'quasar-extras-svg-icons/ant-design-icons';
export default boot(() => {
// Register Akar Icons with Quasar's icon system
// The imported 'akarIcons' object should conform to Quasar's icon set structure.
// 'add' replaces if a set with the same name exists, 'extend' merges.
Quasar.iconSet.add(akarIcons);
// Register Ant Design Outlined Icons
Quasar.iconSet.add(antOutlined);
// To use these icons in a Vue component (e.g., src/pages/IndexPage.vue):
// <template>
// <q-page class="flex flex-center q-gutter-md">
// <q-icon name="akar:home" size="lg" color="primary" />
// <q-icon name="antOutlined:user-add" size="lg" color="secondary" />
// <p>SVG icons loaded from quasar-extras-svg-icons.</p>
// </q-page>
// </template>
});
Debug
Known issues
gotchaThis package requires Quasar Framework version 1.7 or higher to properly support and display SVG icon sets within your application.fixEnsure your Quasar project is using `quasar` package version `1.7.0` or newer. Update your `quasar` and `@quasar/app-*` packages if necessary.
affects: <1.7.0
breakingProjects 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.fixUpgrade your Node.js installation to version 20.20 or later. Check the official Quasar documentation for specific build tool requirements.
affects: >=2.19.0 (Quasar ecosystem)
gotchaQuasar'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.fixUpdate your `@quasar/extras` package to version `1.18.0` or higher to ensure proper TypeScript type resolution and compatibility.
affects: <=2.19.2 (Quasar), <1.18.0 (@quasar/extras)
Errors
Common errors & fixes
Error: Module not found: Error: Can't resolve 'quasar-extras-svg-icons/akar-icons'
The `quasar-extras-svg-icons` package is not installed, or the import path specified for the icon set is incorrect.
fixRun `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').
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
The `Quasar` global object or its `iconSet` property is not available or fully initialized when `Quasar.iconSet.add()` is called.
fixEnsure 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.
[QIcon] icon 'akar:home' not found
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.
fixVerify 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.
Audit
Dependencies
quasarrequiredRequired at runtime for Quasar's icon system and QIcon component. Specific features like SVG icon sets require Quasar v1.7+.
@quasar/extrasrequiredComplements the core Quasar Extras package by providing additional SVG icon sets. Essential for certain type definitions and integration since v1.18+.