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         className={classNames("icon", this.props.classes, {
  21           "icon-inline": this.props.inline,
  22           small: this.props.small,
  23         })}
  24       >
  25         <use
  26           xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
  27         ></use>
  28         <div className="visually-hidden">
  29           <title>{this.props.icon}</title>
  30         </div>
  31       </svg>
  32     );
  33   }
  34 }
  35
  36 interface SpinnerProps {
  37   large?: boolean;
  38 }
  39
  40 export class Spinner extends Component<SpinnerProps, any> {
  41   constructor(props: any, context: any) {
  42     super(props, context);
  43   }
  44
  45   render() {
  46     return (
  47       <Icon
  48         icon="spinner"
  49         classes={`spin ${this.props.large && "spinner-large"}`}
  50       />
  51     );
  52   }
  53 }
  54
  55 export class PurgeWarning extends Component<any, any> {
  56   constructor(props: any, context: any) {
  57     super(props, context);
  58   }
  59
  60   render() {
  61     return (
  62       <div className="mt-2 alert alert-danger" role="alert">
  63         <Icon icon="alert-triangle" classes="icon-inline me-2" />
  64         {i18n.t("purge_warning")}
  65       </div>
  66     );
  67   }
  68 }