{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install quasar-extras-svg-icons"],"cli":null},"imports":["import akarIcons from 'quasar-extras-svg-icons/akar-icons';","import { antOutlined, antFilled } from 'quasar-extras-svg-icons/ant-design-icons';","import boxIcons from 'quasar-extras-svg-icons/box-icons';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}