icon.tsx

import { Component, h, Prop, Host } from "@stencil/core";
import * as icons from "./icons";
import { IconName } from "../../utils/utils";

// TODO: add all icons
const iconNames: IconName = {
  "hy-icon-arrow-left": p => <icons.IconArrowLeft {...p} />,
  "hy-icon-arrow-right": p => <icons.IconArrowRight {...p} />,
  "hy-icon-arrow-down": p => <icons.ArrowDown {...p} />,
  "hy-icon-caret-down": p => <icons.CaretDown {...p} />,
  "hy-icon-link-arrow-down": p => <icons.LinkArrowDown {...p} />,
  "hy-icon-hy-logo": p => <icons.HyLogo {...p} />,
  "hy-icon-camera": p => <icons.Camera {...p} />,
  "hy-icon-image-gallery": p => <icons.ImageGallery {...p} />
};

@Component({
  tag: "hy-icon",
  styleUrl: "icon.css",
  shadow: false
})
export class Icon {
  @Prop() icon: string;
  @Prop() fill: string = "black";
  @Prop() size: number = 20;

  render() {
    return (
      <Host aria-hidden="true" style={{ display: "flex" }}>
        {iconNames[this.icon]({
          height: this.size,
          width: this.size,
          fill: this.fill
        })}
      </Host>
    );
  }
}