BP3 Checkbox SVG not rendering

[strickland84]

Environment

• Package version(s): Core 3.3.0, Webpack @ 4.16.4
• Browser and OS versions: Chrome/Firefox latest

Steps to reproduce

I am importing SCSS directly into my project to override variables.

Importing SCSS as below:

@import '~@blueprintjs/core/src/blueprint.scss';
@import '~@blueprintjs/icons/src/blueprint-icons.scss';
@import '~@blueprintjs/table/src/table.scss';
@import '~@blueprintjs/datetime/src/blueprint-datetime.scss';
@import '~@blueprintjs/select/src/blueprint-select.scss';

Actual behavior

Inspecting the ::before element in Chrome, the following is provided:

.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator::before {
    background-image: svg-icon("16px/small-tick.svg", (path: (fill: #ffffff)));
}

With the warning message: Invalid property value

Expected behavior

SVG icon renders correctly in Checkbox. This was working as intended in core version 3.0.1.

Possible solution

I believe this could be related to #2709 but I am not confident that I am doing everything correctly.

Could I be missing something in my webpack setup to import the SVG icons correctly? I can see that they are included in the compiled package though.

Any ideas would be much appreciated. Thanks for your work on this great library.

[Benjamsk]

Hey. Would like to add that I am getting similar behaviour with Breadcrumbs when updating bp-core from 3.0.1 to 3.3.0.

Ends up looking like this

Code is essentially similar to the example on blueprintjs.com

[strickland84]

@Benjamsk I have downgraded to core 3.0.1 as you highlighted and the issue is not present in that version. Thanks for pointing this out.

[giladgray]

@strickland84 @Benjamsk compiling the SCSS code itself is non trivial and not officially supported. you must use the exact same setup that we do: https://github.com/palantir/blueprint/blob/develop/packages/core/package.json#L22

specifically:

• support for ~ imports into node_modules (like webpack or node-sass-package-importer)
• provide an svg-icon() function to inline SVG files (like this script).

sorry this isn't documented anywhere--it should be.

[strickland84]

@giladgray thank you for explaining that, I understand now. I will look at modifying our setup.

[strickland84]

FYI, as a hack, I have included the following in my CSS:

.bp3-control.bp3-checkbox input:checked~.bp3-control-indicator:before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E")
}

[benvan]

@giladgray The bigger issue with reproducing blueprint's scss compilation step is that the icons do not seem to be bundled with @blueprintjs/core or @blueprintjs/icons.

Is there a package that contains these, or would we be best off cloning the repo and copying these icons somewhere accessible?

Thanks

[jfhidakatsu]

FYI, as a hack, I have included the following in my CSS:

Here's the one for indeterminate:
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/%3E%3C/svg%3E");