I am using this NPM package @eastsideco/polaris-vue from here. Its basically a way to use Shopify's Polaris framework but instead of React you can use Vue.js. Which is what I want.
One issue I'm having is the Shopify Icons. Here in the example page they are using this long string of characters instead of the SVG icon. See this:
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>'
And that totally works! I was able to also use it in my pages. I have no clue what that string is or where it comes from. So my question is how can I get that for other icons? For example this cart Icon from the Shopify Icon explorer page.
I open the web console and see something but its not the same as above. How in the world can I translate the icons I see to the string above?
It's not a random string but a regular svg. All special characters like <>" are replaced with HTML entities.
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
Here is a list of the entities in provided svg:
< = <" = ">= >To replace it in any svg just use "find and replace" in your code editor, it's the easiest way.
In case you need more entities here is full list: https://dev.w3.org/html5/html-author/charref