Skip to content

CWIcons - component cleanup #7106

Open
Open
@masvelio

Description

Description

Our approach to adding icons is very messy. Currently we have different ways to utilise icons in the project:

  1. our newest and default way is using phosphor icons (we add icon to cw_icon_lookup.ts using withPhosphorIcon HoC)
  2. we have a lot of "old" icons that are defined as inline svgs components in cw_icons.tsx
  3. 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

  1. change name of directories and files from snake_case to PascalCase (cw_icons directory and descendants)
  2. move scss files to be in the same directory as react components
  3. investigate cw_icons.tsx and cw_custom_icons.tsx => find icons that are not used in cw_icon_lookup.ts and delete them. Sometimes, they are used in the lookup, but they are not used in the codebase as a prop for CWIcon.
  4. 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.

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions