Skip to content

Latest commit

 

History

History
 
 

extras

Quasar Framework logo

Quasar Framework Extras Package

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.

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 v19 roboto-font Recommended font along Material theme License
Roboto Font Latin Extended CDN v19 roboto-font-latin-ext Recommended font along Material theme License
Material Icons (Google) CDN v48 material-icons Material icons font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Outlined CDN v17 material-icons-outlined Material icons outlined font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Round CDN v17 material-icons-round Material icons round font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Sharp CDN v18 material-icons-sharp Material icons sharp font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
MDI v5 (Material Design Icons) 5.0.45 mdi-v5 Extended Material Design icons font The Quasar Icon Set is available in Quasar 1.9.9+ 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 5.12.1 fontawesome-v5 Fontawesome icons font License
Ionicons 4.6.3 ionicons-v4 Ionicons font License
Eva Icons 1.1.2 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 1.8+, @quasar/extras 1.5+ License
Animate.css 3.7.2 Use animations prop Bundle of animations you can use in your website/app License

Either install MDI v4 or MDI v3, but never both at the same time.

SVG

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

Vendor Version Quasar IconSet name Import Icons from Notes License
Material Icons (Google) 3.0.1 svg-material-icons @quasar/extras/material-icons The svgs are many years old! Recommending the use of MDI svgs instead. License
Material Icons Outlined (Google) Not yet available License
Material Icons Round (Google) Not yet available License
Material Icons Sharp (Google) Not yet available License
MDI v5 (Material Design Icons) 5.0.45 svg-mdi-v5 @quasar/extras/mdi-v5 The Quasar Icon Set is available in Quasar 1.9.9+ License
MDI v4 (Material Design Icons) 4.9.95 svg-mdi-v4 @quasar/extras/mdi-v4 License
Font Awesome 5.12.1 svg-fontawesome-v5 @quasar/extras/fontawesome-v5 License
Ionicons 4.6.3 svg-ionicons-v4 @quasar/extras/ionicons-v4 Icon License
Eva Icons 1.1.2 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 1.8+, @quasar/extras 1.5+ 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-v4'

export default {
  // ...
  created () {
    this.matMenu = matMenu
    this.mdiAbTesting = mdiAbTesting
  }
}

QIcon cheatsheet

<q-icon name="..." />
Name Prefix Examples Notes Licence
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)

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.