Missing chevron icons with Breadcrumbs

[emlynmac]

Environment

• Package version(s): core 3.9.0, icons 3.3.0, select 3.3.0.
• Browser and OS versions: Chrome Version 70.0.3538.110 (Official Build) (64-bit) macOS 14.1

Question

I have followed this thread https://github.com/palantir/blueprint/issues/123 to customize the CSS and build it up in my typescript-react app and all is going generally well.

I'm using OverflowList to make a breadcrumb bar and when I see the result, the connecting chevrons are missing.

Inspecting shows that the objects are created fine: <a class="bp3-breadcrumb" tabindex="0">Library</a> but the issue is that the ::after CSS cannot find the SVG: .bp3-breadcrumbs > li::after { display: block; margin: 0 5px; background: svg-icon("16px/chevron-right.svg", (path: (fill: #5c7080))); width: 16px; height: 16px; content: ""; } In this case, Chrome tells me that this is an invalid property value for the background value.

How can I get this working? My app.scss file contains (amongst other things): $icon-font-path: "~@blueprintjs/icons/resources/icons"; @import "~@blueprintjs/icons/lib/scss/variables.scss"; @import "~@blueprintjs/icons/src/blueprint-icons.scss"; @import "~@blueprintjs/core/src/blueprint.scss";

[TheAifam5]

Hey,

Its known problem: https://github.com/palantir/blueprint/issues/2389

Regards, TheAifam5

[giladgray]

@emlynmac see the bullet points in https://blueprintjs.com/docs/#core/classes.namespacing for instructions on how to properly compile our scss source code.

[avkonst]

Here is the same issue https://github.com/palantir/blueprint/issues/3377