Consider a third approach:

1. Keep the SVG images in one place. Those images won't change from project to project.

2. Apply color changes to SVG images within a specific site through CSS.

This way, you don't need any “complex logic to modify SVG properties” and you don't couple images with projects.

For web applications, consider a third approach:

1. Keep the SVG images in one place. Those images won't change from project to project.

2. Apply color changes to SVG images within a specific site through CSS.

This way, you don't need any “complex logic to modify SVG properties” and you don't couple images with projects.

For native applications, the component which displays the SVG images may provide a way to change the elements. If this is the case, use it to change the colors on the fly, based on their CSS classes.

If the component doesn't let you change a displayed element, you may consider modifying the SVG code itself on the fly before passing it to the component which would display the image. The idea is the same: go through the XML, find the classes, tamper with the XML itself to set the colors. Not the most elegant approach, but it works.