I have worked with SVG before, but not with SVG icons. However, based on the knowledge that I have and what I am looking at, this is what I came up with (I might not fully understand your question in this case, please write more questions).
But how to transfer the SVG to a CSS file so that they can be reused on the same page
but that means I have to put SVG in HTML
SVG is basically XML, so it’s not entirely clear why you would rather not put SVG in an HTML file. If you put the SVG in an HTML file, you can simply use external or internal CSS for the SVG style. Here is an example to just do it.
In the HTML file:
<circle cx="100" cy="100" r="75" />
In the CSS file: (Add the CSS file to the HTML file)
<style> circle { fill: deepPink; transition: fill .3s ease-out; } circle:hover { fill: #009966; } </style>
Here is the second option for many others, use the <img/> . Here is an article explaining how to use SVG from a separate file using the <img/> . And here is the code that accompanies it. Also note that it uses the jQuery svginject plugin .
Here are a few other options to save SVG from HTML and their merits.
Hope this helps.