在Shopify中使用SVG图标

Question

在Shopify中使用SVG图标

8

我有超过30个SVG图标想在我的Shopify主题中使用。为了可读性，我不想直接将它们添加到.liquid模板中，而是要使用包含：

{% include 'some-icon' %}

需要将文件30个文件放置在我的代码段目录中，其中包括some-icon.liquid文件以及SVG代码。

问题是，所有这些30个文件都必须驻留在我的代码段目录中。与代码段中的其他文件混在一起会很混乱。

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

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

有其他的方法可以做到这一点吗？谢谢。

- Mircea

有点偏题，但如果你的SVG图标是单色的，你可以使用https://github.com/FontCustom/fontcustom将它们转换为字体。我在6个月前为一个项目做了这个，非常满意。 - firien

单色的？？？您可以使用填充添加任何颜色。Font-face意味着额外的请求，不是语义化的，这正是我一开始想要避免的。 - Mircea

罗杰。但是我所说的单色是指图标只有一种统一的颜色，并且不包含任何渐变 - 因为这在字体字形中无法很好地转换。 - firien

4个回答

1

{% 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>

- GeorgeButter

0

我建议使用任务运行器（如Gulp或Grunt）来构建SVG图标精灵（有几个模块可以实现此功能）。您的源文件可以位于主题文件夹之外，最终将它们连接起来并添加到一个片段中，该片段紧接在打开的<body>标记后包含。再添加一个icon.liquid片段来引用和“使用”它们：

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

你可以像这样包含该片段：{% include 'icon' with 'logo' %}。

- Rick Davies

0

不可以为资产、片段或其他主题组件编制目录。在本地开发环境中，混乱可能很重要，也许您可以通过扩展名着色来使文件类型更加明显，或者打开按扩展名排序的功能来实现相同的效果。

- David Lazar

我明白了。你认为我的解决方案中 {% include 'my-theme-icons' with 'search' %} 怎么样？有性能问题吗？谢谢。 - Mircea

1

没有性能问题，尽管代码片段本身可能会变得非常混乱。我建议使用 {% include 'my-theme-icons'，icon：'icon-home' %}。这样，您的代码片段可以通过使用变量 icon 来大大简化，而不是使用一堆针对 my-theme-icons 的 if 语句。 - Carson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mircea · Accepted Answer

我发现了一种简单且易于维护的方法来将SVG图标添加到Shopify中。以下是我找到的最佳方式。如果您知道更好的方法，请告诉我。

在片段中创建名为“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' %}

希望您能得到帮助