Using the CSS filter declaration to invert colors of svg icons loaded via an img element.

[fantasyui-com]

Using Bootstrap icons in img element on a black background is problematic, because all the SVG strokes are black, there is a really quick fix, that's kind of hard not to use: Using the filter CSS declaration to invert it.

Having icons with context/theme colors would make a huge css, so in many cases icons just need to be black or white, this tiny trick does the job. I wouldn't consider it a feature for bootstrap.css but it could be worth mentioning in icon docs.

<img src="/icons/tag.svg" alt="" width="16" height="16" style="filter: invert(1);">

Before

After

I hope I am posting in the right place (my first bootstrap post),
Thank You.

[mdo]

If you have feedback on the Bootstrap Icons, use that repo and not this one for any and all feedback, requests, bugs, etc.

https://github.com/twbs/icons

[patrickhlauke]

as an aside, i'd say that including SVGs with <img> loses quite a bit of the advantages of the SVGs, such as the easy stylability / how they adapt to currentColor, etc (as the <img> creates a completely detached new content that is not aware of what the current color of the bit where is was included in is)

[fantasyui-com]

You are correct, Patrick. Also this is not just the twbs/icons issue it is all icons. But since my starting point for even mentioning this, was their Icon Docs (as they mention External image use (img)) I will go there with icon issues. I didn't know they had separate docs.

I wish we had a Cookbook like http://pleac.sourceforge.net/pleac_perl/index.html where non-bootstrap ideas like currentColor and filter: invert(1), and making templates (ex: https://getbootstrap.com/docs/4.4/examples/), making colour themes (ex: https://iterm2colorschemes.com/) could go, into just plain github flavored markdown. Your idea is better, but for someone that just needs 10 white icons to finish a template project to buy food, the invert approach is ok because it doesn't require embedding svg or even recompiling sass css. I wanted to open a thread about a Cookbook, but it is not something I can help with, and you guys already have docs to worry about. Thank you for mentioning currentColor.

[MartijnCuppens]

Embedded svgs are the best option indeed.

[fantasyui-com]

The text template under "New Issue" button here on twbs/bootstrap mentioned I should open a discussion if it is not a bug or feature, so I did follow that. But that boilerplate text needs to be updated to say that icons have their own repo with their own docs, sorry mdo.

I've been learning bootstrap for years, but I am not part of the community and I don't know where to talk. I will take more care before posting something, and try slack first.

Bootstrap made me a better programmer, Thank You, all.