I'm developing an Angular app and I'm trying to figure out the best way to deal with SVGs:
Use them as background-image, src attribute of img tag etc. - I lose the ability to style the SVGs with CSS. On the other hand it's pretty easy to use and I don't have to copy/paste the content
Use 3rd party app that makes the request for us and puts the SVG inside the container that had the directive - e.g. https://www.npmjs.com/package/ng-inline-svg - it makes the HTTP request that I'd like to avoid. I can, however, style the image with CSS
Put the SVG directly inside the component template - no additional requests are made and I have full control over the styling. This reduces the code reusability though.
The reason I'd like to avoid the HTTP requests altogether is because we have multiple themes (same SVGs but different colors) and I want to load at most one resource per "image".
Are there any good practices I could use? Any open source code that I could look at?
Is the 3rd option even any good? Maybe I could write an Angular service and group the inline SVGs somehow, but I don't have any idea for now.
Kind regards, Marcin