dndbeyond_src/ddb_main/tools/js/smartComponents/Icons/VulnerabilityIcon/VulnerabilityIcon.tsx

import * as React from "react";

import { Tooltip } from "@dndbeyond/character-common-components/es";
import { CharacterTheme } from "@dndbeyond/character-rules-engine/es";

import {
  DarkModeNegativeVulnerabilitySvg,
  NegativeVulnerabilitySvg,
} from "../../Svg";

interface SvgInjectedProps {
  className?: string;
}

interface Props {
  title: string;
  className: string;
  theme?: CharacterTheme;
  secondaryFill?: string;
}
export default class VulnerabilityIcon extends React.PureComponent<Props> {
  static defaultProps = {
    title: "Vulnerability",
    className: "",
    theme: {},
  };

  render() {
    const { title, className, theme } = this.props;

    let classNames: Array<string> = [className, "ddbc-vulnerability-icon"];

    let SvgIcon: React.ComponentType<SvgInjectedProps> = theme?.isDarkMode
      ? DarkModeNegativeVulnerabilitySvg
      : NegativeVulnerabilitySvg;

    return (
      <Tooltip title={title} isDarkMode={theme?.isDarkMode}>
        <SvgIcon className={classNames.join(" ")} />
      </Tooltip>
    );
  }
}