From eeb63f08e4bcdcdc8e0c65aaeb8647e30cfa6d1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 7 Feb 2022 08:50:41 +0100 Subject: [PATCH 1/9] a5483a8a96eaa88b4da7e432e0b925d0f3943dc3 --- site/content/docs/5.1/components/breadcrumb.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.1/components/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md index 9143e76127..e73195f980 100644 --- a/site/content/docs/5.1/components/breadcrumb.md +++ b/site/content/docs/5.1/components/breadcrumb.md @@ -54,8 +54,15 @@ $breadcrumb-divider: quote(">"); It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. + +{{< callout info >}} +### Using embedded SVG + +Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape. +{{< /callout >}} + {{< example >}} -