Allow single icon linking in Icons page

[nwpappas]

When writing documentation and referencing an icon, it would be helpful to be able to link into the Clarity documentation and reference a specific icon.

Presently, we can reference the Icons page (https://clarity.design/foundation/icons/shapes/) and call out the icon's name. It would be helpful to be able to link the direct icon, for example: https://clarity.design/foundation/icons/shapes?icon=help would open the help icon overlay and scroll the page appropriately.

[mathisscott]

That's a great suggestion, @nwpappas . Thanks!

@gnomeontherun , is this something we would be interested in adding to the website?

[hippee-lee]

I agree, this is a good idea and we could add it but it is not a trivial thing due to the way the icons are generated and rendered. This has to do with how the icon metadata is stored (in a json file ) and loaded when the vue components are initted.

Currently icons are rendered in the browser, not when ssr is run during the build so bookmarking the existing id probably won't work without some tweaking to the icon vue components.

Scrolling is also needs to be addressed because content lives inside a container with overflow: scroll. IIR setting the TOC scrolling took some tweaking because of the container with overflow scroll on it.

One other thing that might be considered if this gets picked up - automatically opening the detail view would be nice for users and also orient them to where to icon is on the page.

[gnomeontherun]

Our current oldest open ticket is exactly this request. #800

I actually spent a little time trying to do this, and as @hippee-lee says its not very straightforward. It is certainly possible, and I have left it open as a goal, but its not a top priority currently.