src/shared/components/common/icon.tsx

   1 import classNames from "classnames";
   2 import { Component } from "inferno";
   3 import { I18NextService } from "../../services";
   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   className?: string;
  39 }
  40
  41 export class Spinner extends Component<SpinnerProps, any> {
  42   constructor(props: any, context: any) {
  43     super(props, context);
  44   }
  45
  46   render() {
  47     return (
  48       <Icon
  49         icon="spinner"
  50         classes={classNames("spin", this.props.className, {
  51           "spinner-large": this.props.large,
  52         })}
  53       />
  54     );
  55   }
  56 }
  57
  58 export class PurgeWarning extends Component<any, any> {
  59   constructor(props: any, context: any) {
  60     super(props, context);
  61   }
  62
  63   render() {
  64     return (
  65       <div className="purge-warning mt-2 alert alert-danger" role="alert">
  66         <Icon icon="alert-triangle" classes="icon-inline me-2" />
  67         {I18NextService.i18n.t("purge_warning")}
  68       </div>
  69     );
  70   }
  71 }