@quasar/extras

1.16.10 • Public • Published

Quasar Framework logo

Quasar Framework Extras 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!

Join the chat at https://chat.quasar.dev https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg

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 the material icons npm package sometimes fails to be downloaded by NPM.

Contents

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.

Webfonts

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 v141 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 v170 material-symbols-outlined Material symbols outlined font Requires: @quasar/extras 1.14+ License
Material Symbols Rounded CDN v168 material-symbols-rounded Material symbols rounded font Requires: @quasar/extras 1.14+ License
Material Symbols Sharp CDN v166 material-symbols-sharp Material symbols sharp font Requires: @quasar/extras 1.14+ License
MDI v7 (Material Design Icons) 7.4.47 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.1 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.3 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.

SVG

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

Vendor Version Quasar IconSet name Import Icons from Notes License
Material Icons (Google) CDN v141 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 v170 svg-material-symbols-outlined @quasar/extras/material-symbols-outlined Requires: @quasar/extras 1.14+ License
Material Symbols Rounded (Google) CDN v168 svg-material-symbols-rounded @quasar/extras/material-symbols-rounded Requires: @quasar/extras 1.14+ License
Material Symbols Sharp (Google) CDN v166 svg-material-symbols-sharp @quasar/extras/material-symbols-sharp Requires: @quasar/extras 1.14+ License
MDI v7 (Material Design Icons) 7.4.47 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.1 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.3.1 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.3 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
  }
}

QIcon cheatsheet

<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 name format

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

Supporting Quasar

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.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Head on to the official community forum: https://forum.quasar.dev

Semver

Using semver 2.0 notation for '@quasar/extras' package.

License

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.

Package Sidebar

Install

npm i @quasar/extras

Homepage

quasar.dev

Weekly Downloads

109,246

Version

1.16.10

License

MIT

Unpacked Size

75.9 MB

Total Files

306

Last publish

Collaborators

  • rstoenescu
  • hawkeye64
  • smolinari
  • ilcallo