Kyon147
commented
4 years ago You need to make sure that you have not encoded the html entities. The documenttation is wrong it should be a proper html svg. Like so:
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="m7.6 16.3l-6.3-6.3c-0.4-0.4-0.4-1 0-1.3l7.3-7.3c0.2-0.3 0.5-0.4 0.8-0.4h6.1c0.6 0 1.1 0.5 1.1 1.1v6.1c0 0.3-0.1 0.6-0.4 0.9l-7.2 7.2c-0.4 0.4-1 0.4-1.4 0z" fill="none" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path><path d="m12.6 6c-0.6 0-1-0.4-1-1 0-0.5 0.4-1 1-1 0.5 0 1 0.4 1 1s-0.4 1-1 1z" fill="#2E2E2E"></path></svg>
Which with some custom css, depending on your SVG you can get working like my quick demo.
Edit: I've also started to maintain my own version of this package here: https://github.com/Kyon147/polaris-vue
Lovely package! Just wondering how icons work? For example, where in the world does this come from?
<polaris-button slot="1" 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>'>Button 1</polaris-button>And how can I get other icons? I was looking at the Shopify Polaris Icon explorer but wasn't able to find something similar to the above string.