How to reuse svg?

Question

HTML

I have a lot of svg icons, they should change color on hover, there are also icons that behave differently from changing color. For these purposes, the way to package all the icons in a font is great for me.
But in glup-svg-font (I don’t remember the exact name, I’m sorry, because I’m not going to leave this for now) it says that it’s better not to do this, and now the question arose, what should I do?
PS: I found this answer on toster, do you think there is a better one?
html:

<svg class="priority__svg" width="40" height="40">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#ok"></use>
</svg>
<svg class="priority__svg" width="40" height="40">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#smile"></use>
</svg>

icon file icons-individual-tours.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" fill="#000">
    <symbol viewBox="0 0 40 40" id="ok">
        <path d="M34.141 18.906h-5.222a28.538 28.538 0 0 0 1.283-5.4c.452-3.004-1.616-5.805-4.62-6.258a5.437 5.437 0 0 0-.816-.061c-.647 0-1.172.525-1.172 1.172 0 2.831-1.627 7.105-3.526 8.057a51.1687 51.1687 0 0 1-7.179 2.49H1.172c-.647 0-1.172.525-1.172 1.172v16.406c0 .647.525 1.172 1.172 1.172h3.515v1.172c0 .647.525 1.172 1.172 1.172H10.7c1.39-.002 2.648-.82 3.213-2.09l8.222 2.055c.093.023.188.035.284.035h7.031c1.942 0 3.516-1.574 3.516-3.516 0-.443-.084-.883-.247-1.295 1.528-.419 2.589-1.807 2.591-3.392a3.489 3.489 0 0 0-.248-1.3c4.344-2.591 1.688-3.966 2.594-8.075.418-1.895-1.574-3.514-3.515-3.516zM4.687 35.312H2.344V21.25h2.343v14.062zm7.188 1.172c-.001.647-.525 1.171-1.172 1.172H7.031V21.25h4.844v15.234zm22.334-8.203a.771.771 0 0 1-.068 0h-7.032c-.647.001-1.171.527-1.169 1.175.001.645.524 1.168 1.169 1.169H31.8c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-4.688c-.647.019-1.156.558-1.138 1.205.018.621.517 1.12 1.138 1.138h2.344c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-6.887l-8.347-2.087v-14.6a48.0595 48.0595 0 0 0 6.9-2.456c2.692-1.349 4.34-5.617 4.73-8.788 1.409.517 2.26 1.954 2.036 3.438a18.9356 18.9356 0 0 1-1.823 6.393c-.292.578-.06 1.283.518 1.574.164.083.346.126.53.126h7.032c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-7.032c-.646.045-1.132.606-1.087 1.251.041.581.502 1.044 1.083 1.087h7.032c.647-.019 1.187.491 1.205 1.138.019.647-.49 1.186-1.137 1.205zM25.903 4.878c.647.019 1.187-.49 1.206-1.137a.771.771 0 0 0 0-.068v-2.5c0-.647-.524-1.171-1.171-1.172-.647 0-1.172.525-1.172 1.172v2.5c-.019.646.49 1.186 1.137 1.205zm-9.909 1.054l1.657 1.658c.458.458 1.2.457 1.658 0 .458-.458.457-1.2-.001-1.658l-1.657-1.657c-.447-.468-1.189-.486-1.657-.039s-.486 1.189-.039 1.657c.012.013.026.026.039.039zm2.075 7.832c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h2.5c.647.02 1.187-.49 1.205-1.137zm21.19 0c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h2.5c.646.02 1.186-.49 1.205-1.137zM34.39 7.57l1.658-1.657c.458-.458.457-1.2 0-1.658-.458-.458-1.2-.457-1.658.001l-1.657 1.657c-.468.447-.486 1.189-.039 1.657s1.189.486 1.657.039c.013-.013.027-.026.039-.039z"/>
    </symbol>
    <symbol viewBox="0 0 40 40" id="smile">
        <path d="M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20C39.987 8.96 31.04.013 20 0zm0 38.008c-9.946 0-18.008-8.062-18.008-18.008S10.054 1.992 20 1.992 38.008 10.054 38.008 20C37.996 29.941 29.941 37.996 20 38.008zm-3.867-20.365A4.9338 4.9338 0 0 0 12 15a5.37 5.37 0 0 0-4.405 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.4645 3.4645 0 0 1 12 17c1.153-.14 2.284.395 2.906 1.376.213.332.656.429.988.215a.7143.7143 0 0 0 .239-.948zm16.272 0A5.37 5.37 0 0 0 28 15a4.9338 4.9338 0 0 0-4.133 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.0108 3.0108 0 0 1 28 17c1.229-.142 2.44.383 3.178 1.376.213.332.656.429.988.216a.7158.7158 0 0 0 .239-.949zm-1.7 6.153a.6874.6874 0 0 0-1.011 0c-1.185 1.526-6.317 3.213-9.695 3.2-3.359-.008-8.345-1.941-9.7-3.2-.29-.25-.72-.25-1.01 0-.279.277-.28.728-.003 1.007l.003.003c6.042 5.591 15.37 5.591 21.412 0 .277-.277.279-.726.005-1.006l-.001-.004zm-6.785 6.859a.715.715 0 0 0-.878-.501c-.001 0-.002 0-.003.001-1.988.558-4.092.558-6.08 0-.38-.107-.775.115-.882.495-.107.38.115.775.495.882C17.7 31.85 18.847 33 20 33s2.305-1.15 3.426-1.464c.38-.106.602-.5.495-.88v-.001h-.001z"/>
    </symbol>
</svg>

Answer 1

There is no need to use svg links.
There are cases when it is worth using fonts for icons, there are cases when svg sprites.
If the icons are monochrome, their color should change, let's say on hover, you want to control their size - the simplest of course is the font. And the most reliable.
If the icons are multi-colored - then svg, but there are many secondary problems in terms of flexibility.
Regarding the placement of svg icons in the layout - use styles.
Like
.svg-icon {
display: inline-block;
width;
height;
background-image: url(svg-icons-spite)
}
.svg-icon.home {
background-position:..
}
First of all, when choosing a tool to solve your problem, you should find out how suitable it is and how many problems it will be when using it in a project, how much labor it will cost to maintain and reuse it.