npm package: @medrecord/icons
Description: This is a set of icons for integrating them into project.
Latest version: 0.0.7

## Medrecord Icons

This is a set of icons for integrating them into project.

**Provided Colors:**

- _secondary_
- _link_
- _primary-button_
- _warning_
- _alert_
- _success_
- _error_
- _white_
- _athens_
- _athens-darken_
- _mystic_
- _geyser_
- _hit-grey_
- _boulder_
- _cape-cod_
- _black_


**Provided icons:** 

```angular2html
  <medrecord-svg-arrow-left
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
></medrecord-svg-arrow-left>

  <medrecord-svg-arrow-right
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-arrow-right>

  <medrecord-svg-atom
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-atom>

  <medrecord-svg-calendar
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-calendar>

  <medrecord-svg-chat
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-chat>

  <medrecord-svg-check
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-check>

  <medrecord-svg-chevron-down
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-chevron-down>

  <medrecord-svg-chevron-up
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-chevron-up>

  <medrecord-svg-chevron-left
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-chevron-left>

  <medrecord-svg-chevron-right
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-chevron-right>

  <medrecord-svg-cross
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-cross>

  <medrecord-svg-cross-rounded
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    [crossType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-cross-rounded>

  <medrecord-svg-error
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-error>

  <medrecord-svg-eye
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-eye>

  <medrecord-svg-eye-crossed
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-eye-crossed>

  <medrecord-svg-info
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-info>

  <medrecord-svg-lock
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-lock>

  <medrecord-svg-mail
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-mail>

  <medrecord-svg-pagination-arrow-left
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-pagination-arrow-left>

  <medrecord-svg-pagination-arrow-right
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-pagination-arrow-right>

  <medrecord-svg-phonendoscope
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-phonendoscope>

  <medrecord-svg-pen
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-pen>

  <medrecord-svg-pen-rounded
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-pen-rounded>

  <medrecord-svg-plus
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-plus>

  <medrecord-svg-plus-rounded
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    [plusType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-plus-rounded>

  <medrecord-svg-question
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    [questionType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-question>

  <medrecord-svg-shield
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-shield>

  <medrecord-svg-success
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-success>

  <medrecord-svg-upload-avatar
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    [userType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-upload-avatar>

  <medrecord-svg-warning
    [type]="'One from Colors'"
    [hoverType]="'One from Colors'"
    (click)="someClickHandler()"
    [width]="10"
  ></medrecord-svg-warning>
```

### Adding Custom icons

Custom Icons could be added with a next steps:

1. Generate component;
2. Replace HtmlTemplate extension to .svg;
3. Paste your svg content into template file;
4. Extend your component with MedrecordIcon class for getting default icons functionality.
5. Declare initial width and height into your component for saving proportions. Example of the simple component:
```typescript
@Component({
  selector: 'medrecord-svg-eye',
  templateUrl: './eye.component.svg',
  styleUrls: ['./eye.component.scss'],
})
export class EyeComponent extends MedrecordIcon {
  viewHeight = 14;
  viewWidth = 24;
}

```
6. Replace all colors into your template what should be customized with type by 'color' property.
7. Template example:

```angular2svg
<svg
  (mouseenter)="mouseEnter()"
  (mouseleave)="mouseLeave()"
  [attr.height]="height"
  [attr.width]="width"
  [class.cursor-pointer]="isButton"
  fill="none"
  viewBox="0 0 24 14"
>
  <path
    [attr.fill]="color"
    d="M12.015 2C16.766 2 20.078 5.012 21.519 6.636C20.118 8.473 16.806 12 12.015 12C7.595 12 4.085 8.464 2.537 6.593C4.03 4.946 7.354 2 12.015 2ZM12.015 0C4.446 0 0 6.551 0 6.551C0 6.551 4.835 14 12.015 14C19.748 14 24 6.551 24 6.551C24 6.551 19.709 0 12.015 0ZM12 3C9.791 3 8 4.792 8 7C8 9.209 9.791 11 12 11C14.209 11 16 9.209 16 7C16 4.792 14.209 3 12 3Z"
  ></path>
</svg>
```