SSWConsulting / SSWConsulting/SSW.Website

✨ Icon Picker - Convert to an NPM Package

Open
#3,375 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
14
Forks
10
Avg merge
13h 51m
Merged PRs (30d)
38

Description

CC: @bradystroud, @adamcogan, @wicksipedia, @isaaclombardssw

Is your feature request related to a problem? Please describe.
We've developed an icon picker that can be used in the Tina editor to add icons easily using React Icons. However, the component isn't current reusable for other Tina users.

Image
Figure: Icon picker for website

Describe the solution you'd like
We'd like to extract the icon picker out of the website repo and create an NPM package for it. This would allow other Tina users to add icons to their site

Additional context

  • Important: The icon picker currently imports the entire BoxIcons library for React. This increases our bundle size (We noticed an increase of ~700kib on the home page from using it.
  • The page should work with React but be framework independent (i.e. it should work with vanilla React but have 'use client' imported at the top to ensure compatibility with Next js)
  • Consider using a framework-independent code splitting method to gradually load the icons https://legacy.reactjs.org/docs/code-splitting.html

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the existing icon picker in the website repository and reviewing how it imports React Icons and the BoxIcons library. Done means the picker is extracted as an NPM package, works with React and Next.js, and avoids importing the entire icon library where possible.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.