Socket
Socket
Sign inDemoInstall

quasar-extras-svg-icons

Package Overview
Dependencies
0
Maintainers
1
Versions
83
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    quasar-extras-svg-icons

Extra SVG Icons for Quasar Framework


Version published
Weekly downloads
445
increased by20.92%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Quasar Framework logo

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

quasar-extras-svg-icons

Join the chat at https://chat.quasar.dev

Installation

npm install quasar-extras-svg-icons

# or

yarn add quasar-extras-svg-icons

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 this package complements the @quasar/extras package by adding additional SVG Icons that you can use in your Quasar apps. These SVG icons have gone though a process known as flattening. As mentioned, it strips out unnecessay code to make them smaller and more efficient. Unfortunately, not all icon sets meet this criteria and fail.

Additonally, most icon sets have fixed colors. Our flattening process also includes the ability to change these colors to 'currentColor' so you have more control over the way the icon looks when you use our icon sets. Of course, this doesn't apply to some icons sets where the fixed colors are mandatory (like flags). In some cases, we have created a "two-tone" icon set by not only employing the 'currentColor', but then also using 'currentColor' with an opacity in the same icon.

Many of the icon sets are not installable via NPM or NPM version does not coincide with GitHub version (out of sync), so this may be the only way to access them without bloating your project.

Plus, Typescript type definition files are generated so you won't get any warnings when using the icons.

Additionally, everytime there is a major release of an Icon Set, we preserve the previous 2 versions for a total of 3 versions.

Contents

Please make sure you have latest quasar-extras-svg-icons npm package version installed into your project folder in order for you to benefit from everything below.

Documentation

You can find the latest documentation at quasar-extras-svg-icons.netlify.app

SVG

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

VendorVersionImport SVG Icons asPrefixLicense
Akar Icons1.9.28quasar-extras-svg-icons/akar-iconsakarLicense
Ant Design Icons4.4.2quasar-extras-svg-icons/ant-design-iconsantOutlined, antFilled, antTwoToneLicense
Box Icons2.1.4quasar-extras-svg-icons/box-iconsbx, bxl, bxsLicense
Brand Icons2.0.0quasar-extras-svg-icons/brand-iconsbrndLicense
Brandico Icons0.0.0quasar-extras-svg-icons/brandico-iconsbricoLicense
Bytesize Icons1.4.0quasar-extras-svg-icons/bytesize-iconsbyteLicense
Carbon Icons v1111.39.0quasar-extras-svg-icons/carbon-icons-v11carbonLicense
Carbon Icons v1010.48.0quasar-extras-svg-icons/carbon-iconscarbonLicense
Carbon Pictograms v1212.34.0quasar-extras-svg-icons/carbon-pictograms-v12carpicLicense
Carbon Pictograms v1111.24.0quasar-extras-svg-icons/carbon-pictogramscarpicLicense
Clarity Icons (@cds/core) v66.10.0quasar-extras-svg-icons/clarity-icons-v6clarityLicense
Clarity Icons (@cds/core) v55.7.1quasar-extras-svg-icons/clarity-iconsclarityLicense
Codicons (vscode)0.0.35quasar-extras-svg-icons/condiconscodiLicense
Cool Icons2.5.0quasar-extras-svg-icons/cool-iconscoolLicense
CoreUI Icons v33.0.1quasar-extras-svg-icons/coreui-icons-v3cui, cib, cifLicense
CoreUI Icons v22.1.0quasar-extras-svg-icons/coreui-iconscui, cib, cifLicense
Country Flag Icons1.5.11quasar-extras-svg-icons/country-flag-iconsflagLicense
Dashicons0.9.0quasar-extras-svg-icons/dashiconsdashLicense
Devicons1.8.0quasar-extras-svg-icons/dev-iconsdevLicense
Drip Icons2.0.0quasar-extras-svg-icons/drip-iconsdripLicense
Elusive Icons1.10.1quasar-extras-svg-icons/elusive-iconseliLicense
Entypo+ Icons2.2.1quasar-extras-svg-icons/entypo-iconsentypoLicense
Evil Icons1.10.1quasar-extras-svg-icons/evil-iconseiLicense
Feather Icons4.29.1quasar-extras-svg-icons/feather-iconsfeatherLicense
Flat Color Icons (Icons8)1.1.0quasar-extras-svg-icons/flat-color-iconsfciLicense
FlatUI Icons1.4.0quasar-extras-svg-icons/flatui-iconsflatLicense
Fluent UI System Icons1.1.236quasar-extras-svg-icons/fluentui-system-iconsfuiLicense
Fontisto Icons3.0.4quasar-extras-svg-icons/fontisto-iconsfontistoLicense
Foundation Icons0.1.1quasar-extras-svg-icons/foundation-iconsfiLicense
Geom Icons3.0.0-beta.1quasar-extras-svg-icons/grid-iconsgeomLicense
GitLab Icons v33.97.0quasar-extras-svg-icons/gitlab-icons-v3gitlabLicense
GitLab Icons v22.33.0quasar-extras-svg-icons/gitlab-iconsgitlabLicense
Glyphs Brandsv0.1.9quasar-extras-svg-icons/glyphs-brandsglyphsBrandsThin, glyphsBrandsSolidLicense
Glyphs Core Iconsv0.8.12quasar-extras-svg-icons/glyphs-core-iconsglyphsCoreBold, glyphsCoreDuo, glyphsCoreOutline, glyphsCoreThin, glyphsCorePolyLicense
Grid Icons3.4.0quasar-extras-svg-icons/grid-iconsgridiconsLicense
Health Icons v11.0.2quasar-extras-svg-icons/health-iconshealthLicense
Health Icons0.1.0quasar-extras-svg-icons/health-iconshealthLicense
Hero Icons v22.1.3quasar-extras-svg-icons/hero-icons-v2heroOutline, heroSolidLicense
Hero Icons v11.0.6quasar-extras-svg-icons/hero-iconsheroOutline, heroSolidLicense
Icomoon Free Icons0.0.0quasar-extras-svg-icons/icomoon-free-iconsicomoonFreeLicense
Iconoir Icons v77.6.0quasar-extras-svg-icons/iconoir-icons-v7icoLicense
Iconoir Icons v66.11.0quasar-extras-svg-icons/iconoir-icons-v6icoLicense
Iconoir Icons v55.5.2quasar-extras-svg-icons/iconoir-icons-v5icoLicense
IconPark Icons1.0.0quasar-extras-svg-icons/iconpark-iconsipLicense
IconPark Icons1.0.0quasar-extras-svg-icons/iconpark-iconsipLicense
IconPark Icons1.0.0quasar-extras-svg-icons/iconpark-iconsipLicense
Ikonate1.1.1quasar-extras-svg-icons/ikonateikonateLicense
Ikons0.0.0quasar-extras-svg-icons/ikonsikonsLicense
Jam Icons2.0.0quasar-extras-svg-icons/jam-iconsjamLicense
Keyrune Icons3.13.1quasar-extras-svg-icons/keyrune-iconskeyruneLicense
Linear Icons1.0.2quasar-extras-svg-icons/linear-iconslnrLicense
Linecons0.0.0quasar-extras-svg-icons/lineconslconsLicense
Maki Icons (Mapbox) v88.0.1quasar-extras-svg-icons/maki-icons-v8makiLicense
Maki Icons (Mapbox) v77.1.0quasar-extras-svg-icons/maki-iconsmakiLicense
Map Icons3.0.3quasar-extras-svg-icons/map-iconsmapLicense
Material Line Icons v11.0.5quasar-extras-svg-icons/material-line-iconsmatLineLicense
Material Line Icons0.2.19quasar-extras-svg-icons/material-line-iconsmatLineLicense
Material Theme Icons v33.2.0quasar-extras-svg-icons/material-theme-icons-v3mtiLicense
Material Theme Icons2.7.5quasar-extras-svg-icons/material-theme-iconsmtiLicense
Modern Icons0.0.0quasar-extras-svg-icons/modern-iconsmodernLicense
Octicons (Primer) v1919.9.0quasar-extras-svg-icons/oct-icons-v19octLicense
Octicons (Primer) v1818.3.0quasar-extras-svg-icons/oct-icons-v18octLicense
Octicons (Primer) v1717.11.1quasar-extras-svg-icons/oct-icons-v17octLicense
Open Iconic1.1.1quasar-extras-svg-icons/open-iconicoiLicense
Openmoji Icons v1514.0.0quasar-extras-svg-icons/openmoji-icons-v15om, omcLicense
Openmoji Icons v1415.0.0quasar-extras-svg-icons/openmoji-icons-v14om, omcLicense
Openmoji Icons v1313.1.0quasar-extras-svg-icons/openmoji-iconsom, omcLicense
Phosphor Icons v22.0.3quasar-extras-svg-icons/phosphor-icons-v2ppLicense
Phosphor Icons v11.4.2quasar-extras-svg-icons/phosphor-iconsppLicense
Pixelart Icons1.7.0quasar-extras-svg-icons/pixelart-iconspixLicense
Polaris (Shopify) Icons v99.0.0quasar-extras-svg-icons/polaris-icons-v9primeLicense
Prime Icons v77.0.0quasar-extras-svg-icons/prime-icons-v7primeLicense
Prime Icons v66.0.1quasar-extras-svg-icons/prime-icons-v6primeLicense
PrimeIcons v55.0.0quasar-extras-svg-icons/prime-iconsprimeLicense
Radix-UI Icon1.3.0quasar-extras-svg-icons/radix-ui-iconsradixLicense
Remix Icon v43.6.0quasar-extras-svg-icons/remix-icons-v4remLicense
Remix Icon v33.6.0quasar-extras-svg-icons/remix-icons-v3remLicense
Simple Icons v1110.0.0quasar-extras-svg-icons/simple-icons-v11simLicense
Simple Icons v1010.0.0quasar-extras-svg-icons/simple-icons-v10simLicense
Simple Icons v99.19.1quasar-extras-svg-icons/simple-icons-v9simLicense
Simple Line Icons2.5.5quasar-extras-svg-icons/simple-line-iconssliLicense
Stroke 7 Icons (Pixeden)1.2.3quasar-extras-svg-icons/stroke7-iconsstrk7License
Subway Icons0.0.0quasar-extras-svg-icons/subway-iconssubLicense
System UIcons0.0.0quasar-extras-svg-icons/system-uiconssuiLicense
Tabler Icons v33.2.0quasar-extras-svg-icons/tabler-icons-v3tab, tabBrandLicense
Tabler Icons v22.42.0quasar-extras-svg-icons/tabler-icons-v2tab, tabBrandLicense
Tabler Icons v11.119.0quasar-extras-svg-icons/tabler-iconstab, tabBrandLicense
Teeny Icons0.4.1quasar-extras-svg-icons/teeny-iconsteenyOutline, teenySolidLicense
Typicons2.1.2quasar-extras-svg-icons/typ-iconstypLicense
UIW Icons2.6.18quasar-extras-svg-icons/uiw-iconsuiwLicense
Unicons4.0.8quasar-extras-svg-icons/uniconsuni, uniSolid, uniThinLicense
Vaadin Icons v2424.3.11quasar-extras-svg-icons/vaadin-icons-v24vaadinLicense
Vaadin Icons v2323.3.7quasar-extras-svg-icons/vaadin-icons-v23vaadinLicense
Vaadin Icons v2222.0.6quasar-extras-svg-icons/vaadin-iconsvaadinLicense
Weather Icons2.0.12quasar-extras-svg-icons/weather-iconswiLicense
Webfont Medical Icons1.0.0quasar-extras-svg-icons/webfont-medical-iconswmedLicense
Windows Icons0.0.0quasar-extras-svg-icons/windows-iconsappbarLicense
Zond Icons1.2.0quasar-extras-svg-icons/zond-iconszondLicense

Example (with Vue Composition API):

// some .vue file in devland
<template>
  <div>
    <q-icon :name="tabMenu" />
    <q-btn :icon="pixCalendarMonth" />
  </div>
</template>

<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { pixCalendarMonth } from 'quasar-extras-svg-icons/pixelart-icons'

export default {
  // ...
  setup () {
    return {
      tabMenu
      pixCalendarMonth
    }
  }
}

Example (with Vue Options API):

// some .vue file in devland
<template>
  <div>
    <q-icon :name="tabMenu" />
    <q-btn :icon="remBug" />
  </div>
</template>

<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { remBug } from 'quasar-extras-svg-icons/remix-icons'

export default {
  // ...
  created () {
    this.tabMenu = tabMenu
    this.remBug = remBug
  }
}

Replacing Quasar Icons

If you wanted to replace a Quasar icon being used in a component, then you have access to modifying the icon set directly.

This example uses Vue 3 script setup, but you can adapt it for your needs:

<script setup>
  import {useQuasar} from 'quasar' import {remArrowDownCircleFill} from
  'quasar-extras-svg-icons/remix-icons' const $q = useQuasar()
  $q.iconSet.expansionItem.icon = remArrowDownCircleFill
</script>

Now, the QExpansionItem will show the remArrowDownCircleFill from the remix-icons.

To determine which icons are replacable, go to the Quasar GitHub repo.

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

A more complex example with attributes, would look like this:

M3 12H6L9 3L15 21L18 12H21@@stroke-width:1.5;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;

Known Issues

  • box-icons: (FIXED) There are two icons, boxBxsDroplet and boxBxsHot, that both use the svg use directive. Our parser cannot handle that, so these icons will be displayed as a black square.

  • country-flag-icons is missing the South Korean flag as the SVG uses clip-path which our parser at this time cannot handle.

  • health-icons:

    • has a !,svg filename which doesn't translate well to a valid JavaScript variable name, so it is renamed to ExclamationMark as they already have a QuestionMark (because you can't have ? in a filename).
    • A number of icons, like healthFilledConeTestOnNets and healthOutlineRuralPost, look messed up and there is no way to fix them at this time. Use at your own risk, or use the original icon.
  • modern-icons is mssing the SVG for modernBattery30

  • coreui-icons icons not available because of mask and use directives (cannot be flattened): cuiCifAu, cuiCifBi, cuiCifBr, cuiCifEg, cuiCifJm, cuiCifKg, cuiCifKn, cuiCifMr, cuiCifNa, cuiCifNz, cuiCifPt, cuiCifSb, cuiCifSk, cuiCifTv, cuiCifTz, and cuiCifZa.

  • flatui-icons icons not available because of ClipPath and mask (cannot be flattened): flatArt, flatBowling, flatBrush, flatButton, flatCard, flatDynamite, flatFlask, flatRetina, flatRing, flatSafe, flatSkateboard, flatSpray, flatTouch, flatTrash, flatWeather, flatWine.

  • glyphs-brands the color brands are not available because of LinearGradient, RadialGradient, etc (cannot be flattened).

  • glyphs-flags are not available because of LinearGradient, RadialGradient, etc (cannot be flattened).

  • clarity-icons does not include the alerted or badged icons as they don't make sense when being used in this context.

  • openmoji: we are excluding the black svg icons for a number of reasons. The main one is that they are stripped down versions of the color icons, but while those ones have approximately 5 icons representing skin color, the black icons are not filled in and look the same. This adds unnecessary bulk to our distribution.

  • material-theme-icons: two icons not available because of mask and LinearGradient (cannot be flattened): mtiCargoLock and mtiFlash.

  • map-icons icons not available because of malformed SVG: mapBicycling, mapFishing, mapGolf, mapHorseRiding, mapMotobikeTrail, mapTrailWalking, mapViewing, mapWalking

Missing Icon Packages?

We have tried to include some of the most popular and current SVG icon packages available. If you find a package you think should be here, do add a feature request in the issues section.

Also, we did try to add a LOT of other packages, but there were reasons why some of them could not be included:

  1. The SVG icon set includes color and/or duo-tone icons. Quasar uses the css currentColor to determine color, so these icons would have had the color stripped out.
  2. Even though a package has a GitHub repo with SVG icons, their NPM package was missing the SVG icons. Instead, they were just distributing the WOFF and WOFF2 fonts that comprised of the icons. If you find one like this, let them know that they should also distribute the SVG icons.
  3. The SVG uses commands, like use, LinearGradient, filter, etc., which cannot be integreted into the Quasar Framework format.

Before making a feature request, install the package you feel should be included into this package and check out if the above criteria will fit the needs of our parser.

Icon sets that fail:

  • Majesticons: They use transform to make circles.
  • Lucide: Not true SVG. Requires a browser to create the SVGs.
  • material-icon-theme: Issues with arduino, denizenscript, folder-docker, and pascal.
  • cryptocurrency-icons: Lots of use and filter directives.
  • paper-icon-theme: Use linearGradient
  • css-social-buttons (Zocial): viewBox is incorrect in many icons causing cut-off points.
  • icon-park: too many different colors. Not suitable for dark theme or inverted color themes.
  • noto-emoji: Uses linerarGradient
  • region-flags: Uses linerarGradient and use
  • ardis-icon-theme: Uses text
  • breeze-icons: Uses LinearGradient
  • adwaita-icon-theme: Uses LinearGradient and ClipPath
  • super-tiny-icons: Uses use

Building this Package

For installation, use:

yarn --ignore-engines

Then run:

yarn build

Donate

If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.

Documentation

Head on to the website: quasar-extras-svg-icons

SVG Icon Explorer

Don't forget to check out our Icon Explorer App so you can find that perfect icon for your app.

Stay in Touch

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

Chat Support

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

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 for packages included here.

Keywords

FAQs

Last updated on 21 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc