npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@quasar/extras

v1.16.15

Published

Quasar Framework fonts, icons and animations

Downloads

569,294

Readme

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 v32 | roboto-font | Recommended font along Material theme | | License | | Roboto Font Latin Extended | CDN v32 | roboto-font-latin-ext | Recommended font along Material theme | | License | | Material Icons (Google) | CDN v142 | 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 v222 | material-symbols-outlined | Material symbols outlined font | Requires: @quasar/extras 1.14+ | License | | Material Symbols Rounded | CDN v222 | material-symbols-rounded | Material symbols rounded font | Requires: @quasar/extras 1.14+ | License | | Material Symbols Sharp | CDN v218 | 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.7.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 v142 | 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 v222 | svg-material-symbols-outlined | @quasar/extras/material-symbols-outlined | Requires: @quasar/extras 1.14+ | License | | Material Symbols Rounded (Google) | CDN v222 | svg-material-symbols-rounded | @quasar/extras/material-symbols-rounded | Requires: @quasar/extras 1.14+ | License | | Material Symbols Sharp (Google) | CDN v218 | 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.7.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.4.0 | 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.