在 Shopify 中使用 SVG 图标答案

【问题标题】：Using SVG icons in Shopify在 Shopify 中使用 SVG 图标
【发布时间】：2015-02-13 19:48:08
【问题描述】：

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

{% include 'some-icon' %}

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

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

是否可以在 Shopify 中创建一个附加目录并从那里导入它们：

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

还有其他方法吗？谢谢

【问题讨论】：

有点离题，但如果你的 SVG 图标是单色的，你可以使用 github.com/FontCustom/fontcustom 将它们转换成字体。我在 6 个多月前为一个项目做了这件事，现在再开心不过了。
单色 ???您可以使用填充添加任何颜色。字体意味着额外的请求并且不是语义的，这是我首先要避免的
罗杰。但我所说的单色是指图标是单一的统一颜色，并且不包含任何渐变 - 因为这不会很好地转移到字体字形。

标签： svg shopify

【解决方案1】：

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

在 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' %}

希望对你有帮助

【讨论】：

非常简单，易于实施。非常感谢
用case语句会好很多

【解决方案2】：

没有。您不能为资产、sn-ps 或其他主题组件创建目录。在你的本地开发环境中，你可以通过扩展名对文件进行颜色编码以保持类型更明显，或者打开一些按扩展名排序来做同样的事情。

【讨论】：

我明白这一点。您如何看待我的解决方案 {% include 'my-theme-icons' with 'search' %}。有性能问题吗？谢谢
没有性能问题，尽管 sn-p 最终可能会变得非常混乱。我建议{% include 'my-theme-icons', icon: 'icon-home' %}。这样，您的 sn-p 可以通过使用变量 icon 而不是一堆 my-theme-icons 的 if 语句来大大简化

【解决方案3】：

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

调用你想要的图标，并将它们排列在一个带有case语句的sn-p中。

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

【讨论】：

【解决方案4】：

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

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

您可以像这样包含该 sn-p：{% include 'icon' with 'logo' %}

【讨论】：