0.0.7 • Published 3 years ago

@medrecord/icons v0.0.7

Weekly downloads
26
License
-
Repository
-
Last release
3 years ago

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: 

  <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:
@Component({
  selector: 'medrecord-svg-eye',
  templateUrl: './eye.component.svg',
  styleUrls: ['./eye.component.scss'],
})
export class EyeComponent extends MedrecordIcon {
  viewHeight = 14;
  viewWidth = 24;
}
  1. Replace all colors into your template what should be customized with type by 'color' property.
  2. Template example:
<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>
tslib
@everything-registry/sub-chunk-592
0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.3

3 years ago

0.0.4

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago