Open
Description
Description
Our approach to adding icons is very messy. Currently we have different ways to utilise icons in the project:
- our newest and default way is using phosphor icons (we add icon to
cw_icon_lookup.ts
usingwithPhosphorIcon
HoC) - we have a lot of "old" icons that are defined as inline svgs components in
cw_icons.tsx
- apart from it, we have
cw_custom_icons.tsx
where we put icons that were not part of any library eg community icons etc
Ideally we should unify how we add icons, but this will be hard to do in one shot. Thus, as a first step, we need to do the cleanup and then, we might want to figure out better way to handle svg icons in the project.
Engineering Requirements
- change name of directories and files from snake_case to PascalCase (cw_icons directory and descendants)
- move scss files to be in the same directory as react components
- investigate
cw_icons.tsx
andcw_custom_icons.tsx
=> find icons that are not used incw_icon_lookup.ts
and delete them. Sometimes, they are used in the lookup, but they are not used in the codebase as a prop forCWIcon
. - Create ticket for further improvements (see Additional thougts)
Acceptance Criteria
- make sure everything looks and works good
Additional thougts
After this ticket is done, it would be good to create another one that will handle more optimisation:
- Putting svg components in single file is not ideal because the file is huge (3500 LoC) and using one icon means importing the whole file to the bundle.
- Usually, in react projects, svgs should be imported as react components (see here). To obtain this, we should add proper loader to the webpack config.