在Shopify中使用SVG图标

我有30多个svg图标，我想在我的Shopify主题中使用。为了便于阅读，我不想直接在.liquid模板中添加，而是使用include：

{% include 'some-icon' %}

和some-icon.liquid来获得SVG代码

问题是，所有这30个文件都必须驻留在我的Snippets目录中。所有其他文件都在代码段中，这将是一片混乱

是否可以在Shopify中创建其他目录并从中导入它们：

{% include 'MyIcons/some-icon' %}

还有别的办法吗？

---

谢谢

一直在寻找一种简单且可维护的方法，将SVG图标添加到Shopify中。这是我找到的最好方法。如果你知道的更多，请让我知道

在创建文件“我的主题图标”时，该图标将包含：

{% if my-theme-icons == 'home' %}
<svg  xmlns="http://www.w3.org/2000/svg">
... my home icon
</svg>
{% elsif my-theme-icons == 'search' %}
<svg  xmlns="http://www.w3.org/2000/svg">
... my search icon
</svg>
{% endif %}

---

希望它能有所帮助

否。您不能为资产、代码片段或其他主题组件创建目录。在混乱的本地开发环境中，也许您可以按扩展名对文件进行颜色编码，以使类型更加明显，或者打开一些按扩展名排序的功能，以实现同样的效果

{% include 'icon' with 'shopify' %}

调用所需的图标，并用case语句将它们排列在代码段中

<!-- snippets/icon.liquid -->
<span class="icon" aria-hidden="true">
  {% case icon %}
  {% when 'shopify' %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="shopify" aria-label="Shopify" role="img">
      <title>Shopify</title>
      <desc>Shopify {{ 'icon.icon' | t }}</desc>
      <path d="M13.3 3.1C13.3 3 13.2 3 13.1 3c-0.1 0-1.3-0.1-1.3-0.1S11 2 10.9 1.9c-0.1-0.1-0.3-0.1-0.3 0 0 0-0.2 0.1-0.5 0.1C9.8 1.2 9.5 0.5 8.3 0.5 8.1 0.1 7.8 0 7.5 0c-2.1 0-3 2.6-3.4 3.9C3.3 4.1 2.8 4.3 2.7 4.3 2.3 4.5 2.2 4.5 2.2 4.9c0 0.3-1.2 9.4-1.2 9.4l9.1 1.7 4.9-1.1C15 14.9 13.3 3.2 13.3 3.1zM8.3 2.6c-0.5 0.2-1 0.3-1.6 0.5 0.3-1.2 0.9-1.8 1.4-2C8.3 2 8.3 2.6 8.3 2.6zM7.4 0.6c0.1 0 0.2 0 0.3 0.1C7.1 1 6.3 1.7 6 3.3 5.6 3.4 5.2 3.6 4.8 3.7 5.1 2.5 6 0.6 7.4 0.6zM7.8 7.5c0 0-0.5-0.3-1.2-0.3 -1 0-1 0.6-1 0.8 0 0.8 2.2 1.1 2.2 3.1 0 1.5-1 2.5-2.3 2.5 -1.6 0-2.4-1-2.4-1l0.4-1.4c0 0 0.8 0.7 1.5 0.7 0.5 0 0.6-0.4 0.6-0.6 0-1.1-1.8-1.1-1.8-2.9 0-1.5 1.1-2.9 3.2-2.9 0.8 0 1.2 0.2 1.2 0.2L7.8 7.5zM8.8 2.4c0-0.1 0-0.1 0-0.2 0-0.5-0.1-0.9-0.2-1.2 0.5 0.1 0.8 0.6 1 1.2C9.4 2.3 9.1 2.4 8.8 2.4z" class="fill"/>
    </svg>
  {% when 'menu' %}
    <!-- SVG CODE GOES HERE -->
  {% when 'cart' %}
    <!-- SVG CODE GOES HERE -->
  {% else %}
    <!-- {{ icon | capitalize }} icon not found -->
  {% endcase %}
</span>

{%case icon%}
{%when'shopify%}
购物
Shopify{{'icon.icon'|t}
{%when'菜单“%”
{%when'cart%}
{%else%}
{%endcase%}

我建议使用任务运行程序（如Gulp或Grunt）构建SVG图标精灵（有几个模块可以实现这一点）。您的src文件可以位于主题文件夹之外，最终连接并添加到您在打开

标记后立即包含的代码段中。还有一个

图标。液体
片段然后引用并“使用”它们：



您可以这样包含该代码段：
{%include'icon'和'logo'%}
稍微偏离主题，但是如果您的SVG图标是单色的，您可以使用它将其转换为字体。我在6个多月前为一个项目做了这件事，我再高兴不过了。单色？？？您可以使用填充添加任何颜色。字体面意味着额外的请求，而不是语义，这是我首先要避免的。但我所说的单色是指图标是单一的统一颜色，并且没有任何渐变，因为这不会很好地转换为字体字形。我理解这一点。您认为我的解决方案如何{%include'mytheme icons'和'search%}。有什么性能问题吗？谢天谢地，这没有性能问题，尽管代码片段本身可能会非常混乱。我建议
{%包括“我的主题图标”，图标：“图标主页”%}
。通过使用变量
icon
而不是
我的主题图标的一堆if语句，可以大大简化代码片段，实现起来非常简单、简单。非常感谢您使用案例陈述会更好
<!-- snippets/icon.liquid -->
<span class="icon" aria-hidden="true">
  {% case icon %}
  {% when 'shopify' %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="shopify" aria-label="Shopify" role="img">
      <title>Shopify</title>
      <desc>Shopify {{ 'icon.icon' | t }}</desc>
      <path d="M13.3 3.1C13.3 3 13.2 3 13.1 3c-0.1 0-1.3-0.1-1.3-0.1S11 2 10.9 1.9c-0.1-0.1-0.3-0.1-0.3 0 0 0-0.2 0.1-0.5 0.1C9.8 1.2 9.5 0.5 8.3 0.5 8.1 0.1 7.8 0 7.5 0c-2.1 0-3 2.6-3.4 3.9C3.3 4.1 2.8 4.3 2.7 4.3 2.3 4.5 2.2 4.5 2.2 4.9c0 0.3-1.2 9.4-1.2 9.4l9.1 1.7 4.9-1.1C15 14.9 13.3 3.2 13.3 3.1zM8.3 2.6c-0.5 0.2-1 0.3-1.6 0.5 0.3-1.2 0.9-1.8 1.4-2C8.3 2 8.3 2.6 8.3 2.6zM7.4 0.6c0.1 0 0.2 0 0.3 0.1C7.1 1 6.3 1.7 6 3.3 5.6 3.4 5.2 3.6 4.8 3.7 5.1 2.5 6 0.6 7.4 0.6zM7.8 7.5c0 0-0.5-0.3-1.2-0.3 -1 0-1 0.6-1 0.8 0 0.8 2.2 1.1 2.2 3.1 0 1.5-1 2.5-2.3 2.5 -1.6 0-2.4-1-2.4-1l0.4-1.4c0 0 0.8 0.7 1.5 0.7 0.5 0 0.6-0.4 0.6-0.6 0-1.1-1.8-1.1-1.8-2.9 0-1.5 1.1-2.9 3.2-2.9 0.8 0 1.2 0.2 1.2 0.2L7.8 7.5zM8.8 2.4c0-0.1 0-0.1 0-0.2 0-0.5-0.1-0.9-0.2-1.2 0.5 0.1 0.8 0.6 1 1.2C9.4 2.3 9.1 2.4 8.8 2.4z" class="fill"/>
    </svg>
  {% when 'menu' %}
    <!-- SVG CODE GOES HERE -->
  {% when 'cart' %}
    <!-- SVG CODE GOES HERE -->
  {% else %}
    <!-- {{ icon | capitalize }} icon not found -->
  {% endcase %}
</span>

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