Question

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

{% include 'some-icon' %}

和some-icon.liquid有SVG代码

问题是所有这30个文件都必须驻留在我的Snippets目录中。对于Snippets中的所有其他文件，它将是一团糟。

是否可以在Shopify中创建一个额外的目录并从那里导入：

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

还有其他办法吗？谢谢

Answer 1

一直在寻找一种向Shopify添加SVG图标的简单且可维护的方法。这是我发现的最佳方式。如果你知道的更好，请告诉我。

在Snipets中，创建文件'my-theme-icons'将包含：

{% 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 'my-theme-icons' with 'home' %}
{% include 'my-theme-icons' with 'search' %}

希望有所帮助

Answer 2

没有。您无法为资产，片段或其他主题组件组成目录。在一个乱七八糟的本地开发环境中，也许你可以通过扩展来对文件进行颜色编码以使类型更加明显，或者通过扩展来打开一些排序来做同样的事情。

Answer 3

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

调用所需的图标，并将其排列在带有案例陈述的代码段中。

<!-- 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>

Answer 4

我建议使用任务运行器（如Gulp或Grunt）来构建SVG图标精灵（有几个模块可以执行此操作）。您的src文件可以在主题文件夹之外，最终连接并添加到您在打开<body>标记后立即包含的代码段。然后又有一个icon.liquid代码段引用并“使用”它们：

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

您可以包含以下代码段：{% include 'icon' with 'logo' %}

在Shopify中使用SVG图标

4 个答案: