quasar-extras-svg-icons

Quasar Framework - Extras SVG Icons package

> Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Installation

npm install quasar-extras-svg-icons

# or

yarn add quasar-extras-svg-icons

Why?

Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that this package complements the @quasar/extras package by adding additional SVG Icons that you can use in your Quasar apps. These SVG icons have gone though a process known as flattening. As mentioned, it strips out unnecessay code to make them smaller and more efficient. Unfortunately, not all icon sets meet this criteria and fail.

Additonally, most icon sets have fixed colors. Our flattening process also includes the ability to change these colors to 'currentColor' so you have more control over the way the icon looks when you use our icon sets. Of course, this doesn't apply to some icons sets where the fixed colors are mandatory (like flags). In some cases, we have created a "two-tone" icon set by not only employing the 'currentColor', but then also using 'currentColor' with an opacity in the same icon.

Many of the icon sets are not installable via NPM or NPM version does not coincide with GitHub version (out of sync), so this may be the only way to access them without bloating your project.

Plus, Typescript type definition files are generated so you won't get any warnings when using the icons.

Additionally, everytime there is a major release of an Icon Set, we preserve the previous 2 versions for a total of 3 versions.

Contents

Please make sure you have latest quasar-extras-svg-icons npm package version installed into your project folder in order for you to benefit from everything below.

Documentation

You can find the latest documentation at quasar-extras-svg-icons.netlify.app

SVG

> Quasar v1.7+ required for svg Quasar Icon Sets.

Example (with Vue Composition API):

// some .vue file in devland
<template>
  <div>
    
    
  </div>
</template>

Now, the QExpansionItem will show the remArrowDownCircleFill from the remix-icons.

To determine which icons are replacable, go to the Quasar GitHub repo.

SVG name format

Svg icons will be defined as String with the following syntax:

Syntax: "