@quasar/extras
Advanced tools
Package description
@quasar/extras is a collection of additional resources for the Quasar Framework, including icon sets, font libraries, and other extras that can be used to enhance the visual and functional aspects of Quasar applications.
Icon Sets
This feature allows you to import and use various icon sets such as Material Icons, FontAwesome, and more in your Quasar applications.
import 'quasar/icon-set/material-icons';Font Libraries
This feature allows you to import and use different font libraries like Roboto, Material Icons, etc., to style your Quasar applications.
import 'quasar/fonts/roboto-font';Animations
This feature allows you to import and use various CSS animations to enhance the user experience in your Quasar applications.
import 'quasar/animations/fadeIn.css';Font Awesome is a popular icon set and toolkit that provides a wide range of icons and social logos. It is similar to @quasar/extras in that it offers a collection of icons that can be easily integrated into web applications.
Material Icons is a set of icons designed by Google and used in Material Design. It is similar to @quasar/extras in that it provides a comprehensive set of icons that can be used in web applications.
Animate.css is a library of ready-to-use, cross-browser animations for use in web projects. It is similar to @quasar/extras in that it provides a collection of animations that can be easily integrated into web applications.
Readme
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!
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 the material icons npm package sometimes fails to be downloaded by NPM.
Please make sure you have latest @quasar/extras npm package version installed into your project folder in order for you to benefit from everything below.
| Vendor | Version | quasar.conf.js extras name | Description | Notes | License |
|---|---|---|---|---|---|
| Roboto Font | CDN v30 | roboto-font | Recommended font along Material theme | License | |
| Roboto Font Latin Extended | CDN v30 | roboto-font-latin-ext | Recommended font along Material theme | License | |
| Material Icons (Google) | CDN v140 | material-icons | Material icons font | Requires: @quasar/extras 1.2+ | License |
| Material Icons Outlined | CDN v109 | material-icons-outlined | Material icons outlined font | Requires: @quasar/extras 1.2+ | License |
| Material Icons Round | CDN v108 | material-icons-round | Material icons round font | Requires: @quasar/extras 1.2+ | License |
| Material Icons Sharp | CDN v109 | material-icons-sharp | Material icons sharp font | Requires: @quasar/extras 1.2+ | License |
| Material Symbols Outlined | CDN v151 | material-symbols-outlined | Material symbols outlined font | Requires: @quasar/extras 1.14+ | License |
| Material Symbols Rounded | CDN v150 | material-symbols-rounded | Material symbols rounded font | Requires: @quasar/extras 1.14+ | License |
| Material Symbols Sharp | CDN v147 | material-symbols-sharp | Material symbols sharp font | Requires: @quasar/extras 1.14+ | License |
| MDI v7 (Material Design Icons) | 7.2.96 | mdi-v7 | Extended Material Design icons font | Requires: @quasar/extras 1.15+ | License |
| MDI v6 (Material Design Icons) | 6.9.96 | mdi-v6 | Extended Material Design icons font | License | |
| MDI v5 (Material Design Icons) | 5.9.55 | mdi-v5 | Extended Material Design icons font | License | |
| MDI v4 (Material Design Icons) | 4.9.95 | mdi-v4 | Extended Material Design icons font | License | |
| MDI v3 (Material Design Icons) | 3.6.95 | mdi-v3 | Extended Material Design icons font | License | |
| Font Awesome v6 | 6.5.0 | fontawesome-v6 | Fontawesome icons font | Requires: @quasar/extras 1.13+ | License |
| Font Awesome v5 | 5.15.4 | fontawesome-v5 | Fontawesome icons font | License | |
| Ionicons | 4.6.3 | ionicons-v4 | Ionicons font | License | |
| Eva Icons | 1.1.3 | eva-icons | Eva Icons font | License | |
| Themify Icons | 1.0.1 | themify | Themify Icons font | License | |
| Line Awesome | 1.3.0 | line-awesome | Line Awesome font | Requires: @quasar/extras 1.5+ | License |
| Bootstrap Icons | 1.11.2 | bootstrap-icons | Bootstrap Icons font | Requires: @quasar/extras 1.10+ | License |
| Animate.css | 4.1.1 | Use animations prop | Bundle of animations you can use in your website/app | License |
Install one of MDI v6, MDI v5, MDI v4 or MDI v3, but never together at the same time.
Note that ionicons v5+ no longer comes with a webfont.
Quasar v1.7+ required for svg Quasar Icon Sets.
| Vendor | Version | Quasar IconSet name | Import Icons from | Notes | License |
|---|---|---|---|---|---|
| Material Icons (Google) | CDN v140 | svg-material-icons | @quasar/extras/material-icons | License | |
| Material Icons Outlined (Google) | CDN v109 | svg-material-icons-outlined | @quasar/extras/material-icons-outlined | Requires: @quasar/extras 1.9+ | License |
| Material Icons Round (Google) | CDN v108 | svg-material-icons-round | @quasar/extras/material-icons-round | Requires: @quasar/extras 1.9+ | License |
| Material Icons Sharp (Google) | CDN v109 | svg-material-icons-sharp | @quasar/extras/material-icons-sharp | Requires: @quasar/extras 1.9+ | License |
| Material Symbols Outlined (Google) | CDN v151 | svg-material-symbols-outlined | @quasar/extras/material-symbols-outlined | Requires: @quasar/extras 1.14+ | License |
| Material Symbols Rounded (Google) | CDN v150 | svg-material-symbols-rounded | @quasar/extras/material-symbols-rounded | Requires: @quasar/extras 1.14+ | License |
| Material Symbols Sharp (Google) | CDN v147 | svg-material-symbols-sharp | @quasar/extras/material-symbols-sharp | Requires: @quasar/extras 1.14+ | License |
| MDI v7 (Material Design Icons) | 7.2.96 | svg-mdi-v7 | @quasar/extras/mdi-v7 | License | |
| MDI v6 (Material Design Icons) | 6.9.96 | svg-mdi-v6 | @quasar/extras/mdi-v6 | License | |
| MDI v5 (Material Design Icons) | 5.9.55 | svg-mdi-v5 | @quasar/extras/mdi-v5 | License | |
| MDI v4 (Material Design Icons) | 4.9.95 | svg-mdi-v4 | @quasar/extras/mdi-v4 | License | |
| Font Awesome v6 | 6.5.0 | svg-fontawesome-v6 | @quasar/extras/fontawesome-v6 | Requires: @quasar/extras 1.13+ | License |
| Font Awesome v5 | 5.15.4 | svg-fontawesome-v5 | @quasar/extras/fontawesome-v5 | License | |
| Ionicons v7 | 7.1.2 | svg-ionicons-v7 | @quasar/extras/ionicons-v7 | Requires: @quasar/extras 1.16+ | Icon License |
| Ionicons v6 | 6.1.3 | svg-ionicons-v6 | @quasar/extras/ionicons-v6 | Requires: @quasar/extras 1.12+ | Icon License |
| Ionicons v5 | 5.5.4 | svg-ionicons-v5 | @quasar/extras/ionicons-v5 | Requires: @quasar/extras 1.7+ | Icon License |
| Ionicons v4 | 4.6.3 | svg-ionicons-v4 | @quasar/extras/ionicons-v4 | No icon font (woof) files for Ionicons since v4.6.3 | Icon License |
| Eva Icons | 1.1.3 | svg-eva-icons | @quasar/extras/eva-icons | License | |
| Themify Icons | 1.0.1 | svg-themify | @quasar/extras/themify | License | |
| Line Awesome | 1.3.0 | svg-line-awesome | @quasar/extras/line-awesome | Requires: @quasar/extras 1.5+ | License |
| Bootstrap Icons | 1.11.2 | svg-bootstrap-icons | @quasar/extras/bootstrap-icons | Requires: @quasar/extras 1.10+ | License |
Example:
// some .vue file in devland
<template>
<div>
<q-icon :name="matMenu" />
<q-btn :icon="mdiAbTesting" />
</div>
</template>
<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v5'
export default {
// ...
created () {
this.matMenu = matMenu
this.mdiAbTesting = mdiAbTesting
}
}
<q-icon name="..." />
| Name | Prefix | Examples | Notes | License |
|---|---|---|---|---|
| material-icons | None | thumb_up | Notice the underline character instead of dash or space | |
| material-icons-outlined | o_ | o_thumb_up | Notice the underline character instead of dash or space | |
| material-icons-round | r_ | r_thumb_up | Notice the underline character instead of dash or space | |
| material-icons-sharp | s_ | s_thumb_up | Notice the underline character instead of dash or space | |
| ionicons-v4 | ion-, ion-md-, ion-ios-, ion-logo- | ion-heart, ion-logo-npm, ion-md-airplane | Use QIcon instead of <ion-icon> component; Logo icons require 'ion-logo-' prefix | |
| fontawesome-v5 | fa[s,r,l,b,d] fa- | "fas fa-ambulance" | QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show <i> tags) | |
| mdi-v5 | mdi- | mdi-alert-circle-outline | Notice the use of dash characters | |
| eva-icons | eva- | eva-shield-outline, eva-activity-outline | Notice the use of dash characters | |
| themify | ti- | ti-hand-point-up | Notice the use of dash characters | |
| line-awesome | la[s,r,l,b,d] la- | "las la-atom" | QIcon "name" property is same as "class" attribute value in Line Awesome docs examples (where they show <i> tags) | |
| bootstrap-icons | bi- | bi-bug-fill | Notice the use of dash characters |
Svg icons will be defined as String with the following syntax:
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
Examples:
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 24 24
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.
Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.
Head on to the Quasar Framework official website: https://quasar.dev
For latest releases and announcements, follow on Twitter: @quasarframework
Ask questions at the official community Discord server: https://chat.quasar.dev
Head on to the official community forum: https://forum.quasar.dev
Using semver 2.0 notation for '@quasar/extras' package.
All assets included in this repository are exclusive property of their respective owners and licensed under their own respective licenses. Quasar does not take any credit in packages included here.
FAQs
Unknown package
We found that @quasar/extras demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The maintainer of the node-ip project restored the GitHub repo after disputing an exaggerated CVE rating, highlighting the impact of bogus CVEs on open source projects.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.