====== Module - creating a new icon ======

In this tutorial we will describe how to create, register and use a new icon in our module.

===== What do you need before you start =====

  * You need to install CzechIdM 9.4.0 (and higher). We have CzechIdM installed for this tutorial on server ''http://localhost:8080/idm-backend''.

Source codes for this tutorial can be found in the [[https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-example/src/components/ExampleRoleIcon.js|example module]]


===== 01 Create a icon component =====

We will use ''AbstractIcon'' component as superclass for creating custom icon (prepared in core ''advanced'' component library)  - contains some default method implementations (common icon features as ''style'', ''color'' ... boiler plate).

<code javascript>
import React from 'react';
import { faBookmark, faKey } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
//
import { Advanced } from 'czechidm-core';

/**
 * Role icon - override role icon in ecxample module.
 *
 * @author Radek Tomiška
 * @since 9.4.0
 */
export default class ExampleRoleIcon extends Advanced.AbstractIcon {

  constructor(props) {
    super(props);
  }

  renderIcon() {
    return (
      <span className="fa-layers fa-fw">
        <FontAwesomeIcon icon={ faBookmark } />
        <FontAwesomeIcon icon={ faKey } transform="shrink-7 up-2" style={{ color: '#fff' }}/>
      </span>
    );
  }
}
</code>

We are using [[https://fontawesome.com/how-to-use/on-the-web/using-with/react|font awesome]] icon library for icon implementation, which is already configured in core.

Icon can be combined using [[https://fontawesome.com/how-to-use/on-the-web/styling/layering|layers]].

===== 02 Register icon component =====

Component is created, now we need to register her in [[https://github.com/bcvsolutions/CzechIdMng/tree/develop/Realization/frontend/czechidm-core#component-descriptor|component descriptor]] for start using her in application. New icon will be available for the entity type (~name) ''my-roles''.

Add component into module's ''component-descriptor.js'':

<code javascript>
...
module.exports = {
  ...
  'components': [
    ...
    {
      'id': 'custom-roles-icon',
      'type': 'icon',
      'entityType': [ 'my-roles'],
      'component': require('./src/components/ExampleRoleIcon')
    }
    ...
  ]
};
...
</code>

''my-roles'' works as name for this icon.

===== 03 Use icon =====

Icon can be used the same way as standard icon - the only difference is usage ''component'' as icon type:

<code javascript>
...
<Basic.Icon value="component:my-roles"/>
...
</code>

{{:tutorial:dev:icon-my-roles.png|}}

===== Advanced =====

We can override existing icon defined in core module. 

It's just about editing module's ''component.xml'' descriptor:

<code javascript>
...
module.exports = {
  ...
  'components': [
    ...
    {
      'id': 'custom-roles-icon',
      'type': 'icon',
      'entityType': [ 'my-roles', 'roles'],
      'component': require('./src/components/ExampleRoleIcon'),
      'priority': 1
    }
    ...
  ]
};
...
</code>

We used previously created custom icon and define to use her for the ''roles'' entity types. We need to define higher priority (e.g. **1**) for this component, than is in core (**core** components have always **zero priority**).