у меня высота и ширина тега svg почему то 150h * 300w но иконка 19*19
Так происходит, когда не задан viewBox
и размеры SVG браузер не знает и выводит по умолчанию для SVG:
ширина 300px, высота 150px.
Проверьте свою вёрстку, здесь в иконке указан viewBox
, в вашем приложении видимо не указан.
Ниже пример, где у вашей иконки есть viewBox= 0 0 19 19
Она обернута div, у которого width="19px" height="19px"
В этом случае иконка будет иметь те же размеры, что и родительский блок.
Вы можете использовать её многократно, при этом перекрашивать, масштабировать, позиционировать иконку.
Обратите внимание на правило CSS
path {
fill:inherit;
}
Это сделано, чтобы была возможность стилизации, после использования тега <use>
<style>
.wrapper {
width:19px;
height:19px;
}
path {
fill:inherit;
}
</style>
<div>
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 19 19">
<symbol id="search">
<path fill="black" d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" />
</symbol>
</svg>
</div>
<!-- 1-ая иконка -->
<div class="wrapper">
<svg>
<use href="#search" />
</svg>
</div>
<!-- 2-ая иконка -->
<div class="wrapper">
<svg>
<use href="#search" fill="red" x="20"/>
</svg>
</div>
<!-- 3-ая иконка -->
<div class="wrapper">
<svg>
<use href="#search" fill="green" x="40" transform="scale(1.5)" />
</svg>
</div>
</div>
Update
Как комментирует @Armen
вроде работает но создает другие проблемы wrapper не считается с
размерами svg... как итог svg наежает на другой блок
Добавьте viewBox
в <svg>.. </svg>
, которые вторично вызывают иконки
<div class="wrapper">
<svg viewBox="0 0 19 19">
<use href="#search" />
</svg>
</div>
<style>
.container {
}
.wrapper {
width:19px;
height:19px;
}
path {
fill:inherit;
}
</style>
<div>
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 19 19">
<symbol id="search">
<path fill="black" d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" />
</symbol>
</svg>
</div>
<!-- 1-ая иконка -->
<div class="wrapper">
<svg viewBox="0 0 19 19">
<use href="#search" />
</svg>
</div>
<!-- 2-ая иконка -->
<div class="wrapper">
<svg viewBox="0 0 19 19">
<use href="#search" fill="red" />
</svg>
</div>
<!-- 3-ая иконка -->
<div class="wrapper">
<svg viewBox="0 0 19 19">
<use href="#search" fill="green"/>
</svg>
</div>
</div>