What Is This String For A SVG Icon And How Do I Get It?
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
- → Is there any way to make an SVG object clickable?
- → Performance issue for inline ALL styles in React.jS?
- → Selecting an element by its attribute when it has a colon in its name
- → Create an interactive SVG component using React
- → how i get height of a svg element using d3js
- → How to use existing SVG symbols (in a file) as markers in highcharts?
- → Issues with preserveAspectRatio, viewBox and layout.size()
- → When appending multiple tspan child elements to an svg text object, is a new child element needed each time?
- → Inline Payment Icons
- → SVG does not display correctly, iOS Safari
- → How can I change the arrow on a <select> tag?
- → SVG animation using transform is offsetting the element
- → d3 zoom not working as in example