Skip to content

investigate using @github/octicons-react instead of our hand-rolled solution #5185

@shiftkey

Description

@shiftkey

v7.4.0 of the Octicons release added support for React components, and v8.0.0 introduced a breaking change to use the @github/octicons-react package name instead.

This is of interest to me because the generated octicons.generated.ts contains the entire set of icons:

export class OcticonSymbol {
public constructor(public w: number, public h: number, public d: string) {}
public static get alert() {
return new OcticonSymbol(
16,
16,
'M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z'
)
}
public static get arrowDown() {
return new OcticonSymbol(10, 16, 'M7 7V3H3v4H0l5 6 5-6z')
}
public static get arrowLeft() {
return new OcticonSymbol(10, 16, 'M6 3L0 8l6 5v-3h4V6H6z')
}
public static get arrowRight() {
return new OcticonSymbol(10, 16, 'M10 8L4 3v3H0v4h4v3z')
}
public static get arrowSmallDown() {

And it makes up a significant part of the generated renderer bundle:

My gut feeling is that webpack isn't stripping out the unused source in the app (because of how the OcticonSymbol class is structured) and if we move to using the @github/octicons-react package we'd get the benefits of tree-shaking (because it's able to analyze which symbols are actually used in the app) as well as eliminating some boilerplate code for generating the OcticonSymbol class.

I'm not going to mark this as help wanted just yet, because it's used rather heavily across the codebase, and there are no typings available for it yet.

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedIssues marked as ideal for external contributorstech-debtIssues and pull requests related to addressing technical debt or improving the codebase

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions