src/shared/components/common/icon.tsx

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