[Suggestion] Add "Icon detail" view

[ericcornelissen]

ℹ️ If you're interested in this feature, please leave comment or add a 👍

---

Kind of issue

• Feature
• Bug
• Design
• Other, namely:

Description

As per this comment, add an "icon detail view". This would display a particular icon at a larger size and potentially give download options such as #31, #32, #33 for that particular icon, as seen in this example mockup.

I'm not sure how useful this is. The larger icon can be nice, but if that is the only benefit I'm not sure something like the mockup below is suitable. The icon-specific download options can be nice, but I would expect that everyone would nearly always want the same download option for all icons.

What it may allow us to do is things like:

• Show everything that is already in the card (the SVG, color, brand guidelines URL, license name & URL)
• Show aliases (Adding Aliases simple-icons#4797)
• Show the SVG source URL
• Show the brand website URL
• Show if the icon will be removed in next versions
• Link to milestone and pull request of icon removal, if will be removed in next versions
• Option to copy the brand name
• Option to copy the brand slug
• Option to copy the font class
• Option to copy the font code point
• Option to copy the entire SVG (even though that is already possible)
• Option to copy the path data
• Option to copy code to use in NPM
• Download svgs in the brand color ([Suggestion] Add support to download icons in the brand color #32)
• Show the icon in a variety of sizes ([Suggestion] Display logos at a variaty of sizes #40)
• More? (Suggestions are welcome)

[PeterShaggyNoble]

I think this is becoming increasingly necessary with all we're planning to add to the project and packages; trying to display everything on the cards is going to cause too much clutter. We could, as one example, show the slug here and/or the code to retrieve the icon through NPM. Another feature could be providing more options for for copying - see the sidebar on https://petershaggynoble.github.io/MDI-Sandbox/ for some possible examples.

[ericcornelissen]

I think this is becoming increasingly necessary with all we're planning to add to the project and packages; trying to display everything on the cards is going to cause too much clutter.

So far, i.e. with only guidelines and licenses, it is still manageable I think.

With the addition of custom slugs and simple-icons/simple-icons#5002, including slugs in the card may get a bit messy.

Regarding aliases, I think it depends what we want to do with those. My take (despite what is in the issue description) would be that it shouldn't affect the design of the cards much. Namely:

• Duplicates: can be displayed as separate card, just with the same SVG.
• Localisation: can be a global option, if your localisation matches for an icon, than we can display the localised name (admittedly, this may cause confusion w.r.t. the slug, so we should definitely display that on the website if we choose to do this)
• akas: should be limited to search and hidden from the user.
• Old: should either be ignored altogether or limited to search and hidden from the user.

Any other things we're planning to add that I'm forgetting here?

or the code to retrieve the icon through NPM. Another feature could be providing more options for for copying - see the sidebar on https://petershaggynoble.github.io/MDI-Sandbox/ for some possible examples.

Those are some interesting ideas, nice 👍

[jorgeamadosoria]

Is this supppaes to be a separate page or a modal? And what's the trigger, a click on the icon? I suppose that does away with the copy button. Or should both buttons be kept?

We are going to need design suggestions here to proceed to coding this feature.
@PeterShaggyNoble @ericcornelissen @adamrusted @mondeja @sachinraja

[sachinraja]

I like the sidebar design in simple-icons/simple-icons#980 (comment) and I think that would be a great way to proceed. I think we can do away with the copy button and instead include that next to the download options.

[jorgeamadosoria]

I like the sidebar design in simple-icons/simple-icons#980 (comment) and I think that would be a great way to proceed. I think we can do away with the copy button and instead include that next to the download options.

a sidebar that moves the layout of the tickets, or that slides out on top of the page?

Or a fixed sidebar? I don't think I like it if it is fixed.

[sachinraja]

I think one that slides out on top of the page would be fine. Layout shift is not ideal.

[jorgeamadosoria]

I think one that slides out on top of the page would be fine. Layout shift is not ideal.

agreed. Thank you