Feat: Add a custom icon

[Dedelweiss]

In this PR, I'm adding the new custom icons feature. This allows users to add one or more custom icons (in png or svg format).

• Add custom
• Src from the CSS file
• Fix size for png
• Multiple custom icons
• The user must use a name in lowercase for custom icon
• Add tests

Code:

IE:
Dark icon is optional so you can just put:
"-social-links:custom::https://joyofcoding.org/sponsoring.html::joycoding.png,custom::lucasleblanc.com::lucasLogo.svg,github::https://github.com/Dedelweiss"

Result:

I think a next Issue/PR will be needed to improve the tap target of the footer's icons.

Fixes: #16856

[Dedelweiss]

Thank you very much @KacperFKorban for the feedback. Just added the corrections that you sent to me, now I'm looking for a better dynamic src for the images.

[ckipp01]

One more thing to think about here after speaking with you @Dedelweiss about this today. Keep in mind that with the solution that you outlined it will only work for 1 custom icon. So if the user wants two, then it falls apart. I think whatever solution we come up with it should allow for X amount of custom icons/links. Like the number shouldn't matter.

[Dedelweiss]

After checking, the functionality already allows the addition of several custom links/logos. But I haven't found a way to associate this with a url in the css file path. Do you have any examples that I can use to guide me @Florian3k ? Thank you very much

[Florian3k]

I'm not a CSS expert, but maybe it's possible to do something like this:
In CSS file add this fragment:

.icon-button.custom::after {
  content: attr(data-custom-icon url);
}

And in the renderer add this data-custom-icon attribute to the button:

<button data-custom-icon="../../../../path/to/image.svg">

This could possibly be extended for more attributes for dark icon etc.

[Florian3k]

I just realised that support for this is practically nonexistent: https://caniuse.com/mdn-css_types_attr_type-or-unit_url
I'll try to figure out something else. I may be necessary to move those url's from css to src attributes for images in html.

[Dedelweiss]

I just realised that support for this is practically nonexistent: https://caniuse.com/mdn-css_types_attr_type-or-unit_url I'll try to figure out something else. I may be necessary to move those url's from css to src attributes for images in html.

Thank you @Florian3k, I will look at it too, see if it's possible to do something different.

[ckipp01]

Just a few nits

[ckipp01]

Just one nit on adding a test, but other than that this should be good to go.

[ckipp01]

This looks good to me! Thanks @Dedelweiss!

[KacperFKorban]

Looks good now, one last nitpick from me.

[andrew-selvia]

Thank you @Dedelweiss!! 🙌🏻