Repository navigation
Website: animated icons across the whole site - #117
Merged
Merged
Conversation
- Icon stills (category, interaction, icon index, Lottie and shadcn grids, related icons, other versions, category and interaction cards) play on hover or keyboard focus. Each icon's Lottie JSON loads on the first hover (IconStill.astro, scripts/hover-icons.ts, HoverIcon.tsx); icons whose first frame is empty keep their still. - Copy buttons: the copy icon turns into a checkmark after a successful copy (install command, code blocks, icon dialog, documentation). copy.ts sets data-copied only on success. - Icon dialog: the close button is a plus that turns into an X on every open; download links get a download icon, "Icon page" an arrow. - Icon pages: breadcrumb chevrons, download icons, plus/X FAQ, arrows on "All … icons" and previous/next. - Arrows on the icon index category links, the Lottie and shadcn "All icons" links and the home FAQ links; the text arrows are gone from those labels in all 13 languages. - Language switcher and the documentation's "On this page" get a chevron, the language banner's close a plus/X, footer links that leave the site an external-link icon, the 404 page an alert that plays in and home/grid icons. - ControlIcon: new modes `screen` (plays in once on screen) and `copied`.
🔎 Website previewhttps://pr-117--affectionate-goldberg-13a61e.netlify.app Updated for commit e789bef. |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follows #116, which brought useAnimations icons to the header and the home page. This PR brings them to every other page, so visitors see the library at work everywhere.
Icon stills come alive on hover
IconStill.astro,scripts/hover-icons.ts,HoverIcon.tsx), so pages cost nothing extra until someone hovers.Micro-interactions
copy.tsnow setsdata-copiedonly on success.ControlIcon has two new modes:
screen(plays in once on screen, also when a dialog or banner around it opens) andcopied. The shared chunk grows from 2.6 to 5.1 kB gzip (17 icons).Animated control icons per page: home 31, icon page 27 (+13 stills),
/icons27 (+300 stills),/categories7 (+97 stills), documentation 8, 404 9.Verified locally (
vp check,website:buildwith all languages, preview in Chrome):