@quasar/extras
Quasar Framework fonts, icons and animations
Last updated 11 days ago by hawkeye64 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @quasar/extras 
SYNC missed versions from official npm registry.

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 v20 roboto-font Recommended font along Material theme License
Roboto Font Latin Extended CDN v20 roboto-font-latin-ext Recommended font along Material theme License
Material Icons (Google) CDN v53 material-icons Material icons font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Outlined CDN v22 material-icons-outlined Material icons outlined font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Round CDN v22 material-icons-round Material icons round font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
Material Icons Sharp CDN v23 material-icons-sharp Material icons sharp font Requires: Quasar 1.0.5+, @quasar/extras 1.2.0+ License
MDI v5 (Material Design Icons) 5.3.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.14.0 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 1.8+, @quasar/extras 1.5+ License
Animate.css 4.1.0 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) CDN v11 svg-material-icons @quasar/extras/material-icons License
Material Icons Outlined (Google) CDN v11 svg-material-icons-outlined @quasar/extras/material-icons-outlined Requires: @quasar/extras 1.9+; The Quasar Icon Set requires Quasar v1.12.13+ License
Material Icons Round (Google) CDN v11 svg-material-icons-round @quasar/extras/material-icons-round Requires: @quasar/extras 1.9+; The Quasar Icon Set requires Quasar v1.12.13+ License
Material Icons Sharp (Google) CDN v11 svg-material-icons-sharp @quasar/extras/material-icons-sharp Requires: @quasar/extras 1.9+; The Quasar Icon Set requires Quasar v1.12.13+ License
MDI v5 (Material Design Icons) 5.3.45 svg-mdi-v5 @quasar/extras/mdi-v5 The Quasar Icon Set is requires Quasar 1.9.9+ License
MDI v4 (Material Design Icons) 4.9.95 svg-mdi-v4 @quasar/extras/mdi-v4 License
Font Awesome 5.14.0 svg-fontawesome-v5 @quasar/extras/fontawesome-v5 License
Ionicons v5 5.1.2 svg-ionicons-v5 @quasar/extras/ionicons-v5 Requires: @quasar/extras 1.7+; The Quasar Icon Set requires Quasar v1.11+ Icon License
Ionicons v4 4.6.3 svg-ionicons-v4 @quasar/extras/ionicons-v4 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 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 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)

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.

Current Tags

  • 1.0.0-alpha.0                                ...           beta (2 years ago)
  • 1.9.3                                ...           latest (11 days ago)

32 Versions

  • 1.9.3                                ...           11 days ago
  • 1.9.2                                ...           12 days ago
  • 1.9.1                                ...           12 days ago
  • 1.9.0                                ...           20 days ago
  • 1.8.2                                ...           2 months ago
  • 1.8.1                                ...           3 months ago
  • 1.8.0                                ...           3 months ago
  • 1.7.0                                ...           3 months ago
  • 1.6.4                                ...           4 months ago
  • 1.6.3                                ...           4 months ago
  • 1.6.2                                ...           4 months ago
  • 1.6.1                                ...           4 months ago
  • 1.6.0                                ...           5 months ago
  • 1.5.2                                ...           6 months ago
  • 1.5.1                                ...           6 months ago
  • 1.5.0                                ...           7 months ago
  • 1.4.2                                ...           7 months ago
  • 1.4.1                                ...           7 months ago
  • 1.4.0                                ...           7 months ago
  • 1.3.3                                ...           9 months ago
  • 1.3.2                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           2 years ago
  • 1.0.0-alpha.1                                ...           2 years ago
  • 1.0.0-alpha.0                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |