Note: Announcing Quark appstore. Discover and share Quark projects and all the best community-made resources. ⚡
Visit
Dismiss

icons

Register icons to be used in UI components.

icons.registerIcon(icon)

Registers an icon in global icon namespace.

  • arguments
  • returns void
  • Usage
quark.icons.registerIcon({
    name: 'my-custom-icon',
    path: './my-custom-icon.svg'
});

const view = quark.views.createSideView('my-side-view', document.createElement('my-custom-element'));
view.icon = 'my-custom-icon';
view.focus();

icons.registerIcons(icons)

Registers multiple icons in global icon namespace.

icons.registerIconInNamespace(icon, namespace)

Registers an icon under a namespace.

  • arguments
    • icon Icon
    • namespace string
  • returns void
  • Usage
quark.icons.registerIconInNamespace({
    name: 'my-custom-icon',
    path: './my-custom-icon.svg'
}, 'my-namespace');

const view = quark.views.createSideView('my-side-view', document.createElement('my-custom-element'));
view.icon = 'my-namespace:my-custom-icon';
view.focus();

icons.registerIconsInNamespace(icons, namespace)

Registers multiple icons under a namespace.

  • arguments
  • returns void

Tip

Quark comes pre installed with Material icons and Ionicons. You can use them in your views as follows:

/*
 * Using material icons.
 * All material icons are registered under the namespace 'mat'
 */

const view = quark.views.createSideView('my-material-icon-view', document.createElement('my-custom-element'));
view.icon = 'mat:close';

/*
 * Using ionicons.
 * All ionicons are registered under the namespace 'ionicon'
 * 
 * Important: You also have to specify the platform of the icon. i.e. 'md-' or 'ios-' before the name of the icon.
 * e.g. 'ionicon:md-close' would work but 'ionicon:close' would not.
 */

const view = quark.views.createSideView('my-ionicon-view', document.createElement('my-custom-element'));
view.icon = 'ionicon:md-close';
Last Updated: 7/16/2019, 1:27:44 PM
MIT Licensed | Copyright © 2019-present Nishkal Kashyap