THE PROJECT IS UNDER DEVELOPMET

The module gives a way to render and edit icons in your Grafana pluging. It is distributed via AngularJS directives.

Directive for showing icon on your page. It adds div with customizable:

• height
• width
• icon
• icon size
• icon color
• visibility

Icon would try to scale to parent block.

Icon size is given as % of div height. If icon is too wide - it would scale to fit div.

Directive for editing icon content.

Directive for editing icon size.

In your module.js

import { iconDirective } from './icon/directives/icon';
import { editorIconDirective } from './icon/directives/editor-icon';
import { editorIconSizeDirective } from './icon/directives/editor-icon-size';

angular.module('grafana.directives').directive('icon', iconDirective);
angular.module('grafana.directives').directive('iconEditor', editorIconDirective);
angular.module('grafana.directives').directive('iconSizeEditor', editorIconSizeDirective);

In your html

<icon
  class="icon"
  width="ctrl.panelWidth"
  height="ctrl.panelHeight"
  content="ctrl.iconContent"
  size="ctrl.iconSize"
  color="ctrl.iconColor"
  visible="ctrl.iconVisible"
/>

Icon will be updated each time any of arguments updates.

• Project proposal