add zelda icon SVG support

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 13efe31d87498d24c81b94ff3e46c4b1fab3a341..230b14e9232f8d688b43da1bcf666347249446b2 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -90,10 +90,13 @@ const ITEM_MAP = [
 
 const isOnItemMap = name => ITEM_MAP.includes(name);
 
+const getItemMapX = name => ITEM_MAP.indexOf(name) % 8;
+
+const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / 8);
+
 const getItemMapStyle = name => {
-       const index = ITEM_MAP.indexOf(name);
-       const x = index % 8;
-       const y = Math.floor(index / 8);
+       const x = getItemMapX(name);
+       const y = getItemMapY(name);
        return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
 };
 
@@ -122,7 +125,7 @@ const getIconURL = name => {
        }
 };
 
-const ZeldaIcon = ({ name, title }) => {
+const ZeldaIcon = ({ name, svg, title }) => {
        const { t } = useTranslation();
 
        const invert = name.startsWith('not-');
@@ -131,6 +134,24 @@ const ZeldaIcon = ({ name, title }) => {
        const alt = t(`icon.zelda.${name}`);
        const realTitle = title !== '' ? title || alt : null;
 
+       if (svg) {
+               const clipX = getItemMapX(strippedName);
+               const clipY = getItemMapY(strippedName);
+               return <image
+                       href={isOnItemMap(strippedName) ? '/items-v1.png' : src}
+                       width="8"
+                       height="11"
+                       x="0"
+                       y="0"
+                       transform={`translate(-${clipX} -${clipY})`}
+                       clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+               >
+                       {realTitle ?
+                               <title>{realTitle}</title>
+                       : null}
+               </image>;
+       }
+
        return <span className="zelda-icon">
                {isOnItemMap(strippedName) ?
                        <span
@@ -156,6 +177,7 @@ const ZeldaIcon = ({ name, title }) => {
 
 ZeldaIcon.propTypes = {
        name: PropTypes.string.isRequired,
+       svg: PropTypes.bool,
        title: PropTypes.string,
 };