diff options
| author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2022-02-01 16:37:33 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-02-01 16:37:33 +0300 |
| commit | a5483a8a96eaa88b4da7e432e0b925d0f3943dc3 (patch) | |
| tree | 8e6589de2e6b9366b4b709ce81486b9859268e4e | |
| parent | dc0950919308570948f6383f4dcc331fd275ba80 (diff) | |
Breadcrumb docs: drop confusing currentColor and add new callout (#35434)
| -rw-r--r-- | site/content/docs/5.1/components/breadcrumb.md | 11 |
1 files 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..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 >}} -<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb"> +<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> @@ -64,7 +71,7 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom {{< /example >}} ```scss -$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E"); +$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>"); ``` You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`. |