SVG as Breadcrumb Divider

[edodso2]

I am creating a custom theme for Bootstrap and would like to utilize a custom variables file as much as possible. However, I have an issue with the $breadcrumb-divider variable. By default it is set to

$breadcrumb-divider: "/";

But, I want to use an SVG, which seems to be supported by the content property. For example something like this:

$breadcrumb-divider: url(data:image/svg+xml,%3C%3Fxml%20version%...);

The issue is that in breadcrumb.scss quotes are added around $breadcrumb-divider preventing this level of customization:

content: "#{$breadcrumb-divider}";

I know I can easily create my own breadcrumb.scss and override. But, it would certainly be cleaner and more maintainable just to change the variable. Figured it was worth asking about.

Thanks,
Eric

[bkdotcom]

content vs background-image / <img>, <svg>, etc

[edodso2]

I was referring to this method:

content: url("data:image/svg+xml,%3C%3Fxml%20v...);

Not sure about browser support on this or if it is good practice. Even if the framework allowed this for the breadcrumb-divider some fine tuning for the width/height/position would most likely be needed so I guess its not really a big deal to override in a separate file.