在Shopify中使用SVG图标

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

希望能帮助到你