Hey there! I’ve run into this exact problem with Shopify and SVG sprites before, so let me share some practical solutions that let you keep your sprite intact instead of splitting every icon into individual files.

1. Embed the SVG Sprite Directly in Your Theme #

Shopify blocks cross-origin references for SVG sprite fragments, so embedding the full sprite code directly in your theme eliminates this issue entirely.

• Here’s how to do it:
  • Open your sprite.svg file and copy all the code inside the root <svg> tag (that includes all the <symbol> elements for your icons).
  • Paste this code right before the closing </body> tag in your theme.liquid file (or put it in a snippet that’s included globally across your site).
  • Wrap the embedded sprite in a hidden container so it doesn’t show up on the page:

    <div style="display: none;">
      <!-- Paste your full SVG sprite code here -->
    </div>
    

  • Now you can call your icons just like before, but skip the external path—only use the fragment ID:

    <svg class="icon icon--phone">
      <use xlink:href="#icon-phone"></use>
    </svg>
    

2. Host the Sprite in Shopify’s Assets Folder #

Instead of using an external CDN, upload your sprite directly to your theme’s assets. Shopify serves assets from its own trusted CDN, which avoids cross-origin restrictions.

• Steps to implement:
  • Go to your Shopify admin → Online Store → Themes → Actions → Edit Code.
  • Under the Assets section, click "Add a new asset" and upload your sprite.svg file.
  • Update your icon calls to reference the asset using Shopify’s asset_url filter:

    <svg class="icon icon--phone">
      <use xlink:href="{{ 'sprite.svg' | asset_url }}#icon-phone"></use>
    </svg>
    

  • This is a great middle ground if you don’t want to embed the full sprite code directly in your template.

3. Create a Reusable Liquid Snippet for Icons #

To keep your code clean and avoid repeating the SVG structure, make a snippet that handles icon rendering.

• How to set it up:
  • Create a new snippet named icon.liquid.
  • Add this code to the snippet:

    <svg class="icon icon--{{ name }}">
      <use xlink:href="{{ 'sprite.svg' | asset_url }}#icon-{{ name }}"></use>
    </svg>
    

  • Now you can render any icon in your templates with one simple line:

    {% render 'icon', name: 'phone' %}
    

  • This makes updating your sprite path later super easy—just change it once in the snippet instead of every icon call.

Quick Note on Why External CDNs Don’t Work #

Browsers restrict cross-origin access to SVG sprite fragments as a security measure, and Shopify’s policies amplify this. By hosting the sprite locally (either embedded or in Shopify’s assets), you avoid these restrictions entirely.

内容的提问来源于stack exchange，提问作者user1406440