svg - SVG 图标的这个字符串是什么，我如何获得它？

Question

我正在使用来自 here 的这个 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>'

这完全有效!我也可以在我的页面中使用它。我不知道那个字符串是什么或者它来自哪里。所以我的问题是如何为其他图标获得它？ For example this cart Icon from the Shopify Icon explorer page.

我打开 Web 控制台并看到一些东西，但与上面的不同。我到底如何将我看到的图标翻译成上面的字符串？

Answer 1

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

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard. Reference: https://developer.mozilla.org/en-US/docs/Glossary/Entity

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

< = <

" = "

> = >

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

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