}
};
+const isHalfWidth = name => [
+ 'blue-boomerang',
+ 'fire-rod',
+ 'ice-rod',
+ 'hookshot',
+ 'red-boomerang',
+].includes(name);
+
const ZeldaIcon = ({ name, svg, title }) => {
const { t } = useTranslation();
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="0"
- y="0"
- transform={`translate(-${clipX} -${clipY})`}
- clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+ x={`-${clipX + 0.5}`}
+ y={`-${clipY + 0.5}`}
+ clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
>
{realTitle ?
<title>{realTitle}</title>