@quasar/quasar-ui-qiconpicker
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    QIconPicker

    npm npm

    QIconPicker is a Quasar component. It gives an Icon Picker for your apps.

    QIconPicker

    Examples and Documentation

    Can be found here

    Usage

    Quasar CLI project

    Install the App Extension.

    OR:

    Create and register a boot file:

    import Vue from 'vue'
    import Plugin from 'quasar-ui-qiconpicker'
    import '@quasar/quasar-ui-qiconpicker/dist/index.css'
    
    Vue.use(Plugin)

    OR:

    <style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>
    
    <script>
    import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'
    
    export default {
      components: {
        QIconPicker
      }
    }
    </script>

    Vue CLI project

    import Vue from 'vue'
    import Plugin from '@quasar/quasar-ui-qiconpicker'
    import '@quasar/quasar-ui-qiconpicker/dist/index.css'
    
    Vue.use(Plugin)

    OR:

    <style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>
    
    <script>
    import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'
    
    export default {
      components: {
        QIconPicker
      }
    }
    </script>

    Caching

    If you are using a large icon set and find it is taking too long to load, you can pre-cache the UMD variant.

    You can do this by adding to your App.vue (or, any other appropriate) file:

    <template>
      <div id="q-app">
        <router-view />
      </div>
    </template>
    
    <script>
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/eva-icons.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/fontawesome-v5.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/ionicons-v4.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-outlined.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-round.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-sharp.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v5.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/themify.umd.js'
    import '@quasar/quasar-ui-qiconpicker/dist/icon-set/bootstrap-icons.umd.js'
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    </style>

    Don't add them all (unless you have this requirement). Remove the ones from above you won't be needing.

    UMD variant

    Exports window.QIconPicker.

    Add the following tag(s) after the Quasar ones:

    <head>
      <!-- AFTER the Quasar stylesheet tags: -->
      <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <!-- at end of body, AFTER Quasar script(s): -->
      <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.min.js"></script>
    </body>

    If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):

    <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.rtl.min.css" rel="stylesheet" type="text/css">

    For UMD variants only, there is also a caveat:

    You must also load the QIconPicker icon set for the icon font(s) that you have loaded:

    <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>

    Choices are:

    1. eva-icons.umd.js
    2. fontawesome-v5.umd.js
    3. ionicons-v4.umd.js
    4. material-icons-outlined.umd.js
    5. material-icons-round.umd.js
    6. material-icons-sharp.umd.js
    7. material-icons.umd.js
    8. mdi-v4.umd.js
    9. mdi-v5.umd.js
    10. mdi-v5.umd.js
    11. themify.umd.js
    12. line-awesome.umd.js
    13. bootstrap-icons.umd.js

    You can only use one of mdi-v4, mdi-v5 or mdi-v6

    UMD Example

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
    
        <title>UMD test</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.css" rel="stylesheet" type="text/css">
      </head>
      <body>
        <div id="q-app">
          <q-layout view="lHh Lpr fff">
            <q-header class="glossy bg-primary">
              <q-toolbar>
                <q-toolbar-title>
                  quasar-ui-qiconpicker <span class="text-subtitle2">v{{ version }}</span>
                </q-toolbar-title>
    
                <div>Quasar v{{ $q.version }}</div>
              </q-toolbar>
            </q-header>
    
            <q-page-container>
              <q-page padding>
                <div style="width: 700px;">
                  <q-input
                    v-model="filter"
                    label="Filter"
                    outlined
                    clearable
                    class="q-ma-md">
                  </q-input>
                  <q-icon-picker
                    v-model="value"
                    icon-set="material-icons"
                    :filter="filter"
                    :pagination.sync="pagination"
                    style="height: 220px"
                  ></q-icon-picker>
                </div>
                <ul class="q-mb-lg">
                  <li>In /ui, run: "yarn build"</li>
                  <li class="text-red">You need to build & refresh page on each change manually.</li>
                  <li>Use self-closing tags only!</li>
                  <li>Example: &lt;my-component&gt;&lt;/my-component&gt;</li>
                </ul>
              </q-page>
            </q-page-container>
          </q-layout>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.ie.polyfills.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/icon-set/material-icons.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>
    
    
        <script>
          new Vue({
            el: '#q-app',
    
            data: function () {
              return {
                version: QIconPicker.version,
                value: '',
                filter: '',
                pagination: {
                  itemsPerPage: 60,
                  page: 0
                }
              }
            }
          })
        </script>
      </body>
    </html>

    Codepen

    UMD Example on Codepen

    Building the Projects

    Setup

    In both the ui and ui/dev folders:

    $ yarn

    Developing

    In the ui folder

    # start dev in SPA mode
    $ yarn dev
    
    # start dev in UMD mode
    $ yarn dev:umd
    
    # start dev in SSR mode
    $ yarn dev:ssr
    
    # start dev in Cordova iOS mode
    $ yarn dev:ios
    
    # start dev in Cordova Android mode
    $ yarn dev:android
    
    # start dev in Electron mode
    $ yarn dev:electron

    Building package

    $ yarn build
    
    # build just the JSON API
    $ yarn build:api

    Donate

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

    License

    MIT (c) Jeff Galbraith jeff@quasar.dev

    Install

    npm i @quasar/quasar-ui-qiconpicker

    DownloadsWeekly Downloads

    332

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    2.61 MB

    Total Files

    52

    Last publish

    Collaborators

    • rstoenescu
    • hawkeye64
    • pdanpdan
    • webnoob
    • smolinari
    • ilcallo