Skip to content

Icons 4.0 changes

Adi Dahiya edited this page Jun 15, 2022 · 11 revisions

The icons build pipeline has been refactored in @blueprintjs/icons v4.0. We now use fantasticon in place of most of our custom build scripts. This allows us to keep supporting the icon font without maintaining the font files themselves (they are automatically generated from the SVG sources).

This change in tooling comes with small breaking changes, listed in order of likelihood for impacting your code base:

  • The names of the icon fonts have changed:

    • Previously, "Icons16" and "Icons20"
    • Now, "blueprint-icons-16" and "blueprint-icons-20"
  • Sass/Less variables for the icon font names have changed, they are now $blueprint-icons-16 and $blueprint-icons-20.

  • The icons metadata file has moved:

    • Previously, it was published at the path @blueprintjs/icons/resources/icons/icons.json
    • Now, it lives at @blueprintjs/icons/icons.json
  • Icon codepoints have changed. Previously, they were manually specified in this repo's icons.json file. Now, they are automatically generated by fantasticon (relevant PR #4505).

  • Icon codepoints are no longer exported as Less variables. They are still accessible in Sass and TypeScript. In Sass, they are only provided as a map, not individual variables:

    @import "~@blueprintjs/icons/lib/scss/variables";
    
    // Sass example...
    map-get($blueprint-icons-codepoints, "arrow-right");
    import { getIconContentString } from "@blueprintjs/icons";
    
    // TypeScript example...
    getIconContentString("arrow-right");
  • Sass variables and mixin names have been changed to remove the pt- prefix, swapping for bp- instead.

  • The $icon-classes variable now lives in the @blueprintjs/core package, not @blueprintjs/icons.

Clone this wiki locally