Как можно использовать локальный файл svg в файле html с его стилем. Я попытался использовать svg и использовать тег, но у него есть проблема
<svg class="search__icon">
<use xlink:href="img/SVG/test/Icons HR.svg#Layer_1"></use>
</svg>
, а также содержимое моего файла svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.94 51" style="enable-background:new 0 0 52.94 51;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st1{display:none;}
.st2{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st4{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st5" d="M22.53,13.21c0.17-0.69,0.26-1.41,0.26-2.15c0-5-4.05-9.06-9.06-9.06s-9.06,4.05-9.06,9.06
c0,2.97,1.44,5.6,3.65,7.25C4.57,20.27,2,24.19,2,28.72v10.09h12.74"/>
<path class="st5" d="M38.21,38.81h12.74V28.72c0-4.53-2.57-8.45-6.33-10.41c2.21-1.65,3.65-4.28,3.65-7.25c0-5-4.05-9.06-9.06-9.06
s-9.06,4.05-9.06,9.06c0,0.96,0.15,1.89,0.43,2.76"/>
<path class="st5" d="M31.88,28.5c2.21-1.65,3.65-4.28,3.65-7.25c0-5-4.05-9.06-9.06-9.06s-9.06,4.05-9.06,9.06
c0,2.97,1.44,5.6,3.65,7.25c-3.76,1.96-6.33,5.88-6.33,10.41V49h23.47V38.91C38.21,34.38,35.64,30.46,31.88,28.5z"/>
</g>
</svg>