Recently undertook a similar effort on my blog[0], but I took a different route. Instead of using currentColor, I embedded an image-specific `<style>` declaration directly in the SVG file.
Upsides: the SVG is more portable, it's more self-contained, and I can be sure that, irrespective of how much I customize a given image for dark/light mode, those styles will always be declared in the same place -- right in the file.
Downsides: style declarations are repeated across SVG files, which, when I inevitably update the site's design, will mean that I'll have to do some manual editing. SVG debt.
> Downsides: style declarations are repeated across SVG files, which, when I inevitably update the site's design, will mean that I'll have to do some manual editing. SVG debt.
Seems like this should be possible to roll into a compile step, defining the style in one place and letting the SSG/bundler/etc copy it into your SVGs.
Upsides: the SVG is more portable, it's more self-contained, and I can be sure that, irrespective of how much I customize a given image for dark/light mode, those styles will always be declared in the same place -- right in the file.
Downsides: style declarations are repeated across SVG files, which, when I inevitably update the site's design, will mean that I'll have to do some manual editing. SVG debt.
0: Example here: https://ft.io/blog/shift-left/