mobile first (CSS-Grid, Flexbox + SCSS)

So... Since there were a few svg-icons on this site which change colors depending on e.g. hover state I'd like to know what the best practice would be to do that.

I created several versions e.g. of the logo "colorful logo + white text" and "white text + white logo" to exchange them when needed using classes with different background urls.

Would it be better to copy + paste the whole content of the svg into the actual html and use css to change the fill color? Even though it means having the same code in the html-file several times?