svg - 在 Shopify 中使用 SVG 图标

标签 svg shopify

我想在我的 Shopify 主题中使用超过 30 个 svg 图标。为了可读性,我不想直接在 .liquid 模板中添加 then 而是使用 include:

{% include 'some-icon' %}

和 some-icon.liquid 有 SVG 代码

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

是否可以在 Shopify 中创建一个额外的目录并从那里导入它们:
{% include 'MyIcons/some-icon' %}

还有其他方法可以做到这一点吗?
谢谢

最佳答案

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

在 Snipets 创建文件“我的主题图标”女巫将包含:

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

希望能帮助到你

关于svg - 在 Shopify 中使用 SVG 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28507597/

相关文章:

javascript - 在 Shopify 中缩放单个产品图像

python - 将 numpy 数组保存为 SVG 格式

html - css 中的内联 svg 隐藏在 div 后面

javascript - 检测一个点是在 raphael.js 形状的内部还是外部

shopify - If 语句包含和小写在液体中

shopify - 如何使用 Shopify 在不上线的情况下进行更新

paypal - 在 Shopify 上创建了一个自定义样式的 PayPal 结账按钮,但我之前被告知这是不可能的

html - 编辑 Shopify 的结帐

pdf - 使用带有打印边距的 ImageMagick 在页面上平铺图像?

css - 悬停效果仅适用于第一个 SVG 路径