@quasar/extras

    1.14.1 • 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 v29 roboto-font Recommended font along Material theme License
    Roboto Font Latin Extended CDN v29 roboto-font-latin-ext Recommended font along Material theme License
    Material Icons (Google) CDN v130 material-icons Material icons font Requires: @quasar/extras 1.2+ License
    Material Icons Outlined CDN v106 material-icons-outlined Material icons outlined font Requires: @quasar/extras 1.2+ License
    Material Icons Round CDN v105 material-icons-round Material icons round font Requires: @quasar/extras 1.2+ License
    Material Icons Sharp CDN v106 material-icons-sharp Material icons sharp font Requires: @quasar/extras 1.2+ License
    Material Symbols Outlined CDN v14 material-symbols-outlined Material symbols outlined font Requires: @quasar/extras 1.14+ License
    Material Symbols Rounded CDN v14 material-symbols-rounded Material symbols rounded font Requires: @quasar/extras 1.14+ License
    Material Symbols Sharp CDN v14 material-symbols-sharp Material symbols sharp font Requires: @quasar/extras 1.14+ License
    MDI v6 (Material Design Icons) 6.7.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.1.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.8.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 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 v130 svg-material-icons @quasar/extras/material-icons License
    Material Icons Outlined (Google) CDN v106 svg-material-icons-outlined @quasar/extras/material-icons-outlined Requires: @quasar/extras 1.9+ License
    Material Icons Round (Google) CDN v105 svg-material-icons-round @quasar/extras/material-icons-round Requires: @quasar/extras 1.9+ License
    Material Icons Sharp (Google) CDN v106 svg-material-icons-sharp @quasar/extras/material-icons-sharp Requires: @quasar/extras 1.9+ License
    Material Symbols Outlined (Google) CDN v14 svg-material-symbols-outlined @quasar/extras/material-symbols-outlined Requires: @quasar/extras 1.14+ License
    Material Symbols Rounded (Google) CDN v14 svg-material-symbols-rounded @quasar/extras/material-symbols-rounded Requires: @quasar/extras 1.14+ License
    Material Symbols Sharp (Google) CDN v14 svg-material-symbols-sharp @quasar/extras/material-symbols-sharp Requires: @quasar/extras 1.14+ License
    MDI v6 (Material Design Icons) 6.7.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.1.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 v6 6.0.2 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.8.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.

    Install

    npm i @quasar/extras

    Homepage

    quasar.dev

    DownloadsWeekly Downloads

    72,120

    Version

    1.14.1

    License

    MIT

    Unpacked Size

    62.4 MB

    Total Files

    290

    Last publish

    Collaborators

    • rstoenescu
    • hawkeye64
    • smolinari
    • ilcallo