Add in xlink to the namespace to allow a more reliable icon-sprite.sv…

[Bobspadger]

What?

Update the grunt/svgstore.js file to add in the xlink namespace to provide a more reliable build.

Currently some svg files will cause the created single icon-sprite.svg file to stop working when referenced in the templates via <svg><use xlink:href="#icon-GiftCertTest" /></svg> method.

Requirements

• [ ] CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

Relevant conversation here where users are mentioning to removing various elements of the source svg files to get it to work - however, adding this into the build allows a much greater range of svg files to be used.

https://github.com/bigcommerce/cornerstone/issues/1246

Screenshots (if appropriate)

Screenshot of a broken icon-sprite.svg after adding an additonal svg file

To replicate a failed build.

• Add the following svg file to the assets/icons directory and run the grunt svgstore command with the default configuration.
• icon-sprite.svg will be created, but if you view it in MacOS finder you will see the error message (as per above screenshot)
• Load up a local environment and note the svg chevrons in the menu etc are now no longer visible.
• Try to reference the icon-xxx of the svg below and note it is not loaded.
• Replace the grunt/svgstore.js file with the adjusted, and run grunt svgstore again. All should be ok!

<?xml version="1.0" encoding="UTF-8"?>
<svg width="46px" height="34px" viewBox="0 0 46 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
    <title>Group 10</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="5.52997719e-05 0.0142649199 45.9999416 0.0142649199 45.9999416 33.3332818 5.52997719e-05 33.3332818"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop" transform="translate(-1207.000000, -76.000000)">
            <g id="Group-10" transform="translate(1207.000000, 76.000000)">
                <polygon id="Fill-1" fill="#FFFFFF" points="46 33 7.06907895 33 1 10.6743119 35.9342105 2 38.0065789 9.39449541 46 9.39449541"></polygon>
                <g id="Group-9">
                    <g id="Group-4">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <g id="Clip-3"></g>
                        <path d="M44.4143289,19.8984134 L27.3287606,19.8984134 C28.0392051,19.3032169 28.4815352,18.4495051 28.5576178,17.527671 C28.5471035,15.7921543 27.2288749,14.3422271 25.4973765,14.1610044 C23.9100114,14.0366958 22.3703987,14.7353857 21.4222146,16.0103493 L21.4222146,9.62490539 L44.4143289,9.62490539 L44.4143289,19.8984134 Z M21.5369956,19.8751237 C21.6801067,18.8377147 22.0787733,17.8516885 22.6986781,17.0059825 C23.3032495,16.1805095 24.2826844,15.7116594 25.3070971,15.7573654 C26.2049003,15.8404803 26.9097956,16.5598399 26.9720051,17.456492 C26.9062908,17.9946288 26.6191924,18.4813828 26.1791987,18.8000146 C25.6641448,19.1845852 25.07184,19.454163 24.4428813,19.590262 C23.4946971,19.8337846 22.5145321,19.9297089 21.5369956,19.8751237 L21.5369956,19.8751237 Z M44.4143289,31.7525619 L21.4222146,31.7525619 L21.4222146,22.1508151 C22.8188622,22.8198108 24.0732749,23.7509607 25.1168178,24.8930277 C25.2666463,25.0585298 25.4797067,25.1532897 25.7034273,25.1537263 C25.899986,25.1532897 26.0892432,25.0800728 26.2346908,24.9481951 C26.5476368,24.6570742 26.5723162,24.1709025 26.2901829,23.8497962 C25.4678781,22.9382969 24.5267035,22.1407715 23.4914844,21.4789083 L44.4143289,21.4789083 L44.4143289,31.7525619 Z M19.8364559,16.0103493 C18.894259,14.7509607 17.3731924,14.0567831 15.8010146,14.1690102 C14.0566654,14.3310189 12.7178463,15.7815284 12.7010527,17.527671 C12.7750908,18.4483406 13.2146463,19.3016157 13.9218781,19.8984134 L10.3224876,19.8984134 L10.3224876,9.62490539 L19.8364559,9.62490539 L19.8364559,16.0103493 Z M14.2866654,17.456492 C14.3409892,16.556492 15.0434019,15.8294178 15.9436876,15.7416448 C16.9816813,15.624032 17.9952876,16.1093304 18.5521067,16.990262 C19.1850083,17.8444105 19.5889321,18.8454294 19.7254717,19.8984134 C18.7439924,19.9543086 17.7597384,19.8585298 16.8079035,19.6139884 C16.1787987,19.4778894 15.58664,19.2084571 15.071586,18.8235953 C14.6288178,18.4981223 14.3440559,18.0019068 14.2866654,17.456492 L14.2866654,17.456492 Z M19.8364559,31.7525619 L10.3224876,31.7525619 L10.3224876,21.4789083 L17.767186,21.4789083 C16.732113,22.1407715 15.7907924,22.9382969 14.9684876,23.8497962 C14.67584,24.1729403 14.7006654,24.6713392 15.0239797,24.9642067 C15.1694273,25.0957933 15.3586844,25.1690102 15.5552432,25.1695924 C15.7789638,25.1690102 15.9920241,25.0743959 16.1419987,24.9087482 C17.1837892,23.7611499 18.438494,22.8246143 19.8364559,22.1508151 L19.8364559,31.7525619 Z M10.9883924,7.79928675 L11.0519162,8.04426492 L10.0212241,8.04426492 L10.9883924,7.79928675 Z M34.8210654,1.76959243 L36.4066781,8.04426492 L12.7010527,8.04426492 L12.5344305,7.41209607 L34.8210654,1.76959243 Z M8.73687492,8.83465793 L8.73687492,18.9659534 L4.31284317,20.0880786 L1.77583365,10.1307278 L8.94307175,8.32097525 C8.81441778,8.46187773 8.74125587,8.64426492 8.73687492,8.83465793 L8.73687492,8.83465793 Z M8.73687492,31.1994323 L7.23844317,31.5786172 L4.70128762,21.6212664 L8.73687492,20.6017613 L8.73687492,31.1994323 Z M45.2071352,8.04426492 L38.071586,8.04426492 L36.1768241,0.607874818 C36.1241067,0.405400291 35.9928241,0.232037846 35.8121829,0.125778748 C35.6309575,0.0180640466 35.4139543,-0.013231441 35.2096559,0.0388791849 L0.610354286,8.83465793 C0.194455873,8.93276565 -0.0684012698,9.34164483 0.0157130159,9.75925764 L5.8746527,32.7404803 C6.0098781,33.1438282 6.42227175,33.3864774 6.84196698,33.309476 L8.76856381,32.8195197 C8.88670349,33.1348035 9.1922019,33.3410626 9.52968127,33.3332818 L45.2071352,33.3332818 C45.6450844,33.3332818 45.9999416,32.9791994 45.9999416,32.5428093 L45.9999416,8.83465793 C45.9999416,8.39812227 45.6450844,8.04426492 45.2071352,8.04426492 L45.2071352,8.04426492 Z" id="Fill-2" fill="#515151" mask="url(#mask-2)"></path>
                    </g>
                    <path d="M37.2788819,27.0109753 L40.4502533,27.0109753 C40.8880565,27.0109753 41.2429137,26.6569723 41.2429137,26.2205822 C41.2429137,25.7841921 40.8880565,25.4304803 40.4502533,25.4304803 L37.2788819,25.4304803 C36.8410787,25.4304803 36.4859295,25.7841921 36.4859295,26.2205822 C36.4859295,26.6569723 36.8410787,27.0109753 37.2788819,27.0109753" id="Fill-5" fill="#494949"></path>
                    <path d="M35.6932108,30.171936 L42.0359537,30.171936 C42.4737568,30.171936 42.828614,29.8180786 42.828614,29.3816885 C42.828614,28.9452984 42.4737568,28.5915866 42.0359537,28.5915866 L35.6932108,28.5915866 C35.2552616,28.5915866 34.9002584,28.9452984 34.9002584,29.3816885 C34.9002584,29.8180786 35.2552616,30.171936 35.6932108,30.171936" id="Fill-7" fill="#494949"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Credit:

Please note I did not create this file - it is from Giao at Papathemes and all credit should go there!

[bigbot]

Autotagging @bigcommerce/themes-team