Skip to content

Make use of svg-escape function #29065

@MartijnCuppens

Description

@MartijnCuppens

We should introduce a function to escape SVGs. Some SVGs are not escaped, causing them not to render in IE:

$form-check-input-indeterminate-bg-image: str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h6" stroke="#{$form-check-input-indeterminate-color}" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;

Some SVGs are escaped, but they are harder to read/maintain:

$form-switch-bg-image: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-switch-color}'/%3e%3c/svg%3e"), "#", "%23") !default;

I've used these functions in the past, they're freakin awesome to get this fixed: https://codepen.io/kevinweber/pen/dXWoRw?editors=1100

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions