2

我从这里使用这个 NPM 包@eastsideco/polaris-vue 。它基本上是使用 Shopify 的 Polaris 框架的一种方式，但您可以使用 Vue.js 代替 React。这就是我想要的。

我遇到的一个问题是 Shopify 图标。在示例页面中，他们使用的是这个长字符串而不是 SVG 图标。看到这个：

icon: '<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z" fill-rule="evenodd"></path></svg>'

这完全有效！我也可以在我的页面中使用它。我不知道那个字符串是什么或它来自哪里。所以我的问题是如何为其他图标获得它？例如 Shopify 图标资源管理器页面中的这个购物车图标。

我打开 Web 控制台并看到一些东西，但它与上面的不同。我怎么能把我看到的图标翻译成上面的字符串？

4

1 回答 1

2

它不是随机字符串，而是常规 svg。所有特殊字符<>"都替换为 HTML 实体。

HTML 实体是一段文本（“字符串”），以和号 ( ) 开头，&以分号 ( ) 结尾;。实体经常用于显示保留字符（否则将被解释为 HTML 代码）和不可见字符（如不间断空格）。您还可以使用它们来代替标准键盘难以键入的其他字符。参考：https ://developer.mozilla.org/en-US/docs/Glossary/Entity

以下是提供的 svg 中的实体列表：

  • &lt;=<
  • &quot;="
  • &gt;=>

要在任何 svg 中替换它，只需在代码编辑器中使用“查找和替换”，这是最简单的方法。

如果您需要更多实体，这里是完整列表：https ://dev.w3.org/html5/html-author/charref

于 2019-11-20T01:46:28.687 回答