[Breadcrumbs] inline SVG icons

[giladgray]

Fixes #2732

Changes proposed in this pull request:

• inline SVG icons in breadcrumbs css, like we did for checkboxes in [Checkbox] inline SVG background-image for icon #2709

[themadcreator]

yeah, better

[eastside]

Hmm, I think there might be an issue with this.

We're compiling SCSS from @blueprint/core, so we can override variables with our own colors, typography, etc. (I think this is what you're supposed to do if you want to override those variables, correct me if I'm wrong.) Here's our index.scss:

// We first need to import Blueprint.js' core variables SCSS, because then we're going to override them
@import "../../node_modules/@blueprintjs/core/lib/scss/variables.scss";

// Cool, now we can override the variables if we want in styles/variables.scss
@import "variables.scss";

// And then we can import blueprint's source SCSS next. This has all the styles for Blueprint.
@import "../../node_modules/@blueprintjs/core/src/blueprint.scss";

I just noticed that the breadcrumb chevron icon is missing. Inspecting Chrome reveals an invalid property value:

So our SCSS can't find the svg-icon function.

My first thought was to figure out how to add my own version of that function, but then I realized I'd need the resources/icons files. These aren't included in the NPM @blueprintjs/core package. And that seemed like a whole mess.

I ended up overriding just the breadcrumb chevron, adding this line below our blueprint.scss imports.

// Any inlined SVGs seem to be broken right now in BP3. We're using Breadcrumbs, which relies on them.
.bp3-breadcrumbs>li:after{
    background: 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='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='rgba(92,112,128,1)'/%3E%3C/svg%3E");
}

Anyway, I feel like there's a better way here.