Я борюсь с созданием компонента unviersal svg icon, который будет отвечать за загрузку файлов svg как изображений. Я пробовал разные способы, но ни один из них не работал должным образом:
используйте svg внутри img
<img src="assets/i/home.svg" />
SVG-файл загружается как изображение, но проблема в том, что я не могу изменить его цвет заливки, что необходимо.
После учебник , где сделан компонент svg-icon, я определяю все иконки svg в определениях и добавляю их в app.component, я могу манипулировать цветом после внесения некоторых изменений в оригинальный код, проблема в том, что он всегда добавляет дополнительный интервал для svgs, что нежелательно.
Пробовал использовать стороннюю библиотеку , но я не мог найти способ заставить ее работать всегда, в результате возникали ошибки в консоли
Мне нужен именно компонент <svg-icon>, который будет выводить svg из файла, все файлы находятся в каталоге /assets/i, компонент должен иметь возможность изменять цвет и ширину значка с помощью входных данных компонентов, например, <svg-icon name="home" color="red" width="50px">, также Я ожидаю, что размеры компонентов будут равны размерам значков.
пример значка svg - "coding.svg":
<svg viewBox="1 0 511.99962 511" xmlns="http://www.w3.org/2000/svg"><path d="m309.773438 7.359375-34.4375-6.070313c-27.96875-4.9375-54.738282 13.808594-59.671876 41.78125-.914062 5.191407-57.640624 326.902344-58.421874 331.34375-.40625 2.289063-.238282 4.816407.324218 6.855469l33.113282 119.800781c3.472656 12.558594 20.066406 15.617188 27.710937 4.882813l72.035156-101.175781c1.316407-1.820313 2.304688-4.136719 2.707031-6.40625l58.421876-331.339844c4.945312-28.035156-13.742188-54.730469-41.78125-59.671875zm-119.140626 357.121094c1.226563-6.960938 42.109376-238.824219 44.378907-251.679688l21.914062 3.863281-44.378906 251.679688zm21.359376 96.734375-17.820313-64.46875c20.257813 3.570312 36.363281 6.410156 56.617187 9.980468zm53.15625-83.59375-21.914063-3.867188 44.378906-251.675781 21.914063 3.863281c-2.148438 12.195313-42.382813 240.382813-44.378906 251.679688zm55.71875-316-5.929688 33.632812c-11.59375-2.042968-62.738281-11.0625-74.515625-13.140625l5.929687-33.632812c1.949219-11.050781 12.523438-18.453125 23.574219-16.507813l34.4375 6.074219c11.074219 1.953125 18.460938 12.496094 16.503907 23.574219zm0 0"/><path d="m506.96875 235.894531-48.539062-91.558593c-11.699219-22.074219-39.117188-29.152344-59.78125-17.214844-19.199219 11.09375-27.910157 36.199218-16.53125 57.667968l37.808593 71.332032-37.808593 71.332031c-12.054688 22.742187-2.714844 43.839844 13.546874 55.125 19.226563 13.335937 48.125 12.953125 62.769532-14.671875l48.535156-91.558594c6.707031-12.652344 6.710938-27.773437 0-40.453125zm-27.4375 25.914063-48.53125 91.554687c-3.425781 6.457031-11.59375 8.257813-17.265625 4.582031-4.863281-3.15625-7.40625-9.859374-4.183594-15.945312l41.664063-78.605469c2.410156-4.546875 2.410156-9.996093 0-14.542969l-41.664063-78.601562c-3.082031-5.816406-.90625-12.21875 3.601563-15.542969 5.652344-4.171875 14.28125-2.542969 17.84375 4.175781l48.53125 91.546876c1.890625 3.566406 1.890625 7.824218.003906 11.378906zm0 0"/><path d="m113.351562 127.125c-20.664062-11.941406-48.082031-4.859375-59.785156 17.210938l-48.535156 91.558593c-6.710938 12.679688-6.707031 27.800781 0 40.457031l48.535156 91.558594c11.800782 22.257813 38.445313 28.457032 58.328125 18.027344 20.074219-10.523438 29.710938-36.371094 17.988281-58.480469l-37.808593-71.332031 37.808593-71.332031c11.378907-21.472657 2.667969-46.578125-16.53125-57.667969zm-10.90625 43.121094-41.660156 78.605468c-2.410156 4.546876-2.410156 9.996094 0 14.542969l41.660156 78.605469c3.226563 6.082031.683594 12.789062-4.179687 15.945312-5.671875 3.675782-13.84375 1.875-17.265625-4.582031l-48.535156-91.554687c-1.882813-3.558594-1.882813-7.8125.007812-11.382813l48.53125-91.546875c3.558594-6.714844 12.191406-8.34375 17.84375-4.175781 4.503906 3.328125 6.683594 9.730469 3.597656 15.542969zm0 0"/></svg>