-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 isHalfWidth = name => [
+ 'blue-boomerang',
+ 'fire-rod',
+ 'ice-rod',
+ 'hookshot',
+ 'red-boomerang',
+].includes(name);
+
+const ZeldaIcon = ({ name, svg, title }) => {
+ const { t } = useTranslation();
+
+ const invert = name.startsWith('not-');
+ const strippedName = invert ? name.substr(4) : name;
+ const src = getIconURL(strippedName);
+ const alt = t(`icon.zelda.${name}`);
+ const realTitle = title !== '' ? title || alt : null;
+
+ if (svg) {
+ const clipX = getItemMapX(strippedName);
+ const clipY = getItemMapY(strippedName);
+ const cropX = isHalfWidth(strippedName) ? 0.25 : 0.02;
+ const cropY = 0.02;
+ const cropW = 1 - (2 * cropX);
+ const cropH = 1 - (2 * cropY);
+ return <image
+ href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
+ width={ITEM_MAP_WIDTH}
+ height={ITEM_MAP_HEIGHT}
+ x={`-${clipX + 0.5}`}
+ y={`-${clipY + 0.5}`}
+ clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
+ >
+ {realTitle ?
+ <title>{realTitle}</title>
+ : null}
+ </image>;
+ }
+
+ return <span className="zelda-icon">
+ {isOnItemMap(strippedName) ?
+ <span
+ className="item-map-icon"
+ style={getItemMapStyle(strippedName)}
+ title={realTitle}
+ />
+ : null}
+ {src ?
+ <img
+ alt={alt}
+ src={src}
+ title={realTitle}
+ />
+ : null}
+ {invert ?
+ <span className="strike">
+ <Icon.SLASH title="" />
+ </span>
+ : null}
+ </span>;
+};