Work svg, links and css effects [hover, fill]?

Question

css

Hello!
The designer gave me icons in svg format. Each icon is each individual file. Conventionally, for layout tasks, I need to make a hover effect when hovering over the icon (it’s trite, the color changes smoothly).
I got acquainted with the principles of svg icons and realized (or maybe not) that css manipulations are done if icons are inserted through an object or inline.
But then I ran into another problem: my icon is a link, i.e. I do this:
<a href="#">а тут код иконки</a>
As a result, I do not have a cursor on the icons, and, as a result, there is no hover or transition.
I made an icon through the background, the cursor and the link appeared, but the hover is not readable.
What to do in this situation? Thank you!

Answer 1

.icon:hover {
  color: orange;
}
svg {
  fill: currentColor;
}

Demo: https://jsfiddle.net/2h9mym0k/