tech attribution & requirements

[alttp.git] / resources / js / components / common / ZeldaIcon.js

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 84f2220672ce3e622031b96ea6064325df774ec8..c53f4fd68def288ae2f231e11dc65b486796237f 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import i18n from '../../i18n';
+import Icon from './Icon';
 
 const getIconURL = name => {
        switch (name) {
@@ -64,17 +64,29 @@ const getIconURL = name => {
        }
 };
 
-const ZeldaIcon = ({ name }) =>
-<span className="zelda-icon">
-       <img
-               alt={i18n.t(`icon.zelda.${name}`)}
-               src={getIconURL(name)}
-               title={i18n.t(`icon.zelda.${name}`)}
-       />
-</span>;
+const ZeldaIcon = ({ name }) => {
+       const { t } = useTranslation();
+
+       const invert = name.startsWith('not-');
+       const strippedName = invert ? name.substr(4) : name;
+       const title = t(`icon.zelda.${name}`);
+
+       return <span className="zelda-icon">
+               <img
+                       alt={title}
+                       src={getIconURL(strippedName)}
+                       title={title}
+               />
+               {invert ?
+                       <span className="strike">
+                               <Icon.SLASH title="" />
+                       </span>
+               : null}
+       </span>;
+};
 
 ZeldaIcon.propTypes = {
        name: PropTypes.string,
 };
 
-export default withTranslation()(ZeldaIcon);
+export default ZeldaIcon;