Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Bobspadger
Copy link

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.

#1246

Screenshots (if appropriate)

Screenshot of a broken icon-sprite.svg after adding an additonal svg file
Screenshot 2021-09-07 at 17 48 45

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
Copy link

bigbot commented Sep 7, 2021

Autotagging @bigcommerce/themes-team

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants