diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md index 932244fd51..cc888126b6 100644 --- a/site/content/docs/5.3/extend/icons.md +++ b/site/content/docs/5.3/extend/icons.md @@ -46,35 +46,51 @@ Embed your icons within the HTML of your page (as opposed to an external image f You may use an external SVG sprite—a single SVG file containing all your icons—and insert an icon through the `` element. -SVG sprites allow you to reference an external file similar to an `` element, but with the power of `currentColor` for easy theming: see in this example how icons inherit their color from the parent's `.text-primary` class, whereas the second icon get grayed out by `.text-body-secondary`. +SVG sprites allow you to reference an external file similar to an `` element, but with the power of `currentColor` for easy theming: see in this example how icons inherit their color from the parent's `.text-primary` class, whereas the other icons get their color from [text Orange's colors utilities]({{< docsref "/utilities/colors#oranges-colors" >}}).
- -{{< example class="mt-0 text-primary" >}} - - - - - - + {{< example >}} +

+ + + + +

+

+ + + + + +

{{< /example >}}
To create your own SVG sprite file, containing only the icons you need: - download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81) -- optimize them with [svgo](https://github.com/svg/svgo) +- optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes - include the path in a tag ``, inside a SVG file, like below -- you may add the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed +- you may add the attribute `fill-rule="evenodd"`, but only if needed ```html @@ -87,8 +103,6 @@ To create your own SVG sprite file, containing only the icons you need: ``` - -