@quasar/quasar-ui-qiconpicker
v2.0.7
Published
QIconPicker - Quasar component
Downloads
5,514
Readme
QIconPicker (Quasar v2, UMD and Vue v3 Compatible)
QIconPicker is a Quasar component. It gives an Icon Picker for your apps.
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/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/line-awesome.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-v6.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:
- eva-icons.umd.js
- fontawesome-v5.umd.js
- ionicons-v4.umd.js
- material-icons-outlined.umd.js
- material-icons-round.umd.js
- material-icons-sharp.umd.js
- material-icons.umd.js
- mdi-v4.umd.js
- mdi-v5.umd.js
- mdi-v5.umd.js
- themify.umd.js
- line-awesome.umd.js
- bootstrap-icons.umd.js
You can only use one of
mdi-v4
,mdi-v5
ormdi-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"
v-model:model-pagination="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: <my-component></my-component></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
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 [email protected]