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) {
}
};
-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;