Add Web Share API button

[kytta]

This PR includes code by @dourosdimitris from #64, more specifically 6358185 with some other fixes (icon, script).

Closes #63

[github-actions]

size-limit report 📦

Path	Size
./dist/shareon.min.css	6.41 KB (+1.35% 🔺)
./dist/shareon.es.js	1.04 KB (+7.55% 🔺)

[kytta]

Released in v2.2.0 🎉

[dourosdimitris]

Hello, thanks for the PRs!
Seems there is an issue with the WebShare SVG.
https://picallow.com/wp-content/uploads/2023/07/2023-07-18_64b6c08182904_svg_issue.png

[kytta]

Seems there is an issue with the WebShare SVG.

This should have been fixed in v2.2.2 via #71. Try clearing the cache in your browser, it may still load the version v2.2.1. I'll try to invalidate the cache on jsDelivr's side

[dourosdimitris]

I don't think it's the browser cache. Tried the official https://shareon.js.org/ with Chrome and Firefox Focus and the web-share icon is not displayed. Also pinned CDN to v2.2.2 explicitly and doesn't work either.
Maybe it's an svg issue.

[dourosdimitris]

It's definetely an SVG issue.
Tried it here: https://www.svgviewer.dev/.
There is definetely an issue at stroke='%2523fff', it's a error in encoding.

[dourosdimitris]

A temporary solution can be switch from #fff for color to just white because we only use white.
A more robust solution is to define SVGs in CSS as base64 strings instead of URL encoded string, like:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+")

[kytta]

Weird, I didn't catch it in my Dev build! I'll reopen the other issue