@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
1,077 lines (1,069 loc) • 670 kB
JavaScript
import { Component, ElementRef, Input, HostBinding, NgModule, Directive, ChangeDetectorRef, Renderer2, ViewContainerRef, ComponentFactoryResolver, ContentChildren, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, TemplateRef, HostListener, forwardRef, Host, Inject, InjectionToken, Injectable, Injector, ViewEncapsulation, Optional } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { Subject, fromEvent, BehaviorSubject, Subscription, merge, of, combineLatest } from 'rxjs';
import { takeWhile, filter, take, skip, map, distinctUntilChanged } from 'rxjs/operators';
import { trigger, transition, style, animate, state } from '@angular/animations';
import { Overlay, OverlayPositionBuilder, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
import { CdkTable, CDK_TABLE_TEMPLATE, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CDK_ROW_TEMPLATE, CdkFooterRow, CdkRow, DataSource, CdkTableModule } from '@angular/cdk/table';
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
import { BreakpointObserver, LayoutModule as LayoutModule$1 } from '@angular/cdk/layout';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import flatpickr from 'flatpickr';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Loading {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.title = 'Loading';
/**
* set to `false` to stop the loading animation
*/
this.isActive = true;
/**
* Specify the size of the button
*/
this.size = 'normal';
/**
* Set to `true` to make loader with an overlay.
*/
this.overlay = false;
}
}
Loading.decorators = [
{ type: Component, args: [{
selector: 'suka-loading',
template: `
<div
[ngClass]="{
'loading--small': size === 'sm',
'loading--stop': !isActive && !overlay,
'loading-overlay--stop': !isActive && overlay
}"
class="loading">
<svg class="loading__svg" viewBox="-75 -75 150 150">
<title>{{title}}</title>
<circle class="loading__stroke" cx="0" cy="0" r="37.5" />
</svg>
</div>
`
}] }
];
/** @nocollapse */
Loading.ctorParameters = () => [
{ type: ElementRef }
];
Loading.propDecorators = {
title: [{ type: Input }],
isActive: [{ type: Input }],
size: [{ type: Input }],
overlay: [{ type: Input }, { type: HostBinding, args: ['class.loading-overlay',] }]
};
if (false) {
/** @type {?} */
Loading.prototype.title;
/**
* set to `false` to stop the loading animation
* @type {?}
*/
Loading.prototype.isActive;
/**
* Specify the size of the button
* @type {?}
*/
Loading.prototype.size;
/**
* Set to `true` to make loader with an overlay.
* @type {?}
*/
Loading.prototype.overlay;
/** @type {?} */
Loading.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LoadingModule {
}
LoadingModule.decorators = [
{ type: NgModule, args: [{
declarations: [
Loading
],
exports: [
Loading
],
imports: [
CommonModule
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Button {
/**
* @param {?} ref
* @param {?} el
* @param {?} renderer
* @param {?} viewContainerRef
* @param {?} componentFactoryResolver
*/
constructor(ref, el, renderer, viewContainerRef, componentFactoryResolver) {
this.ref = ref;
this.el = el;
this.renderer = renderer;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.sukaButton = 'basic';
this.size = 'md';
this.class = '';
this.skeleton = false;
this.outline = false;
this.hover = false;
this.fullWidth = false;
this.inGroup = false;
this.loading = false;
}
/**
* @return {?}
*/
get attrClass() {
return `btn--${this.sukaButton ? this.sukaButton : 'basic'} ${this.class}`;
}
/**
* @return {?}
*/
get buttonSmall() {
return this.size === 'sm';
}
/**
* @return {?}
*/
get buttonLarge() {
return this.size === 'lg';
}
/**
* @return {?}
*/
ngOnInit() {
// Create the spinner
/** @type {?} */
const factory = this.componentFactoryResolver.resolveComponentFactory(Loading);
/** @type {?} */
const componentRef = this.viewContainerRef.createComponent(factory);
this.loadingSpinner = componentRef.instance;
this.loadingSpinner.size = 'sm';
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
this.renderer.appendChild(this.el.nativeElement, this.loadingSpinner.elementRef.nativeElement);
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
this.el.nativeElement.disabled = true;
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.loadingSpinner) {
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
}
else {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
}
this.el.nativeElement.disabled = changes.loading.currentValue;
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.ref.detectChanges();
}
}
Button.decorators = [
{ type: Directive, args: [{
selector: '[sukaButton]'
},] }
];
/** @nocollapse */
Button.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Renderer2 },
{ type: ViewContainerRef },
{ type: ComponentFactoryResolver }
];
Button.propDecorators = {
sukaButton: [{ type: Input }],
size: [{ type: Input }],
class: [{ type: Input }],
attrClass: [{ type: HostBinding, args: ['attr.class',] }],
skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }],
outline: [{ type: HostBinding, args: ['class.btn--outline',] }, { type: Input }],
hover: [{ type: HostBinding, args: ['class.btn--hover',] }, { type: Input }],
fullWidth: [{ type: HostBinding, args: ['class.btn--full_width',] }, { type: Input }],
inGroup: [{ type: HostBinding, args: ['class.btn--group_item',] }, { type: Input }],
loading: [{ type: HostBinding, args: ['class.btn--loading',] }, { type: Input }],
buttonSmall: [{ type: HostBinding, args: ['class.btn--sm',] }],
buttonLarge: [{ type: HostBinding, args: ['class.btn--lg',] }]
};
if (false) {
/** @type {?} */
Button.prototype.sukaButton;
/** @type {?} */
Button.prototype.size;
/** @type {?} */
Button.prototype.class;
/** @type {?} */
Button.prototype.skeleton;
/** @type {?} */
Button.prototype.outline;
/** @type {?} */
Button.prototype.hover;
/** @type {?} */
Button.prototype.fullWidth;
/** @type {?} */
Button.prototype.inGroup;
/** @type {?} */
Button.prototype.loading;
/** @type {?} */
Button.prototype.originalInnerText;
/** @type {?} */
Button.prototype.loadingSpinner;
/**
* @type {?}
* @private
*/
Button.prototype.ref;
/**
* @type {?}
* @private
*/
Button.prototype.el;
/**
* @type {?}
* @private
*/
Button.prototype.renderer;
/**
* @type {?}
* @private
*/
Button.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
Button.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ButtonGroup {
constructor() {
this.baseClass = true;
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.buttons.toArray().forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
button.inGroup = true;
}));
}
}
ButtonGroup.decorators = [
{ type: Component, args: [{
selector: 'suka-button-group',
template: `<div class="btn-group__wrapper"><ng-content></ng-content></div>`
}] }
];
ButtonGroup.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.btn-group',] }],
segmented: [{ type: HostBinding, args: ['class.btn-group--segmented',] }, { type: Input }],
buttons: [{ type: ContentChildren, args: [Button,] }]
};
if (false) {
/** @type {?} */
ButtonGroup.prototype.baseClass;
/**
* Join buttons as segmented group
* @type {?}
*/
ButtonGroup.prototype.segmented;
/** @type {?} */
ButtonGroup.prototype.buttons;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ButtonModule {
}
ButtonModule.decorators = [
{ type: NgModule, args: [{
declarations: [Button, ButtonGroup],
exports: [Button, ButtonGroup],
imports: [CommonModule, LoadingModule],
entryComponents: [Loading],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const CheckboxState = {
Init: 0,
Indeterminate: 1,
Checked: 2,
Unchecked: 3,
};
CheckboxState[CheckboxState.Init] = 'Init';
CheckboxState[CheckboxState.Indeterminate] = 'Indeterminate';
CheckboxState[CheckboxState.Checked] = 'Checked';
CheckboxState[CheckboxState.Unchecked] = 'Unchecked';
class CheckboxChange {
}
if (false) {
/** @type {?} */
CheckboxChange.prototype.source;
/** @type {?} */
CheckboxChange.prototype.checked;
}
// tslint:disable-next-line: component-class-suffix
class Checkbox {
/**
* Creates an instance of `Checkbox`.
* @param {?} changeDetectorRef
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* Size of the checkbox.
*/
this.size = 'md';
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
*/
this.inline = false;
/**
* Set to `true` for a disabled checkbox.
*/
this.disabled = false;
/**
* Set to `true` for a loading checkbox.
*/
this.skeleton = false;
/**
* Set to `true` to hide the checkbox labels.
*/
this.hideLabel = false;
/**
* The unique id for the checkbox component.
*/
this.id = `checkbox-${Checkbox.checkboxCount}`;
/**
* Used to set the `aria-label` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
this.ariaLabel = '';
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
*/
// tslint:disable-next-line: no-output-native
this.change = new EventEmitter();
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
*/
this.indeterminateChange = new EventEmitter();
/**
* Set to `true` if the input checkbox is selected (or checked).
*/
// tslint:disable-next-line: variable-name
this._checked = false;
/**
* Set to `true` if the input checkbox is in state indeterminate.
*/
// tslint:disable-next-line: variable-name
this._indeterminate = false;
this.currentCheckboxState = CheckboxState.Init;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
() => { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
Checkbox.checkboxCount++;
}
/**
* Reflects whether the checkbox state is indeterminate.
* @return {?}
*/
get indeterminate() {
return this._indeterminate;
}
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
* @param {?} indeterminate
* @return {?}
*/
set indeterminate(indeterminate) {
/** @type {?} */
const changed = this._indeterminate !== indeterminate;
this._indeterminate = indeterminate;
if (changed) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
}
else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
this.indeterminateChange.emit(this._indeterminate);
}
/**
* Returns value `true` if state is selected for the checkbox.
* @return {?}
*/
get checked() {
return this._checked;
}
/**
* Updating the state of a checkbox to match the state of the parameter passed in.
* @param {?} checked
* @return {?}
*/
set checked(checked) {
if (checked !== this.checked) {
if (this._indeterminate) {
Promise.resolve().then((/**
* @return {?}
*/
() => {
this._indeterminate = false;
this.indeterminateChange.emit(this._indeterminate);
}));
}
this._checked = checked;
this.changeDetectorRef.markForCheck();
}
}
/**
* @return {?}
*/
get checkboxWrapperClass() {
return !this.inline;
}
/**
* @return {?}
*/
get formItemClass() {
return !this.inline;
}
/**
* Toggle the selected state of the checkbox.
* @return {?}
*/
toggle() {
this.checked = !this.checked;
}
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.checked = !!value;
}
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.propagateChange = fn;
}
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {?} event
* @return {?}
*/
onChange(event) {
event.stopPropagation();
}
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
onClick(event) {
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
}
/**
* Handles changes between checkbox states.
* @param {?} newState
* @return {?}
*/
transitionCheckboxState(newState) {
/** @type {?} */
const oldState = this.currentCheckboxState;
// Indeterminate has to be set always if it's transitioned to
// checked has to be set before indeterminate or it overrides
// indeterminate's dash
if (newState === CheckboxState.Indeterminate) {
this.checked = false;
this.inputCheckbox.nativeElement.indeterminate = true;
}
if (oldState === newState) {
return;
}
this.currentCheckboxState = newState;
}
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @return {?}
*/
emitChangeEvent() {
/** @type {?} */
const event = new CheckboxChange();
event.source = this;
event.checked = this.checked;
this.propagateChange(this.checked);
this.change.emit(event);
}
/**
* Updates the checkbox if it is in the indeterminate state.
* @return {?}
*/
ngAfterViewInit() {
if (this.indeterminate) {
this.inputCheckbox.nativeElement.indeterminate = true;
this.checked = false;
}
}
}
/**
* Variable used for creating unique ids for checkbox components.
*/
Checkbox.checkboxCount = 0;
Checkbox.decorators = [
{ type: Component, args: [{
selector: 'suka-checkbox',
template: `
<input
#inputCheckbox
class="checkbox"
type="checkbox"
[id]="id"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[indeterminate]="indeterminate"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
(change)="onChange($event)"
(click)="onClick($event)">
<label
[for]="id"
class="checkbox-label"
[ngClass]="{
'skeleton' : skeleton
}">
<span [ngClass]="{'visually-hidden' : hideLabel}">
<ng-content></ng-content>
</span>
</label>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
Checkbox.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
Checkbox.propDecorators = {
size: [{ type: Input }],
nested: [{ type: Input }],
inline: [{ type: Input }],
disabled: [{ type: Input }],
skeleton: [{ type: Input }],
hideLabel: [{ type: Input }],
name: [{ type: Input }],
id: [{ type: Input }],
required: [{ type: Input }],
value: [{ type: Input }],
ariaLabel: [{ type: Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
indeterminate: [{ type: Input }],
checked: [{ type: Input }],
checkboxWrapperClass: [{ type: HostBinding, args: ['class.checkbox-wrapper',] }],
formItemClass: [{ type: HostBinding, args: ['class.form-item',] }],
change: [{ type: Output }],
indeterminateChange: [{ type: Output }],
inputCheckbox: [{ type: ViewChild, args: ['inputCheckbox', { static: true },] }]
};
if (false) {
/**
* Variable used for creating unique ids for checkbox components.
* @type {?}
*/
Checkbox.checkboxCount;
/**
* Size of the checkbox.
* @type {?}
*/
Checkbox.prototype.size;
/**
* Set to `true` for checkbox to be rendered with nested styles.
* @type {?}
*/
Checkbox.prototype.nested;
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
* @type {?}
*/
Checkbox.prototype.inline;
/**
* Set to `true` for a disabled checkbox.
* @type {?}
*/
Checkbox.prototype.disabled;
/**
* Set to `true` for a loading checkbox.
* @type {?}
*/
Checkbox.prototype.skeleton;
/**
* Set to `true` to hide the checkbox labels.
* @type {?}
*/
Checkbox.prototype.hideLabel;
/**
* Sets the name attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.name;
/**
* The unique id for the checkbox component.
* @type {?}
*/
Checkbox.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Checkbox.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.value;
/**
* Used to set the `aria-label` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabel;
/**
* Used to set the `aria-labelledby` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabelledby;
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
* @type {?}
*/
Checkbox.prototype.change;
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
* @type {?}
*/
Checkbox.prototype.indeterminateChange;
/**
* Set to `true` if the input checkbox is selected (or checked).
* @type {?}
*/
Checkbox.prototype._checked;
/**
* Set to `true` if the input checkbox is in state indeterminate.
* @type {?}
*/
Checkbox.prototype._indeterminate;
/** @type {?} */
Checkbox.prototype.currentCheckboxState;
/**
* Maintains a reference to the view DOM element of the `Checkbox`.
* @type {?}
*/
Checkbox.prototype.inputCheckbox;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Checkbox.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Checkbox.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
Checkbox.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CheckboxModule {
}
CheckboxModule.decorators = [
{ type: NgModule, args: [{
declarations: [
Checkbox
],
exports: [
Checkbox
],
imports: [
CommonModule,
FormsModule
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: max-line-length
/**
* @record
*/
function IconDef() { }
if (false) {
/** @type {?} */
IconDef.prototype.name;
/** @type {?} */
IconDef.prototype.template;
}
/** @type {?} */
const iconDefs = [
{
name: 'activity',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>activity</title>
<path d="M14.667 7.333h-2.667c-0.293 0-0.541 0.189-0.633 0.456l-1.367 4.103-3.367-10.103c-0.117-0.349-0.494-0.538-0.843-0.422-0.207 0.069-0.357 0.229-0.422 0.422l-1.848 5.544h-2.186c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.667c0.282-0.002 0.54-0.178 0.633-0.456l1.367-4.103 3.367 10.103c0.065 0.193 0.215 0.353 0.421 0.421 0.349 0.117 0.727-0.073 0.843-0.421l1.849-5.544h2.186c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'airplay',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>airplay</title>
<path d="M3.333 10.667h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-10.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM8.512 9.573c-0.023-0.029-0.053-0.058-0.085-0.085-0.283-0.236-0.703-0.197-0.939 0.085l-3.333 4c-0.096 0.115-0.155 0.264-0.155 0.427 0 0.368 0.299 0.667 0.667 0.667h6.667c0.15 0.001 0.302-0.050 0.427-0.155 0.283-0.236 0.321-0.656 0.085-0.939zM8 11.041l1.91 2.292h-3.82z"></path>
</svg>
`
},
{
name: 'alert-circle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>alert-circle</title>
<path d="M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'alert-octagon',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>alert-octagon</title>
<path d="M5.24 0.667c-0.171 0-0.341 0.065-0.471 0.195l-3.907 3.907c-0.121 0.121-0.195 0.287-0.195 0.471v5.52c0 0.171 0.065 0.341 0.195 0.471l3.907 3.907c0.121 0.121 0.287 0.195 0.471 0.195h5.52c0.171 0 0.341-0.065 0.471-0.195l3.907-3.907c0.121-0.121 0.195-0.287 0.195-0.471v-5.52c0-0.171-0.065-0.341-0.195-0.471l-3.907-3.907c-0.121-0.121-0.287-0.195-0.471-0.195zM5.516 2h4.968l3.516 3.516v4.968l-3.516 3.516h-4.968l-3.516-3.516v-4.968zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'alert-triangle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>alert-triangle</title>
<path d="M7.432 2.916c0.049-0.082 0.123-0.161 0.223-0.221 0.157-0.095 0.337-0.119 0.504-0.077s0.316 0.144 0.409 0.299l5.644 9.422c0.051 0.087 0.085 0.199 0.087 0.321 0.002 0.184-0.070 0.351-0.19 0.473s-0.285 0.199-0.462 0.201h-11.291c-0.101-0.001-0.214-0.027-0.321-0.089-0.159-0.092-0.266-0.239-0.311-0.405s-0.025-0.346 0.061-0.497zM6.288 2.231l-5.647 9.427c-0.281 0.487-0.337 1.033-0.205 1.527s0.453 0.939 0.932 1.215c0.309 0.179 0.651 0.267 0.983 0.268h11.295c0.559-0.006 1.058-0.236 1.415-0.601s0.576-0.869 0.57-1.421c-0.004-0.357-0.102-0.696-0.271-0.983l-5.649-9.431c-0.288-0.475-0.74-0.787-1.236-0.909s-1.041-0.054-1.513 0.233c-0.286 0.173-0.517 0.41-0.675 0.676zM7.333 6v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 11.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'align-center',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>align-center</title>
<path d="M12 6h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM12 11.333h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'align-justify',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>align-justify</title>
<path d="M14 6h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'align-left',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>align-left</title>
<path d="M11.333 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM11.333 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'align-right',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>align-right</title>
<path d="M14 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'anchor',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>anchor</title>
<path d="M9.333 3.333c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM3.333 7.333h-2c-0.368 0-0.667 0.299-0.667 0.667 0 2.025 0.821 3.859 2.148 5.185s3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185c0-0.368-0.299-0.667-0.667-0.667h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.297c-0.153 1.391-0.782 2.637-1.721 3.576s-2.185 1.567-3.576 1.721v-8.047c0.469-0.121 0.888-0.366 1.219-0.697 0.482-0.482 0.781-1.15 0.781-1.886s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.331 0.331 0.75 0.577 1.219 0.697v8.047c-1.391-0.153-2.637-0.782-3.576-1.721s-1.567-2.185-1.721-3.576h1.297c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'aperture',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>aperture</title>
<path d="M7.615 4.667l1.482-2.567c1.217 0.225 2.305 0.817 3.146 1.657 0.277 0.277 0.528 0.582 0.747 0.909h-3.463zM4.92 6.667l-1.481-2.565c0.102-0.119 0.208-0.234 0.319-0.345 1-1 2.35-1.648 3.85-1.745l-1.728 2.993zM5.305 10h-2.964c-0.221-0.625-0.341-1.299-0.341-2 0-0.953 0.222-1.854 0.617-2.655l1.733 3.003zM11.649 7.652l-0.954-1.652h2.964c0.221 0.625 0.341 1.299 0.341 2 0 0.953-0.222 1.854-0.617 2.655l-1.717-2.975zM8.392 13.987l2.688-4.654 1.481 2.565c-0.102 0.119-0.208 0.234-0.319 0.344-1 1-2.35 1.648-3.85 1.745zM7.133 15.283c0.031 0.005 0.061 0.009 0.093 0.010 0.254 0.027 0.513 0.041 0.774 0.041 2.025 0 3.859-0.821 5.185-2.148 0.244-0.244 0.471-0.505 0.678-0.781 0.028-0.031 0.053-0.065 0.073-0.099 0.879-1.209 1.397-2.697 1.397-4.305 0-1.026-0.211-2.003-0.592-2.891-0.011-0.029-0.023-0.057-0.037-0.084-0.369-0.829-0.887-1.578-1.519-2.211-1.134-1.134-2.64-1.899-4.319-2.097-0.031-0.005-0.061-0.009-0.093-0.010-0.254-0.027-0.513-0.041-0.774-0.041-2.025 0-3.859 0.821-5.185 2.148-0.244 0.243-0.471 0.505-0.678 0.781-0.028 0.031-0.053 0.065-0.074 0.099-0.878 1.209-1.396 2.697-1.396 4.305 0 1.026 0.211 2.003 0.592 2.891 0.011 0.029 0.023 0.057 0.037 0.084 0.369 0.829 0.887 1.578 1.519 2.211 1.134 1.134 2.64 1.899 4.319 2.097zM8.385 11.333l-1.482 2.567c-1.217-0.225-2.305-0.817-3.146-1.657-0.277-0.277-0.528-0.582-0.747-0.909h3.463zM10.31 8l-1.155 2h-2.311l-1.155-2 1.155-2h2.311z"></path>
</svg>
`
},
{
name: 'archive',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>archive</title>
<path d="M2.667 6h10.667v7.333h-10.667zM0.667 1.333c-0.368 0-0.667 0.299-0.667 0.667v3.333c0 0.368 0.299 0.667 0.667 0.667h0.667v8c0 0.368 0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667v-8h0.667c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.368-0.299-0.667-0.667-0.667zM1.333 2.667h13.333v2h-13.333zM6.667 8.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"></path>
</svg>
`
},
{
name: 'arrow-down-circle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down-circle</title>
<path d="M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v3.724l-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.667 2.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051 0.177-0.018 0.255-0.051c0.079-0.033 0.152-0.081 0.216-0.145l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529v-3.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z"></path>
</svg>
`
},
{
name: 'arrow-down-left',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down-left</title>
<path d="M11.333 10.667h-5.057l5.529-5.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-5.529 5.529v-5.057c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.091 0.018 0.177 0.051 0.255s0.081 0.152 0.144 0.215c0.001 0.001 0.001 0.001 0.001 0.001 0.061 0.061 0.135 0.111 0.215 0.144 0.079 0.033 0.165 0.051 0.255 0.051h6.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'arrow-down-right',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down-right</title>
<path d="M10.667 4.667v5.057l-5.529-5.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l5.529 5.529h-5.057c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.667c0.091 0 0.177-0.018 0.255-0.051s0.152-0.081 0.216-0.145c0.061-0.061 0.111-0.135 0.145-0.216 0.033-0.079 0.051-0.165 0.051-0.255v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z"></path>
</svg>
`
},
{
name: 'arrow-down',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down</title>
<path d="M12.195 7.529l-3.529 3.529v-7.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v7.724l-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l4.667 4.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l4.667-4.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z"></path>
</svg>
`
},
{
name: 'arrow-left-circle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left-circle</title>
<path d="M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM10.667 7.333h-3.724l1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.667 2.667c-0.064 0.064-0.112 0.137-0.145 0.216s-0.051 0.165-0.051 0.255c0 0.087 0.017 0.174 0.051 0.255 0.033 0.079 0.081 0.152 0.145 0.216l2.667 2.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529h3.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
</svg>
`
},
{
name: 'arrow-left',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left</title>
<path d="M8.471 12.195l-3.529-3.529h7.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.724l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-4.667 4.667c-0.064 0.064-0.112 0.137-0.145 0.216-0.034 0.081-0.051 0.169-0.051 0.255 0 0.171 0.065 0.341 0.195 0.471l4.667 4.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z"></path>
</svg>
`
},
{
name: 'arrow-right-circle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right-circle</title>
<path d="M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 8.667h3.724l-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.667-2.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529h-3.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"></path>
</svg>
`
},
{
name: 'arrow-right',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right</title>
<path d="M7.529 3.805l3.529 3.529h-7.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h7.724l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l4.667-4.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-4.667-4.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z"></path>
</svg>
`
},
{
name: 'arrow-up-circle',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up-circle</title>
<path d="M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM8.667 10.667v-3.724l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529v3.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'arrow-up-left',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up-left</title>
<path d="M5.333 11.333v-5.057l5.529 5.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-5.529-5.529h5.057c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-6.667c-0.091 0-0.177 0.018-0.255 0.051s-0.151 0.081-0.215 0.144c-0.001 0.001-0.001 0.001-0.001 0.001-0.061 0.061-0.111 0.134-0.144 0.215-0.033 0.079-0.051 0.165-0.051 0.255v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'arrow-up-right',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up-right</title>
<path d="M4.667 5.333h5.057l-5.529 5.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l5.529-5.529v5.057c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.667c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-6.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"></path>
</svg>
`
},
{
name: 'arrow-up',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up</title>
<path d="M3.805 8.471l3.529-3.529v7.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-7.724l3.529 3.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-4.667-4.667c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051-0.171 0-0.341 0.065-0.471 0.195l-4.667 4.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z"></path>
</svg>
`
},
{
name: 'at-sign',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>at-sign</title>
<path d="M10 8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM10.493 10.212c0.087 0.121 0.183 0.235 0.287 0.34 0.482 0.482 1.15 0.781 1.886 0.781s1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885v-0.667c0-2.025-0.822-3.859-2.148-5.185s-3.161-2.148-5.186-2.147-3.859 0.821-5.185 2.148-2.147 3.161-2.147 5.185 0.822 3.859 2.148 5.185 3.161 2.148 5.185 2.147c1.683 0 3.237-0.568 4.46-1.513 0.291-0.225 0.345-0.643 0.121-0.935s-0.643-0.345-0.935-0.121c-0.997 0.769-2.265 1.235-3.645 1.235-1.657 0-3.156-0.671-4.243-1.757s-1.757-2.584-1.757-4.241 0.671-3.156 1.757-4.243 2.585-1.757 4.242-1.757 3.156 0.671 4.243 1.757 1.758 2.585 1.758 4.242v0.667c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943v-3.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667c-0.557-0.418-1.25-0.667-2-0.667-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976c0.047-0.047 0.093-0.095 0.137-0.145z"></path>
</svg>
`
},
{
name: 'award',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>award</title>
<path d="M9.991 10.283l0.5 3.768-2.147-1.289c-0.207-0.123-0.469-0.131-0.686 0l-2.147 1.289 0.501-3.767c0.614 0.247 1.286 0.383 1.989 0.383s1.375-0.137 1.991-0.384zM10.221 8.661c-0.039 0.020-0.075 0.043-0.109 0.070-0.613 0.382-1.337 0.603-2.113 0.603-1.105 0-2.104-0.447-2.829-1.171s-1.171-1.724-1.171-2.829 0.447-2.104 1.171-2.829 1.724-1.171 2.829-1.171 2.104 0.447 2.829 1.171 1.171 1.724 1.171 2.829-0.447 2.104-1.171 2.829c-0.185 0.185-0.389 0.353-0.607 0.499zM4.76 9.57l-0.754 5.675c-0.049 0.365 0.208 0.7 0.573 0.749 0.156 0.021 0.307-0.015 0.431-0.089l2.99-1.794 2.991 1.794c0.316 0.189 0.725 0.087 0.915-0.229 0.081-0.135 0.109-0.287 0.089-0.431l-0.753-5.677c0.187-0.143 0.364-0.299 0.53-0.465 0.964-0.964 1.562-2.298 1.562-3.771s-0.598-2.807-1.562-3.771-2.299-1.562-3.771-1.562-2.807 0.598-3.771 1.562-1.562 2.299-1.562 3.771 0.598 2.807 1.562 3.771c0.167 0.167 0.344 0.322 0.531 0.465z"></path>
</svg>
`
},
{
name: 'bar-chart-2',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>bar-chart-2</title>
<path d="M12.667 13.333v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM8.667 13.333v-10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM4.667 13.333v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'bar-chart',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>bar-chart</title>
<path d="M8.667 13.333v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM12.667 13.333v-10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM4.667 13.333v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z"></path>
</svg>
`
},
{
name: 'battery-charging',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>battery-charging</title>
<path d="M3.333 11.333h-1.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-5.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.127c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.127c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v5.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM10 4.667h1.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v5.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-2.127c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.127c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-5.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM16 8.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM6.779 3.63l-2.667 4c-0.204 0.307-0.121 0.72 0.185 0.925 0.115 0.077 0.245 0.113 0.37 0.112h2.754l-1.976 2.963c-0.204 0.307-0.121 0.72 0.185 0.925s0.72 0.121 0.925-0.185l2.667-4c0.071-0.104 0.113-0.232 0.113-0.37 0-0.368-0.299-0.667-0.667-0.667h-2.754l1.976-2.963c0.204-0.307 0.121-0.72-0.185-0.925s-0.72-0.121-0.925 0.185z"></path>
</svg>
`
},
{
name: 'battery',
template: `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>battery</title>
<path d="M2 3.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v5.333c0 0.552 0.225 1.053 0.586 1.414s0