Blueprint: Chrome reports bad background style for icons? Why icons are not rendered?

[avkonst]

Environment

• __Package version(s)__: 3.6.1 (and 3.1.0 for icons)
• __Browser and OS versions__: Chrome, Edge, Windows

Question

I use OverflowList component. After upgrading to 3.6.1 from earlier 3.x version, Icons for Overflow list are not rendered anymore. I have compared the difference between your example and my one. The source code of the component is identical, however background CSS is rendered differently. Could you please let me know what is not right in my setup?

Here is what I see rendered:

Here is what Chrome inspect shows for missed icons (notice incorrect background CSS property):

Here is what I see rendered for your example in the documentation:

If it is important, I use create-react-app with typescript support and build css from scss with:

node-sass-chokidar --importer=node_modules/node-sass-tilde-importer --include-path ./src --include-path ./node_modules src/ -o src/

My index.scss includes blueprintjs scss as the following:

@import '~@blueprintjs/core/src/blueprint.scss';
// although, I do not include Icon fonts as they were replaced with SVG
// adding the following does not make the difference
// @import '~@blueprintjs/icons/src/blueprint-icons.scss';

I do not understand what is wrong in my setup. Could you please give me a hint?

[hrgui]

I had this same issue as well, and I compile everything through sass-loader.

This is because blueprintjs uses sass-inline-svg. to provide the svg-icon function. According to https://github.com/palantir/blueprint/blob/develop/packages/core/src/docs/classes.md#custom-namespace, they recommend using the CSS file instead of the SASS file, but the CSS file imposes some global stylings (body, h1-h6 and etc), so I couldn't use it.

To workaround this, since there was only 4 instances of svg-icon, I:

1. Created a SASS map with the 4 icons that it was trying to refer to.
2. Created a function called svg-icon that takes in the sass string, looks up the map, and then creates the url(data:image/svg+xml.... ... with the value returned from the map)
3. If there were additional params, I filled it in manually w/ url.

It's definitely a workaround but for what its worth, it works.

[avkonst]

What would be the correct command line to build this scss into CSS? I used
chokidar because it was mentioned in create react app docs. What is the
other way so that the workaround is unnecessary?

On Thu, 27 Sep 2018, 16:25 Harman, [e-mail] wrote:

I had this same issue as well, and I compile everything through
sass-loader.

This is because blueprintjs uses sass-inline-svg
https://www.npmjs.com/package/sass-inline-svg. to provide the svg-icon
function. According to
https://github.com/palantir/blueprint/blob/develop/packages/core/src/docs/classes.md#custom-namespace,
they recommend using the CSS file instead of the SASS file, but the CSS
file imposes some global stylings (body, h1-h6 and etc), so I couldn't use
it.

To workaround this, since there was only 4 instances of svg-icon, I:

1. Created a SASS map with the 4 icons that it was trying to refer to.
2. Created a function called svg-icon that takes in the sass string,
   looks up the map, and then creates the url(data:image/svg+xml.... ...
   with the value returned from the map)
3. If there were additional params, I filled it in manually w/ url.

It's definitely a workaround but for what its worth, it works.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/palantir/blueprint/issues/2976#issuecomment-424954987,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADyZVVxa0ob3bRKv1yMmLrjog4pBdkpFks5ufFMngaJpZM4W7r5Z
.

[giladgray]

@avkonst @hrgui yes you are not compiling our SCSS files properly.
see docs in https://blueprintjs.com/docs/#core/classes.namespacing for a link to the package we use to support this.

[avkonst]

I have figured out how you build it. bluprintjs package distributive includes sass-inline-svg.js but it does not include svg icons, which are required for the build. As a result, I need to download them manually from bluprintjs git repo. Would it be possible to include the icons required for sass build into the package?

[giladgray]

ugh that's an awful situation... i really do not want to ship 600 svg files just for this.

[giladgray]

file a new issue for that request. if anything, they'll ship in the icons package and core will import from there.

[joshuaaron]

I had this same issue as well, and I compile everything through sass-loader.

This is because blueprintjs uses sass-inline-svg. to provide the svg-icon function. According to https://github.com/palantir/blueprint/blob/develop/packages/core/src/docs/classes.md#custom-namespace, they recommend using the CSS file instead of the SASS file, but the CSS file imposes some global stylings (body, h1-h6 and etc), so I couldn't use it.

To workaround this, since there was only 4 instances of svg-icon, I:

1. Created a SASS map with the 4 icons that it was trying to refer to.
2. Created a function called svg-icon that takes in the sass string, looks up the map, and then creates the url(data:image/svg+xml.... ... with the value returned from the map)
3. If there were additional params, I filled it in manually w/ url.

It's definitely a workaround but for what its worth, it works.

@hrgui
Any chance you could share a little more info on the second point here? Attempting to do the same.

[giladgray]

@joshuaaron try doing what core does to compile itself: https://github.com/palantir/blueprint/blob/develop/packages/core/package.json#L24. also see bulleted notes in https://blueprintjs.com/docs/#core/classes.namespacing.

if this persists, please file a new issue as this one is closed and you're lucky i saw it.

[mdebeus]

I implemented @hrgui's workaround and thought I would share. I have a file called 'svg-icon-overrides.scss' that contains a map and an svg-icon function. I import this file before I import the blueprint SASS (not sure if the order matters).

The contents of svg-icon-overrides.scss is below:

$svg-icon-map: (
        '16px/small-minus.svg': "path 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'/",
        '16px/small-tick.svg': "path 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='%23fff'/",
        '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/",
        '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g",
);

@function svg-icon($inline-svg, $fill-color) {
  @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C" + map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E")
}

[avkonst]

@mdebeus thank for this. I have migrated to this workaround and it works! Great. The only thing we need to worry about is to update the content of the workaround with new releases of the blueprintjs. How would you do and share it?

[avkonst]

Also, I think we should have another ticket opened, which will look after removing the workaround. As of today, I have got the impression, it is not going to be resolved.

[avkonst]

I have found, there is the opened ticket https://github.com/palantir/blueprint/issues/3377

[mdebeus]

Also, I think we should have another ticket opened, which will look after removing the workaround. As of today, I have got the impression, it is not going to be resolved.

@avkonst
Unless there are substantial changes, I think it will be fine as is. To get the data for the images, I displayed the controls in the blueprintjs website and then displayed the developer tools (F12 in Chrome) so that I could view the html/styles, I then found the checkbox styles, and pulled out the data for the image.

If the icons or colors change, we'll have to update the svg-icon map with the newest data.

Unless you have a better idea...