-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
More efficient way to use icons as <svg> that can be color changed with CSS easily? #1297
Comments
What's really sad is that all you need really is to have a fill="currentColor" on the path and everything works just fine most of the time. For my part, I created a web component that loads the svg (and therefore is cached later on) and injects the fill="currentColor" attribute which is a sane default. Then, since the svg is injected into the dom, you are free to use css to style it differently if needed. I don't think there is a way around using a little bit of javascript for this. On the good side of things, it makes the html much much cleaner. |
What you mean. What method? Most of the time? |
@nextgenthemes most of the time = if you need the icon to be same color as your text. this way, even external svg is colored properly. otherwise indeed you need to inject the svg code so that you can apply custom css to change the color. |
We include the easiest ways to use our icons by default, but yes, at this scale with the number of icons we have, your best bet is going to be customizing the sprite for your own needs or leveraging the CDN. I do a custom sprite in the Bootstrap docs—just manual copy-pasta for now. Might be helpful I think to be able to pass a custom list of icons to the build scripts to generate a sprite just for you. Would love suggestions or PRs for that. Could also include an option to copy the SVG as a symbol instead of an SVG on each page. |
Is there a way we can extract icons used in html/js during build time (webpack/...), to build a custom SVG sprite AND font file? Having a best practice for this will make sure continue growing the icons library won't negatively affect page performance for projects using bootstrap icons. While still letting them take advantage of benefits SVG sprite and font file has (styling via css, size auto inherited when used as font, not having to embed source SVG that might improve across releases) Per 1.10.2: font is now at 128kb (css 10kb with brotli + 118kb woff2), and SVG sprite is 164kb with brotli, both growing steadily per new release (as it should). |
This easy to do from npm. I checked out the bootstrap icons repo and looked at how they generate their bootstrap-icons.svg file. Copy the svg-sprite.json from the repo, install the svg-sprite, and then this command lets you create you own bootstrap-icons-custom.svg file that has only the objects you explicitly selected. The full npm run command is:
Here it takes two svg files and packages them into the bootstrap-icons-custom.svg file and puts it in the --dest folder of your choice. If you want more svg files, just add more files explicitly. The usage is identical to what the website recommends: And voila, you have only the svg files you want, but you're also able to use fill="currentColor" magic that lets you change colors with CSS. |
I am no SVG expert, but it seems to me that.
<img>
method does not allow recoloring of the image with CSScolor
.<svg><use>
method downloads a massive SVG sprite. With 100s of icons that nobody will ever use in one project. Incredibly inefficient. You can not even use a CDN for it because of cross-origin not working in chrome (still?).<svg><image>
method does not support coloring with CSScolor
I think. But that is basically what I would like.So if I would like to use the
<svg><use>
method for easy referencing the icons and properly coding them with<svg>
I could of course create my own sprite, but it seems too much of a hassle and the required icons may change later.So my question is, would it not be a great method to basically create a "sprite" that contains just a single
<symbol>
for every icon, so we can use the<use>
method for just the icons we need? With HTTP/2+ HTTP requests do not matter anymore. The browser would download and cache only the icons we need, and we also benefit from the easy recoloring with CSS and having relatively short code to deal with that of course also can be just put into reusable functions where you just pass icon id and some other things.Insane 2020 method of coloring SVG with filters. https://stackoverflow.com/a/53336754 I hate it.
Some weird way to color SVGs, seems hacky and stupid to me https://medium.com/@no.steiner/change-svg-icons-color-with-css-only-ba6a4912e6ba (not really looked at it long, may be the same as the above)
The text was updated successfully, but these errors were encountered: