From a5483a8a96eaa88b4da7e432e0b925d0f3943dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 1 Feb 2022 14:37:33 +0100 Subject: Breadcrumb docs: drop confusing currentColor and add new callout (#35434) --- site/content/docs/5.1/components/breadcrumb.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'site/content/docs') diff --git a/site/content/docs/5.1/components/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md index 9143e76127..7086a1ee52 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 >}} -