Skip to content

Suggestion: Export Icons with "Icon" Appended to Component Name #6258

@dylangrandmont

Description

@dylangrandmont

Environment

  • Package version(s): 5.x
  • Browser and OS versions: All

Feature request

The introduction of statically imported icons is a nice improvement in v5. Unfortunately the icon names can look ambiguous when reading code, especially for icons with generic names. For example, <Icon icon={IconNames.USER} /> was very clear while <User /> is ambiguous without looking at the import statement it comes from (i.e. it is not clear that this component is an icon).

I suggest appending the word "Icon" to all the exported names of these components. For the above example, <UserIcon />. This change could be introduced in a backwards compatible way with the non-appended names marked as deprecated. This pattern exists in other UI libraries, like material-ui.

Sorry to not have noticed this and provided feedback prior to v5's release.

Examples

Current

import { Download } from "@blueprintjs/icons";

...
    <Download size={16} />}

Proposal

import { DownloadIcon } from "@blueprintjs/icons";

...
    <DownloadIcon size={16} />}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions