Why do react MobileStoreButtons have different shapes? - reactjs

With the React react-mobile-store-button component I try to implement the mobile store buttons. Problem is that they have different shape and I can't find any reason why this should be the case. I found a minimal example where this is also the case: https://codesandbox.io/s/zok0u?file=/src/index.js
How can I make them have the same shape?


The library uses png for google play and svg for app store.
You could use individual svg's instead of a library.
const GooglePlayStoreIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5435.8 1604">
<path
fillRule="evenodd"
d="M5234.4 1604h-5033C90.4 1604 0 1513.6 0 1403.5v-1203C0 90 90.4 0 201.4 0h5033c110.9 0 201.4 90 201.4 200.5v1203c0 110.1-90.5 200.5-201.4 200.5z"
clipRule="evenodd"
></path>
<path
fill="#a6a6a6"
fillRule="evenodd"
d="M5234.4 32.1c93.1 0 169.3 75.7 169.3 168.4v1203c0 92.7-75.7 168.4-169.3 168.4h-5033c-93.1 0-169.3-75.7-169.3-168.4v-1203c0-92.7 75.7-168.4 169.3-168.4h5033zm0-32.1h-5033C90.4 0 0 90.4 0 200.5v1203C0 1514 90.4 1604 201.4 1604h5033c110.9 0 201.4-90 201.4-200.5v-1203C5435.8 90.4 5345.3 0 5234.4 0z"
clipRule="evenodd"
></path>
<path
fill="#fff"
d="M2863.6 530.6c-36.3 0-66.9-12.7-91.1-37.7-24-24.3-37.4-57.8-36.8-92 0-36.5 12.4-67.4 36.8-91.9 24.1-25 54.7-37.7 91-37.7 35.9 0 66.5 12.7 91.1 37.7 24.4 25.3 36.8 56.2 36.8 91.9-.4 36.6-12.8 67.5-36.8 91.9-24.1 25.2-54.7 37.8-91 37.8zm-1080.1 0c-35.5 0-66.3-12.5-91.5-37.2-25-24.6-37.7-55.7-37.7-92.4s12.7-67.8 37.7-92.4c24.7-24.7 55.5-37.2 91.5-37.2 17.6 0 34.7 3.5 51.1 10.6 16.1 6.9 29.2 16.3 38.9 27.8l2.4 2.9-27.1 26.6-2.8-3.3c-15.3-18.2-35.8-27.1-62.9-27.1-24.2 0-45.3 8.6-62.7 25.6-17.5 17.1-26.4 39.5-26.4 66.6s8.9 49.5 26.4 66.6c17.4 17 38.5 25.6 62.7 25.6 25.8 0 47.5-8.6 64.4-25.6 10-10 16.2-24 18.4-41.7H1779v-37.4h124.2l.5 3.4c.9 6.3 1.8 12.8 1.8 18.8 0 34.5-10.4 62.4-31 83-23.4 24.4-54 36.8-91 36.8zm1436.1-5.3h-38.3L3064 337.6l1 33.8v153.8h-38.3V276.7h43.7l1.2 1.9 110.3 176.8-1-33.7v-145h38.7v248.6zm-643.8 0H2537V314.1h-67.3v-37.4H2643v37.4h-67.3v211.2zm-137.7 0h-38.7V276.7h38.7v248.6zm-217.5 0h-38.7V314.1h-67.3v-37.4h173.3v37.4h-67.3v211.2zm-130.5-.4h-148.4V276.7h148.4v37.4h-109.6v68.2h98.9v37h-98.9v68.2h109.6v37.4zm710.8-57.7c17.3 17.3 38.3 26 62.7 26 25.1 0 45.6-8.5 62.7-26 17-17 25.6-39.3 25.6-66.2s-8.6-49.3-25.5-66.2c-17.3-17.3-38.4-26-62.7-26-25.1 0-45.6 8.5-62.6 26-17 17-25.6 39.3-25.6 66.2s8.5 49.3 25.4 66.2z"
></path>
<path
fill="#fff"
fillRule="evenodd"
d="M2732.1 872.4c-94.5 0-171.1 71.7-171.1 170.6 0 98 77.1 170.6 171.1 170.6 94.5 0 171.1-72.2 171.1-170.6 0-98.9-76.6-170.6-171.1-170.6zm0 273.6c-51.7 0-96.2-42.8-96.2-103.4 0-61.5 44.6-103.4 96.2-103.4 51.7 0 96.2 41.9 96.2 103.4.1 61-44.5 103.4-96.2 103.4zm-373.3-273.6c-94.5 0-171.1 71.7-171.1 170.6 0 98 77.1 170.6 171.1 170.6 94.5 0 171.1-72.2 171.1-170.6 0-98.9-76.7-170.6-171.1-170.6zm0 273.6c-51.7 0-96.2-42.8-96.2-103.4 0-61.5 44.6-103.4 96.2-103.4 51.7 0 96.2 41.9 96.2 103.4 0 61-44.5 103.4-96.2 103.4zm-444.2-221.5v72.2h173.3c-5.3 40.5-18.7 70.4-39.2 90.9-25.4 25.4-64.6 53-133.7 53-106.5 0-189.8-86-189.8-192.5s83.3-192.5 189.8-192.5c57.5 0 99.4 22.7 130.5 51.7l51.2-51.2c-43.2-41.4-100.7-73.1-181.3-73.1-146.1 0-268.7 119-268.7 264.7 0 146.1 122.5 264.7 268.7 264.7 78.9 0 138.1-25.8 184.9-74.4 47.7-47.7 62.8-115 62.8-169.3 0-16.9-1.3-32.1-4-45h-244.6c.1-.1.1.8.1.8zm1816.9 56.2C3717.2 942.4 3674 872 3585.4 872c-87.8 0-160.8 69.1-160.8 170.6 0 95.8 72.2 170.6 169.3 170.6 78 0 123.4-47.7 142.1-75.7l-57.9-38.8c-19.2 28.5-45.9 47.2-83.8 47.2-38.3 0-65.1-17.4-82.9-51.7l228.1-94.5c0 .1-8-19-8-19zm-232.6 57c-1.8-65.9 51.2-99.4 89.1-99.4 29.9 0 54.8 14.7 63.3 36.1l-152.4 63.3zM3313.6 1203h74.9V701.8h-74.9V1203zm-123-292.7h-2.7c-16.9-20.1-49-38.3-90-38.3-85.1 0-163.5 74.9-163.5 171.1 0 95.8 78 169.8 163.5 169.8 40.5 0 73.1-18.3 90-38.8h2.7v24.5c0 65.1-34.8 100.2-90.9 100.2-45.9 0-74.4-33-86-60.6l-65.1 27.2c18.7 45 68.6 100.7 151 100.7 87.8 0 162.2-51.7 162.2-177.8V882.2H3191v28.1h-.4zm-86 235.7c-51.7 0-94.9-43.2-94.9-102.9 0-60.2 43.2-103.8 94.9-103.8 51.2 0 90.9 44.1 90.9 103.8.5 59.7-39.6 102.9-90.9 102.9zm977.6-444.2h-179.1V1203h74.9v-189.8h104.3c82.9 0 164.4-60.1 164.4-155.5s-81.2-155.9-164.5-155.9zm2.2 241.4h-106.5v-172h106.5c56.1 0 87.8 46.3 87.8 86 0 39.3-32.1 86-87.8 86zm462.5-71.7c-54.4 0-110.5 24.1-133.7 76.6l66.4 27.6c14.3-27.6 40.5-37 68.2-37 38.8 0 78 23.2 78.9 64.6v5.3c-13.4-7.6-42.8-19.2-78-19.2-71.7 0-144.4 39.2-144.4 112.7 0 67.3 58.8 110.5 124.3 110.5 50.3 0 78-22.7 95.3-49h2.7v38.8h72.2v-192c0-89.4-66.4-138.9-151.9-138.9zm-9.4 274.5c-24.5 0-58.8-12-58.8-42.8 0-38.8 42.8-53.5 79.3-53.5 33 0 48.6 7.1 68.2 16.9-5.4 45-43.4 79-88.7 79.4zm424.7-263.8l-86 217.4h-2.7l-89.1-217.4h-80.6l133.7 303.9-76.2 168.9h78L5045 882.2h-82.8zM4288 1203h74.9V701.8H4288V1203z"
clipRule="evenodd"
></path>
<linearGradient
id="a"
x1="1682.108"
x2="1624.292"
y1="1339.478"
y2="1309.634"
gradientTransform="matrix(11.64 0 0 -22.55 -18705.596 30554.37)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#00a0ff"></stop>
<stop offset="0.007" stopColor="#00a1ff"></stop>
<stop offset="0.26" stopColor="#00beff"></stop>
<stop offset="0.512" stopColor="#00d2ff"></stop>
<stop offset="0.76" stopColor="#00dfff"></stop>
<stop offset="1" stopColor="#00e3ff"></stop>
</linearGradient>
<path
fill="url(#a)"
fillRule="evenodd"
d="M418.4 302.1c-11.6 12.5-18.3 31.6-18.3 56.6v886.7c0 25 6.7 44.1 18.7 56.1l3.1 2.7 496.8-496.8v-11.1L421.5 299.4l-3.1 2.7z"
clipRule="evenodd"
></path>
<linearGradient
id="b"
x1="1712.662"
x2="1606.561"
y1="1274.838"
y2="1274.838"
gradientTransform="matrix(9.145 0 0 -7.7 -14305.538 10618.251)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#ffe000"></stop>
<stop offset="0.409" stopColor="#ffbd00"></stop>
<stop offset="0.775" stopColor="orange"></stop>
<stop offset="1" stopColor="#ff9c00"></stop>
</linearGradient>
<path
fill="url(#b)"
fillRule="evenodd"
d="M1084 973.5L918.3 807.8v-11.6L1084 630.5l3.6 2.2 196 111.4c56.1 31.6 56.1 83.8 0 115.8l-196 111.4-3.6 2.2z"
clipRule="evenodd"
></path>
<linearGradient
id="c"
x1="1707.441"
x2="1646.682"
y1="1290.047"
y2="1211.223"
gradientTransform="matrix(15.02 0 0 -11.5775 -24650.229 15829.648)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#ff3a44"></stop>
<stop offset="1" stopColor="#c31162"></stop>
</linearGradient>
<path
fill="url(#c)"
fillRule="evenodd"
d="M1087.6 971.3L918.3 802l-499.9 499.9c18.3 19.6 49 21.8 83.3 2.7l585.9-333.3"
clipRule="evenodd"
></path>
<linearGradient
id="d"
x1="1660.636"
x2="1687.767"
y1="1365.668"
y2="1330.45"
gradientTransform="matrix(15.02 0 0 -11.5715 -24650.229 15809.992)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#32a071"></stop>
<stop offset="0.069" stopColor="#2da771"></stop>
<stop offset="0.476" stopColor="#15cf74"></stop>
<stop offset="0.801" stopColor="#06e775"></stop>
<stop offset="1" stopColor="#00f076"></stop>
</linearGradient>
<path
fill="url(#d)"
fillRule="evenodd"
d="M1087.6 632.7L501.7 299.9c-34.3-19.6-65.1-16.9-83.3 2.7L918.3 802l169.3-169.3z"
clipRule="evenodd"
></path>
<path
fillRule="evenodd"
d="M1084 967.7l-581.9 330.6c-32.5 18.7-61.5 17.4-80.2.4l-3.1 3.1 3.1 2.7c18.7 16.9 47.7 18.3 80.2-.4L1088 971.3l-4-3.6z"
clipRule="evenodd"
opacity="0.2"
></path>
<path
fillRule="evenodd"
d="M1283.6 854.1l-200.1 113.6 3.6 3.6 196-111.4c28.1-16 41.9-37 41.9-57.9-1.7 19.2-16 37.4-41.4 52.1z"
clipRule="evenodd"
opacity="0.12"
></path>
<path
fill="#fff"
fillRule="evenodd"
d="M501.7 305.7l781.9 444.2c25.4 14.3 39.7 33 41.9 52.1 0-20.9-13.8-41.9-41.9-57.9L501.7 299.9c-56.1-32.1-101.6-5.3-101.6 58.8v5.8c0-64.2 45.5-90.5 101.6-58.8z"
clipRule="evenodd"
opacity="0.25"
></path>
</svg>
);
const AppStoreIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 40">
<path
fill="#A6A6A6"
d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"
/>
<path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z" />
<path
fill="#FFF"
d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zm-3.2-9.478c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793zm26.717 21.198h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zm14.907.633c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm13.209-.078c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm14.512 1.106c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zm7.049-4.264h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zm10.603 3.119c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zm9.142-2.913a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zm9.535 2.469a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441zM49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zm6.964.999c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zm8.943-2.352-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971l-1.387-4.714h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.029zm5.433 4.714H67.15v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zm2.89 0h-1.047V6.556h1.047v6.877zm6.17-2.396c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zm6.16 2.362h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zm7.043 1.62h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.202-.239.301-.527.301-.863zm10.049-.408c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.713-.698c.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.193-.317.291-.693.291-1.128zm6.721 2.362h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zm7.053-3.929h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zm5.548 3.929h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V6.556h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zm5.723-2.58c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182z"
/>
</svg>
);
And use them as normal React components.
export default class MyComponent extends React.Component {
render() {
return (
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<GooglePlayStoreIcon />
</a>
<a href="https://google.com" target="_blank" rel="noreferrer">
<AppStoreIcon />
</a>
</div>
);
}
}
CodeSandbox

Related

How do I increase the size of the SVG using Tailwind classes?

I have used an SVG as a regular images inside a React component, as shown below:
import React from "react";
const FreeCourseMaterial = () => {
return (
<img
className="w-72 h-36"
src="./images/StockCover/stock-cover.svg"
alt="Stock Cover Formula"
></img>
);
};
export default FreeCourseMaterial;
The result looks like the following:
I am trying to adjust the size of the svg using Tailwind CSS classes (w-72 & h-36). But I am seeing no change in size. Am I doing this right?
What is the method I can use to control the size of the SVG? Let's say I want to double the size of the svg. How can I achieve this?
Please note that I have used Corel Draw to create the SVG.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2018 (64-Bit) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="4in" height="2in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2666.66 1333.33"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font id="FontID0" horiz-adv-x="722" font-variant="normal" style="fill-rule:nonzero" font-style="normal" font-weight="700">
<font-face
font-family="Arial">
<font-face-src>
<font-face-name name="Arial Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0 0z"/></missing-glyph>
<glyph unicode=" " horiz-adv-x="277" d=""/>
<glyph unicode="=" horiz-adv-x="584" d="M40.9912 397.011l0 127.004 501.007 0 0 -127.004 -501.007 0zm0 -217.016l0 127.004 501.007 0 0 -127.004 -501.007 0z"/>
<glyph unicode="A" horiz-adv-x="722" d="M717.993 0l-156.146 0 -61.8628 163.003 -287.149 0 -59.517 -163.003 -153.319 0 278.007 716.009 153.168 0 286.818 -716.009zm-264.985 283.991l-99.5158 265.015 -96.6587 -265.015 196.175 0z"/>
<glyph unicode="C" horiz-adv-x="722" d="M530.992 263.992l139.996 -43.0062c-21.473,-78.8247 -57.3216,-137.319 -107.335,-175.664 -49.9835,-38.1643 -113.32,-57.3216 -190.16,-57.3216 -95.155,0 -173.318,32.5103 -234.67,97.5008 -61.1711,64.9905 -91.8168,153.83 -91.8168,266.669 0,119.154 30.8261,211.843 92.3281,277.826 61.5019,66.0131 142.492,99.0045 242.82,99.0045 87.6665,0 158.852,-26.0143 213.527,-77.8322 32.6607,-30.6758 56.9908,-74.6744 73.3211,-132.176l-143.003 -33.9839c-8.51102,36.9914 -26.1646,66.3138 -52.9909,87.8169 -27.0067,21.5031 -59.6674,32.1795 -98.0121,32.1795 -53.1713,0 -96.3279,-19.0069 -129.319,-57.1712 -33.1719,-38.0139 -49.6827,-99.6662 -49.6827,-184.987 0,-90.3431 16.3303,-154.852 48.8406,-193.167 32.6607,-38.5252 75.0053,-57.6825 127.154,-57.6825 38.5252,0 71.667,12.1801 99.3354,36.6606 27.6683,24.5105 47.6677,62.8553 59.6674,115.335z"/>
<glyph unicode="H" horiz-adv-x="722" d="M72.9903 0l0 716.009 145.018 0 0 -282.007 281.976 0 0 282.007 145.018 0 0 -716.009 -145.018 0 0 313.013 -281.976 0 0 -313.013 -145.018 0z"/>
<glyph unicode="P" horiz-adv-x="666" d="M72.9903 0l0 716.009 231.843 0c87.847,0 144.988,-3.51869 171.664,-10.6764 40.9912,-10.8267 75.3361,-34.1644 103.004,-70.1633 27.6683,-35.9989 41.5025,-82.4938 41.5025,-139.515 0,-43.9987 -7.99976,-80.8096 -23.8489,-110.824 -15.9995,-29.9841 -36.1493,-53.5022 -60.6598,-70.6746 -24.4805,-16.992 -49.5023,-28.33 -74.8248,-33.8336 -34.4952,-6.82686 -84.3283,-10.3155 -149.68,-10.3155l-93.9821 0 0 -270.007 -145.018 0zm145.018 594.99l0 -203.994 78.8247 0c56.8404,0 94.6738,3.84951 113.831,11.338 19.1573,7.4885 34.1644,19.1573 44.9911,35.3373 10.8568,15.9995 16.3303,34.4952 16.3303,55.8179 0,26.1646 -7.63887,47.6677 -22.8264,64.6898 -15.3379,16.992 -34.4952,27.6683 -57.9832,31.999 -17.1724,3.1578 -51.6676,4.81189 -103.666,4.81189l-69.5017 0z"/>
<glyph unicode="S" horiz-adv-x="666" d="M35.0065 231.993l140.988 14.0146c8.51102,-47.1866 25.503,-81.6818 51.3368,-103.847 25.8338,-22.1647 60.6598,-33.1719 104.508,-33.1719 46.3144,0 81.3209,9.83429 104.839,29.5029 23.488,19.6686 35.3072,42.6754 35.3072,69.0205 0,16.992 -4.99233,31.3073 -14.8266,43.307 -9.83429,11.8493 -27.1571,22.1948 -51.818,30.8562 -16.8416,5.98478 -55.1863,16.3303 -115.185,31.3374 -77.1706,19.3077 -131.334,42.9762 -162.491,71.1558 -43.8182,39.4875 -65.6522,87.6665 -65.6522,144.507 0,36.4801 10.3155,70.8249 30.8261,102.644 20.661,31.8487 50.3143,56.0284 89.1703,72.6895 38.8259,16.6612 85.5012,24.9917 140.477,24.9917 89.5011,0 157.018,-19.819 202.189,-59.6674 45.3219,-39.8184 68.9904,-92.8393 71.3362,-159.334l-145.018 -4.99233c-6.16523,36.9914 -19.3378,63.4868 -39.4875,79.6668 -20.1798,16.1499 -50.4947,24.3301 -90.8544,24.3301 -41.6529,0 -74.3136,-8.66139 -97.8316,-26.0143 -15.1574,-11.1576 -22.8264,-25.9842 -22.8264,-44.6603 0,-16.992 7.15768,-31.4878 21.5031,-43.4874 18.1649,-15.5183 62.344,-31.5178 132.507,-48.179 70.1633,-16.5108 121.981,-33.8336 155.484,-51.4872 33.6832,-17.8341 59.9982,-42.0138 79.0051,-72.8399 19.0069,-30.8261 28.5104,-68.84 28.5104,-114.012 0,-40.9912 -11.338,-79.4863 -34.1644,-115.335 -22.8264,-35.8185 -55.0059,-62.4944 -96.6587,-79.8171 -41.683,-17.5032 -93.6814,-26.1646 -155.845,-26.1646 -90.4935,0 -159.995,20.8114 -208.505,62.6447 -48.5098,41.683 -77.321,102.523 -86.8245,182.34z"/>
<glyph unicode="a" horiz-adv-x="556" d="M174.01 358.997l-123.996 22.0144c13.9845,50.6451 38.1643,88.1477 72.3287,112.478 34.1644,24.3301 84.9899,36.5102 152.326,36.5102 61.1711,0 106.824,-7.15768 136.838,-21.6535 29.8337,-14.5259 51.006,-32.8411 63.156,-55.1863 12.1801,-22.3151 18.3453,-63.156 18.3453,-122.823l-2.01498 -159.995c0,-45.5024 2.16535,-79.1856 6.49605,-100.839 4.3307,-21.6535 12.5109,-44.8408 24.5105,-69.5017l-135.996 0c-3.48862,8.99221 -7.99976,22.3452 -13.1725,39.9988 -2.16535,8.18021 -3.81943,13.5034 -4.84196,15.9995 -23.3076,-23.0068 -48.3294,-40.1792 -74.9752,-51.6676 -26.6759,-11.4884 -55.0059,-17.3228 -85.1704,-17.3228 -53.1713,0 -95.1851,14.4958 -125.831,43.4874 -30.6758,28.8412 -46.0137,65.5018 -46.0137,109.831 0,29.1721 7.00731,55.3367 20.9918,78.3435 14.0146,22.8264 33.5028,40.5101 58.8554,52.6601 25.1421,12.1801 61.5019,22.8264 108.989,31.999 63.9981,11.9996 108.508,23.3376 133.169,33.6832l0 13.8342c0,26.6458 -6.49605,45.6528 -19.5182,57.1411 -13.1425,11.338 -37.8334,17.022 -73.9827,17.022 -24.5105,0 -43.5175,-4.84196 -57.1712,-14.6763 -13.8342,-9.65384 -24.8414,-26.8263 -33.3223,-51.3368zm183.994 -111.004c-17.5032,-5.83441 -45.352,-12.8116 -83.5163,-20.9918 -37.9838,-8.18021 -62.9755,-16.18 -74.6444,-23.8489 -17.8341,-12.8116 -26.8563,-28.8112 -26.8563,-48.3294 0,-19.3077 7.18775,-35.8185 21.5031,-49.8331 14.3454,-13.9845 32.5103,-20.9918 54.675,-20.9918 24.6609,0 48.3294,8.18021 70.8249,24.3301 16.5108,12.5109 27.518,27.518 32.6907,45.5024 3.48862,11.6688 5.32315,34.014 5.32315,66.8251l0 27.3375z"/>
<glyph unicode="c" horiz-adv-x="556" d="M524.014 365.012l-135.003 -23.9993c-4.51114,26.8263 -14.8567,46.976 -31.0066,60.6598 -16.18,13.5034 -36.9914,20.3302 -62.6748,20.3302 -34.1644,0 -61.5019,-11.8493 -81.8321,-35.4877 -20.3302,-23.6685 -30.4953,-63.1861 -30.4953,-118.673 0,-61.6824 10.3456,-105.17 31.0066,-130.673 20.661,-25.503 48.3294,-38.1643 83.005,-38.1643 25.9842,0 47.3068,7.4885 63.8176,22.3151 16.6612,14.8567 28.33,40.3597 35.1568,76.6894l135.003 -23.0068c-13.9845,-62.0132 -40.8108,-108.839 -80.4788,-140.507 -39.668,-31.6682 -92.8393,-47.4873 -159.694,-47.4873 -75.6368,0 -136.146,23.9993 -181.137,71.8174 -45.1716,47.9986 -67.6671,114.342 -67.6671,199.182 0,85.832 22.6459,152.507 67.8175,200.325 45.1716,47.8482 106.343,71.667 183.513,71.667 62.9755,0 113.17,-13.6537 150.492,-40.8409 37.1718,-27.1571 63.8176,-68.4791 80.178,-124.147z"/>
<glyph unicode="d" horiz-adv-x="610" d="M548.014 0l-127.004 0 0 76.1782c-21.1723,-29.6833 -46.3445,-51.8481 -75.1857,-66.8551 -28.8112,-14.8266 -57.9832,-22.3151 -87.3357,-22.3151 -59.8177,0 -110.974,23.9993 -153.65,72.1482 -42.495,48.179 -63.8477,115.185 -63.8477,201.347 0,87.9974 20.661,155.003 62.1635,200.836 41.5025,45.8332 93.8318,68.6596 157.168,68.6596 58.0133,0 108.358,-24.1797 150.672,-72.3287l0 258.338 137.018 0 0 -716.009zm-366.004 269.496c0,-55.4871 7.66894,-95.6663 22.8264,-120.508 22.1647,-35.9989 52.9909,-53.9833 92.6589,-53.9833 31.5178,0 58.3441,13.5034 80.3284,40.5101 22.1647,26.9766 33.1719,67.1559 33.1719,120.808 0,59.8478 -10.6764,102.854 -32.1494,129.169 -21.5031,26.3451 -48.8406,39.5176 -82.3434,39.5176 -32.5103,0 -59.6674,-13.0222 -81.6818,-39.0063 -21.8339,-26.0143 -32.811,-64.8402 -32.811,-116.508z"/>
<glyph unicode="e" horiz-adv-x="556" d="M371.989 163.995l137.018 -23.0068c-17.5032,-50.1639 -45.352,-88.3282 -83.1855,-114.643 -37.9838,-26.1646 -85.5012,-39.3372 -142.312,-39.3372 -90.1627,0 -157.018,29.5029 -200.174,88.4785 -34.1644,47.3369 -51.3368,107.004 -51.3368,179.183 0,86.0125 22.4956,153.499 67.3363,202.159 44.8408,48.8406 101.651,73.1707 170.341,73.1707 76.9902,0 137.83,-25.503 182.491,-76.509 44.5099,-50.9759 65.8326,-129.169 63.8477,-234.489l-343.027 0c1.02253,-40.6604 11.9996,-72.3287 33.1719,-95.0047 21.0219,-22.676 47.3369,-33.9839 78.6743,-33.9839 21.5031,0 39.4875,5.83441 54.0134,17.4732 14.6462,11.6688 25.6534,30.5254 33.1419,56.5096zm7.99976 139.003c-0.992451,39.8484 -11.1576,70.1633 -30.6457,90.8243 -19.5182,20.8415 -43.1867,31.187 -71.1858,31.187 -29.8337,0 -54.4946,-11.0072 -73.9827,-32.8411 -19.5182,-21.8339 -29.0217,-51.6676 -28.6608,-89.1703l204.475 0z"/>
<glyph unicode="g" horiz-adv-x="610" d="M59.0057 -32.9915l156.988 -19.0069c2.67661,-18.4957 8.66139,-31.157 18.0145,-38.1643 13.1725,-9.83429 33.6531,-14.8266 61.6523,-14.8266 35.8485,0 62.6748,5.32315 80.6592,16.1499 11.9996,7.18775 21.1723,18.6761 27.3375,34.6756 4.18033,11.338 6.34567,32.5103 6.34567,63.0056l0.661634 75.8173c-41.3221,-56.4795 -93.3205,-84.6591 -155.995,-84.6591 -69.6821,0 -124.989,29.5029 -165.679,88.3282 -31.999,46.4948 -47.9986,104.508 -47.9986,173.679 0,87.0049 21.0219,153.319 62.8553,199.152 41.8333,45.8332 93.9821,68.84 156.326,68.84 64.1484,0 117.169,-28.1796 158.822,-84.5087l0 73.5015 127.996 0 0 -465.339c0,-61.141 -4.99233,-106.974 -15.1574,-137.139 -10.0147,-30.345 -24.1797,-54.0134 -42.495,-71.3362 -18.1649,-17.1724 -42.495,-30.8562 -73.0204,-40.5101 -30.4953,-9.83429 -68.9904,-14.6763 -115.485,-14.6763 -87.9974,0 -150.341,15.1875 -187.152,45.352 -36.841,30.3149 -55.1863,68.4791 -55.1863,115.004 0,4.48107 0.180446,10.1651 0.511263,16.6612zm123.004 302.998c0,-55.0059 10.6463,-95.1851 31.8186,-120.688 21.3527,-25.4729 47.6677,-38.3146 78.8247,-38.3146 33.3524,0 61.6824,13.1725 84.6892,39.3372 23.1572,26.1646 34.6456,64.8402 34.6456,116.147 0,53.6826 -10.9771,93.5009 -33.1419,119.515 -22.0144,25.9842 -50.0135,39.0063 -83.8471,39.0063 -32.8411,0 -59.8177,-12.8417 -81.1705,-38.3447 -21.1723,-25.503 -31.8186,-64.3289 -31.8186,-116.658z"/>
<glyph unicode="i" horiz-adv-x="277" d="M71.9978 589.005l0 127.004 136.988 0 0 -127.004 -136.988 0zm0 -589.005l0 518.992 136.988 0 0 -518.992 -136.988 0z"/>
<glyph unicode="k" horiz-adv-x="556" d="M67.0055 0l0 716.009 136.988 0 0 -379.838 160.506 182.822 168.987 0 -176.987 -189.648 190.009 -329.343 -147.996 0 -131.004 234.158 -63.5169 -67.998 0 -166.16 -136.988 0z"/>
<glyph unicode="l" horiz-adv-x="277" d="M71.9978 0l0 716.009 136.988 0 0 -716.009 -136.988 0z"/>
<glyph unicode="n" horiz-adv-x="610" d="M544.014 0l-137.018 0 0 264.503c0,55.9983 -3.00743,92.1777 -8.84184,108.508 -5.98478,16.4807 -15.4883,29.142 -28.8112,38.3146 -13.353,9.17266 -29.3525,13.6838 -47.9986,13.6838 -23.9993,0 -45.5024,-6.49605 -64.5093,-19.5182 -19.1573,-12.9921 -32.1795,-30.3149 -39.1567,-51.6676 -7.18775,-21.5031 -10.6764,-61.1711 -10.6764,-119.154l0 -234.67 -136.988 0 0 518.992 126.974 0 0 -76.1481c45.5024,58.1637 102.674,87.1553 171.844,87.1553 30.345,0 58.1637,-5.50359 83.3358,-16.3303 25.3225,-11.0072 44.3295,-24.8414 57.1712,-41.683 12.9921,-16.992 21.9843,-36.1493 27.0067,-57.6524 5.1427,-21.5031 7.66894,-52.1789 7.66894,-92.1777l0 -322.156z"/>
<glyph unicode="o" horiz-adv-x="610" d="M39.9988 265.827c0,45.6828 11.1576,89.8319 33.6531,132.507 22.5256,42.8258 54.3442,75.3361 95.5159,97.8316 41.1717,22.4956 87.0049,33.8336 137.83,33.8336 78.4939,0 142.672,-25.503 192.836,-76.509 50.1639,-51.1564 75.1556,-115.485 75.1556,-193.498 0,-78.6443 -25.3225,-143.815 -75.8173,-195.483 -50.6752,-51.6676 -114.342,-77.5014 -191.182,-77.5014 -47.4873,0 -92.8092,10.8267 -135.996,32.3299 -43.0062,21.5031 -75.8173,52.9909 -98.3429,94.6738 -22.4956,41.5025 -33.6531,92.1476 -33.6531,151.815zm140.988 -7.33813c0,-51.4872 12.1801,-90.9747 36.5102,-118.312 24.5105,-27.518 54.4946,-41.1717 90.3431,-41.1717 35.6681,0 65.6522,13.6537 89.8319,41.1717 24.1496,27.3375 36.3297,67.1559 36.3297,119.335 0,50.8255 -12.1801,89.9823 -36.3297,117.32 -24.1797,27.4879 -54.1638,41.1717 -89.8319,41.1717 -35.8485,0 -65.8326,-13.6838 -90.3431,-41.1717 -24.3301,-27.3375 -36.5102,-66.8251 -36.5102,-118.342z"/>
<glyph unicode="r" horiz-adv-x="389" d="M203.001 0l-136.988 0 0 518.992 126.974 0 0 -73.6519c21.8339,34.826 41.5025,57.6524 59.0057,68.4791 17.5032,10.8568 37.3523,16.18 59.517,16.18 31.3374,0 61.5019,-8.66139 90.4935,-25.8338l-42.495 -119.666c-23.1873,15.0071 -44.6603,22.4956 -64.5093,22.4956 -19.3378,0 -35.6681,-5.32315 -48.991,-15.8191 -13.353,-10.6764 -23.8489,-29.6833 -31.5178,-57.3517 -7.66894,-27.6683 -11.4884,-85.6516 -11.4884,-173.829l0 -159.995z"/>
<glyph unicode="s" horiz-adv-x="556" d="M23.0068 146.011l137.981 20.9918c5.83441,-26.4954 17.6837,-46.6753 35.6681,-60.329 17.8341,-13.8342 43.0062,-20.661 75.1857,-20.661 35.4877,0 62.1635,6.49605 80.148,19.4881 11.9996,9.17266 18.0145,21.5031 18.0145,36.841 0,10.3155 -3.33825,18.9769 -9.83429,25.8338 -6.82686,6.49605 -22.1647,12.6613 -45.8332,18.1649 -110.824,24.4805 -181.017,46.8257 -210.67,67.0055 -41.1717,28.1495 -61.6523,67.1559 -61.6523,116.989 0,45.1716 17.8341,83.005 53.3217,113.651 35.4877,30.6758 90.4935,46.0137 164.988,46.0137 71.0054,0 123.846,-11.6688 158.341,-34.826 34.4952,-23.3376 58.3441,-57.6825 71.3362,-103.185l-128.989 -23.9993c-5.50359,20.3302 -16.18,35.9989 -31.6682,46.8557 -15.5183,10.8267 -37.6831,16.1499 -66.5243,16.1499 -36.3297,0 -62.3139,-4.99233 -78.1631,-15.1574 -10.4959,-7.15768 -15.6687,-16.5108 -15.6687,-27.8488 0,-9.83429 4.51114,-18.1649 13.6838,-24.9917 12.4808,-9.17266 55.3367,-21.9843 128.658,-38.6755 73.3512,-16.6612 124.508,-36.9914 153.499,-61.141 28.8412,-24.3602 43.1867,-58.5246 43.1867,-102.192 0,-47.4873 -19.849,-88.4785 -59.6674,-122.643 -39.668,-34.1644 -98.5234,-51.3368 -176.506,-51.3368 -70.6746,0 -126.673,14.3154 -167.995,42.8258 -41.1717,28.5104 -68.1784,67.1559 -80.8397,116.177z"/>
<glyph unicode="t" horiz-adv-x="333" d="M309.013 518.992l0 -108.989 -94.0122 0 0 -210.159c0,-42.6754 0.84208,-67.5168 2.67661,-74.5241 1.83453,-6.97723 5.83441,-12.8116 12.3305,-17.4732 6.3156,-4.51114 13.9845,-6.85694 23.1572,-6.85694 12.8417,0 31.157,4.3307 55.3367,13.1725l11.4884 -106.673c-31.8186,-13.6537 -67.8175,-20.4806 -108.147,-20.4806 -24.691,0 -46.8557,4.15025 -66.6747,12.4808 -19.849,8.33058 -34.3448,19.1874 -43.4874,32.3299 -9.3531,13.353 -15.6687,31.187 -19.3378,53.863 -2.85706,15.9995 -4.3307,48.3294 -4.3307,97.1399l0 227.181 -63.0056 0 0 108.989 63.0056 0 0 103.004 136.988 80.99 0 -183.994 94.0122 0z"/>
<glyph unicode="v" horiz-adv-x="556" d="M214.67 0l-209.167 518.992 143.996 0 97.6813 -264.834 28.33 -88.4785c7.4885,22.4956 12.3305,37.3222 14.165,44.4799 4.66151,14.6763 9.50347,29.3525 14.8266,43.9987l99.0045 264.834 140.988 0 -206.159 -518.992 -123.665 0z"/>
</font>
<style type="text/css">
<![CDATA[
#font-face { font-family:"Arial";font-variant:normal;font-style:normal;font-weight:bold;src:url("#FontID0") format(svg)}
.str0 {stroke:#727376;stroke-width:26.67;stroke-miterlimit:2.61313}
.fil4 {fill:none}
.fil0 {fill:#E6E7E8}
.fil1 {fill:#727376}
.fil3 {fill:#00A859}
.fil2 {fill:#3E4095}
.fnt0 {font-weight:bold;font-size:130.91px;font-family:'Arial'}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0" x="-0.01" y="-0.02" width="2666.67" height="666.67"/>
<text x="175.55" y="377.12" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="458.42" class="fil1 fnt0">Average </text>
<text x="2186.98" y="458.42" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="458.42" class="fil2 fnt0">Historical</text>
<text x="1323.93" y="269.91" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="307.61" width="1118.5" height="6.28"/>
<text x="175.55" y="1036.94" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="1118.24" class="fil1 fnt0">Average </text>
<text x="2099.6" y="1118.24" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="1118.24" class="fil3 fnt0">Planned</text>
<text x="1323.93" y="929.72" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="967.42" width="1118.5" height="6.28"/>
<rect class="fil4 str0" x="2.01" y="-1.79" width="2666.67" height="1333.33"/>
</g>
</svg>

how i can make SVG clickable to trigger a function?

I have a card in which I've added SVG from bootstrap. I want to change the content of the card when the SVG is clicked. In a way i want to use svg as button.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-line" viewBox="0 0 16 16" onClick={showStatHandler}>
<path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
</svg>

you can get a listener to your SVG by doing smth like
document.querySelector('svg').onclick = () => {
// do stuff
}

How to find react-map-gl-draw icons className

I'm using the react-map-gl-draw library to draw polygons on the map. I would like to find out the className for the icons of react-map-gl-draw.
For example, className="mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash" will give me a button with trash can icon. I was wondering where can I find other icons' className.

In terms of buttons you can add, these are your options:
.mapbox-gl-draw_point {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
}
.mapbox-gl-draw_polygon {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
}
.mapbox-gl-draw_line {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
}
.mapbox-gl-draw_trash {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
}
.mapbox-gl-draw_uncombine {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
}
.mapbox-gl-draw_combine {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
}
It seems like everything else is overriding default Mapbox styling.
Here's the full css file of classes from react-map-gl-draw if you want to check it out.

Change <svg> 4 times and loop it

I'm trying to change 4 on time and loop it. On page load it should show the first then the second and so on... Sorry for the question. I am totally new to this kinda Javascript/jQuery. Is it possible to do a class changer like class="show" and class="hide"? Thank you
Here is my code i want to loop:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>

I hope this is what you want. I've made the svg elements smaller, and I'm using a css animation to change the opacity of the SVG elements.
svg{height:100px; opacity:0 }
#keyframes _h {
0%{opacity:0}
20%{opacity:1}
90%{opacity:1}
}
#keyframes _a {
0%{opacity:0}
20%{opacity:0}
40%{opacity:1}
90%{opacity:1}
}
#keyframes _o {
0%{opacity:0}
40%{opacity:0}
60%{opacity:1}
90%{opacity:1}
}
#keyframes _l {
0%{opacity:0}
60%{opacity:0}
80%{opacity:1}
90%{opacity:1}
}
#H{
animation: _h 5s ease-in infinite
}
#A{
animation: _a 5s ease-in infinite
}
#O{
animation: _o 5s ease-in infinite
}
#L{
animation: _l 5s ease-in infinite
}
<svg id="H" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>
<svg id="A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>
<svg id="O" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>
<svg id="L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>

Aframe move vr-camera-component

I move my camera when i trigger an event and it works perfectly on pc but not when im on my phone in the vr-mode. Need to fix this here some code:
<a-entity id="camentity" rotation="0 90 0">
<a-camera id="cam" user-height="0" wasd-controls-enabled="false" look-controls>
<a-animation attribute="position" begin="movecam_1" duration="500" from="0 0 0" to="-40 0 -50"></a-animation>
<a-animation attribute="position" begin="movecam_1_bc" duration="500" from="-40 0 -50" to="0 0 0"></a-animation>
</a-camera>
</a-entity>
function kameramove_1() {
document.querySelector( "#cam" ).emit('movecam_1');
}
function kameramove_1_back() {
document.querySelector( "#cam" ).emit('movecam_1_bc');
}

Animate the camera rig (parent of the camera, camentity in your case) not the camera itself:
<a-entity id="camentity" rotation="0 90 0">
<a-animation attribute="position" begin="movecam_1" duration="500" from="0 0 0" to="-40 0 -50"></a-animation>
<a-animation attribute="position" begin="movecam_1_bc" duration="500" from="-40 0 -50" to="0 0 0"></a-animation>
<a-camera id="cam"></a-camera>
</a-entity>

Resources