[Tracker] feathericons.com 2.0 progress

[zaydek]

This issue is dedicated to documenting the progress of the 2.0 feathericons.com client:

• Color theming:
  • From looking at https://primer.style/css/utilities/colors it looks like there’s a pretty limited suite of colors to choose from. Instead, I’ll probably opt for the Tailwind UI color palette or the experimental Tailwind 2.0 color palette which has better support for balancing color brightness between different colors.
• Core features:
  • Download SVG (legacy user expectation)
  • Download all SVGs (legacy user expectation)
  • Copy SVG (more current user expectation)
  • Open SVG in a new page? (better for bookmarking, sharing, and possibly SEO)
  • Copy JSX (for React apps)
  • Copy icon name, e.g. alert-triangle, AlertTriangle
• Light mode, dark mode:
  • The difference here versus the current client would be adding support for a transition and possibly persisting dark mode to localStorage
• Add buttons to share Feathericons on Twitter, possibly Facebook
  • This basically means embedding a link that links out to a URL like:
    • E.g. Say thank you on Twitter!
• Improved search UI
  • We can custom render a search highlight based on the search query. This does not come with an obvious performance hit and makes for a more streamlined, focused UI. See this tweet for reference.
    • Note that searching against tags complicates this. I’m not sure how to handle this common edge-case.
• The sticky search bar should probably be disabled on mobile devices to CPU-throttling
• Input controls:
  • Make sure input controls feel responsive
  • Make sure input (and possibly dark mode) persist to localStorage, and the reset button or equivalent purges the cache
• SEO:
  • Given the existing user base, we would be unwise to roll create-react-app. Gatsby is confusing to me, so I’m going to experiment with NextJS’s modern features to build feathericons.com as a server-side generated (SSG) app that we can easily auto-deploy to Netlify or drag-and-drop if needed (no server needed).
  • It would be really cool if icons can be viewed independently for sharing purposes, which also potentially boosts SEO.
  • Alternatively, we may want to implement a bookmarking feature to aggregate icons in one place to download or copy as SVG in one place. @fayazara inspired this feature with his bookmarking feature on https://appydev.co.
    • @marcmll has request a very similar feature; bulk download / copy
• Improve readme for prospective contributors
  • Contributing should welcomed and appreciated
• Code-generation:
  • It would be really cool if we can render syntax highlighted code for an icon on click to help communicate to users Feathericons is just code. We should also provide a tooltip explaining that SVG icons copied from Feathericons can be directly copied to Figma, therefore encouraging use of https://feathericons.com.
    • @dimitrisraptis96 inspired this concept

[colebemis]

Thanks for putting together this awesome list, @codex-zaydek!

Core features:
Download SVG (legacy user expectation)
Copy SVG (more current user expectation)
Open SVG in a new page? (better for bookmarking, sharing, and possibly SEO)

People might also want to copy the name of the icon (e.g. "alert-triangle" or "AlertTriangle" for React). Also, copy JSX could be useful for pasting into React apps.

[zaydek]

Thank you (adding to original note now). Missed the JSX one. The copy icon name is a clever use-case too.

[zaydek]

I had an idea. One thing I can do is buy and ship prototypes to https://feathericons.dev to make sure the new website is battle-tested before production. Then when deployed, I can simply redirect any traffic to feathericons.com.

Update: We now own https://feathericons.dev so I’ll use this to start staging prototypes.