src/shared/components/common/icon.tsx

   1 import classNames from "classnames";
   2 import { Component } from "inferno";
   3 import { i18n } from "../../i18next";
   4
   5 interface IconProps {
   6   icon: string;
   7   classes?: string;
   8   inline?: boolean;
   9   small?: boolean;
  10 }
  11
  12 export class Icon extends Component<IconProps, any> {
  13   constructor(props: any, context: any) {
  14     super(props, context);
  15   }
  16
  17   render() {
  18     return (
  19       <svg
  20         class={classNames("icon", this.props.classes, {
  21           "icon-inline": this.props.inline,
  22           small: this.props.small,
  23         })}
  24       >
  25         <use xlinkHref={`#icon-${this.props.icon}`}></use>
  26         <div class="sr-only">
  27           <title>{this.props.icon}</title>
  28         </div>
  29       </svg>
  30     );
  31   }
  32 }
  33
  34 interface SpinnerProps {
  35   large?: boolean;
  36 }
  37
  38 export class Spinner extends Component<SpinnerProps, any> {
  39   constructor(props: any, context: any) {
  40     super(props, context);
  41   }
  42
  43   render() {
  44     return (
  45       <Icon
  46         icon="spinner"
  47         classes={`spin ${this.props.large && "spinner-large"}`}
  48       />
  49     );
  50   }
  51 }
  52
  53 export class PurgeWarning extends Component<any, any> {
  54   constructor(props: any, context: any) {
  55     super(props, context);
  56   }
  57
  58   render() {
  59     return (
  60       <div class="mt-2 alert alert-danger" role="alert">
  61         <Icon icon="alert-triangle" classes="icon-inline mr-2" />
  62         {i18n.t("purge_warning")}
  63       </div>
  64     );
  65   }
  66 }