Quasar Extras SVG Icons

2.2.0 · active · verified Sun Apr 19

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.

Common errors

```
Error: Module not found: Error: Can't resolve '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.

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').
```
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
```
cause The `Quasar` global object or its `iconSet` property is not available or fully initialized when `Quasar.iconSet.add()` is called.

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.
```
[QIcon] icon 'akar:home' not found
```
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.

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.

Warnings

gotcha This package requires Quasar Framework version 1.7 or higher to properly support and display SVG icon sets within your application.
Fix: Ensure your Quasar project is using `quasar` package version `1.7.0` or newer. Update your `quasar` and `@quasar/app-*` packages if necessary.
breaking 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.
Fix: Upgrade your Node.js installation to version 20.20 or later. Check the official Quasar documentation for specific build tool requirements.
gotcha 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.
Fix: Update your `@quasar/extras` package to version `1.18.0` or higher to ensure proper TypeScript type resolution and compatibility.

Install

npm install quasar-extras-svg-icons npm
yarn add quasar-extras-svg-icons yarn
pnpm add quasar-extras-svg-icons pnpm

Imports

akarIcons
wrong:
```
const akarIcons = require('quasar-extras-svg-icons/akar-icons');
```
correct:
```
import akarIcons from '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 }
wrong:
```
import antDesignIcons from 'quasar-extras-svg-icons/ant-design-icons';
```
correct:
```
import { antOutlined, antFilled } 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.

Quickstart

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>
});

view raw JSON →