SVG Symbols for Uploads

[GeorgeHulpoi]

Hello!

I'm trying to insert symbols from SVG files into the Payload. Basically, when I upload a file, it should parse my file with the symbols in it.

An example file:

<svg aria-hidden="true" style="visibility:hidden;width:0;height:0;" version="1.1" xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon-facebook-f" viewBox="0 0 17 32">
			<path
				d="M4.794 32v-14.313h-4.794v-5.688h4.794v-4.481c0-4.869 2.975-7.519 7.319-7.519 2.081 0 3.869 0.156 4.387 0.225v5.088h-3.012c-2.363 0-2.819 1.125-2.819 2.769v3.919h5.331l-0.731 5.688h-4.6v14.313z">
			</path>
		</symbol>
	</defs>
</svg>

Then you can choose through the Upload Field the SVG file and the symbol.

The problem is that Payload is trying to extract data from this file, more exactly here. Using the given file will throw an error.

For me, it's clear that I need a way to customize the uploading, and I think that it's a good idea to be able to set custom handlers/operations.

I want to create a plugin for using SVG Symbols, which can bring a real advantage to creating websites with reactive themes. The SVG Symbols is the only way to import an SVG and use external CSS variables.