How to color icons from ++plone++bootstrap-icons?

Plone Support Theming
1

I cannot set the color of an bootstrap svg-icon.

I've tried color as attribute on img, as style definiton. But it doesn't seem to work

<img 
    src="http://localhost:8081/Plone/++plone++bootstrap-icons/volume-up-fill.svg" 
    />

Or should I copy the svg version in my template?

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="16" 
    height="16" 
    fill="currentColor" 
    class="bi bi-volume-up-fill" 
    viewBox="0 0 16 16"
    >
  <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
  <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
  <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
</svg>
2

It is possible to set svgs with CSS. I have done it in Plone once (I might have the css if you are stuck, I could not find it 'today').

I think you need to include SVG, maybe try

.someclass svg {color: red !important; }

or .someclass svg path { color … }

3

Plone 6, in your Template use the Iconresolver:

<tal:block tal:define="icons python:context.restrictedTraverse('@@iconresolver');">
<img tal:replace="structure python:icons.tag('volume-up-fill', tag_class='my-css-class')" />
</tal:block>

Your Style Class:

.my-css-class{
  color:red;
}

Because fill="currentColor" fill the SVG with the defined Color of Text.

1 Like
4

That's a nice idea. It looks like it injects the svg into the dom. Great!
Thank you very much!

5

I think I remember now:
fill is a CSS property, so use that instead ( fill: red !important; }

6

SVG-files loaded with <img src="some.svg" /> are treated as images. Therefore their attributes are not sensitive to the css definitions.

The iconresolver is a view (Products-CMFPlone.browser.icons.IconsView) which parses the SVG-file, modifies the passed attributes cssclass and title and returns the "svgtree" as <svg> element which is sensitive to css definitions (see IconsView.tag()).

The keyword currentColor in the fill attribute can only inherit the color when in DOM-tree. This is not the case when it is displayed as image via <img src="some.svg" />. Therefore it is necessary to use a solution like the iconresolver.

An alternative to iconresolver is SVGInject.