search

kytta / shareon

📯 Lightweight, stylish, and ethical share buttons for popular social networks
https://shareon.js.org/
MIT License
465 stars 25 forks source link

Where is github? #6

Closed AllanOricil closed 4 years ago

kytta commented 4 years ago

Hey, thanks for your question! I don't quite get this: how do you imagine sharing something on GitHub? Should the link lead to creating an issue or what?

AllanOricil commented 4 years ago

Hey, thanks for your question! I don't quite get this: how do you imagine sharing something on GitHub? Should the link lead to creating an issue or what?

Well, I was not thinking sharing stuff. I just liked your icons haha. Very easy to add to a page. But we could use it to share our Github profiles.

kytta commented 4 years ago

Ah, I see what you mean. Sorry, I prefer to keep shareon a plugin for share buttons only. However, you can easily create a button of your own.

First, find the icon and the colour you want to use. I source my icons from Simple Icons. To encode them as data-URIs I use yoksel's URL-encoder.

Then you just have to write a few lines of CSS:

.shareon > .github {
  background-color: #181717; /* taken from Simple Icons */
}

.shareon > .github::before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); /* taken from Simple Icons and URL-encoded */
}

Now if you add the button with the class github it will match the look of every other shareon icons. It will not be auto-filled with share URLs (since GitHub doesn't have one), so you can use any URL you want. Note that if you don't want to use shareon as share buttons (and only as stylish buttons), you don't need to import the JavaScript.

I will update the README with more instructions on how to customize shareon in the future releases