Как мне импортировать SVG из файла в компонент в angular 5?
Все руководства с добавлением svg в компонент в AngularCli, которые я нашел, рекомендуют вставлять его в шаблон html, примерно так:
<div>
<svg viewBox = "0 0 250 250">
<svg:g class = "group">
<svg:polygon class = "shield" points = "125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
<svg:path class = "a" d = "M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg:g>
</svg>
</div>
Но я хочу, чтобы шаблоны были ясными и вставляли в них только несколько тегов с URL-адресом для отдельного файла svg, например, вот так:
<svg class = "star">
<use xlink:href = "../../../assets/images/svg/star.svg"
x = "0"
y = "0" />
</svg>
Как я могу использовать отдельные файлы svg в компонентах?
Ответы 5
Включите свои файлы SVG в папку src / assets и добавьте папку svg в свой файл angular.json.
"assets": [ "src/assets/svg/*" ]
Таким образом, вы можете включать файл в свои компоненты по своему усмотрению.
один из способов сделать это - установить свойство id для вашего svg-файла и поместить ваши svg-файлы в папку с ресурсами. затем используйте этот идентификатор в значке коврика следующим образом:
<mat-icon svgIcon = "my-star-icon"></mat-icon>
это лучший способ сделать это; таким образом вам не нужно иметь дело с тегами svg в html-коде пользовательского интерфейса. также это поддерживает значки Google.
хотя это работает, если вы используете угловатый материал.
Редактировать: Вам необходимо зарегистрировать значок в IconRegistry в вашем компоненте, чтобы это работало:
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'my-star-icon',
sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg'));
}
Проверьте документы здесь и пример здесь.
Это требует дополнительной настройки с помощью Angular Material. Можете ли вы обновить свой ответ с их помощью. Если нет, я могу отредактировать ваш ответ.
@OjasDeshpande вы можете отредактировать мой ответ. Я не работал с более новой версией. спасибо, что указали на это.
Если у вас logo.svg:
- Поместите его в папку
src/assets - Включить папку в конфиг
angular.json:"assets": [ "src/assets" ] - Обратитесь к нему из шаблона:
<img src = "assets/svg/logo.svg">
Итак, я пытался сделать это, и, хоть убей, мне не удавалось показать этот SVG до ... После многих поисков в Интернете, и я не думаю, что это только я, и если вы скопируете путь макаронных изделий из Интернет тогда, возможно, вы забыли включить это
xmlns = "http://www.w3.org/2000/svg"
<svg xmlns = "http://www.w3.org/2000/svg" height = "100" width = "100">
<path d = "I love copying and pasting paths"/>
</svg>
Тогда вы можете пойти дальше и сделать свое
<img src = "assets/img/logo.svg" />
и если это не работает, и вы хотите работать с изображениями вместо этого, поместите свои изображения в
активы / img / copypasta.png
RR_0_RВведите здесь код `` Здесь я попробовал такой способ, чтобы изменить '', сначала создал файл .ts как iconpack и экспортирует его.
`export const ICON_PACK_6 = {
'VNF-pkg': '<svg fill = "#222b45b8" id = "Layer_5" enable-background = "new 0 0 64 64" height = "24" viewBox = "0 0 64 64" width = "24" xmlns = "http://www.w3.org/2000/svg"><g><path d = "m42.929 49h14.142v2h-14.142z" transform = "matrix(.142 -.99 .99 .142 -6.577 92.415)"/><path d = "m52.293 47.707 2.293 2.293-2.293 2.293 1.414 1.414 3.707-3.707-3.707-3.707z"/><path d = "m46.293 46.293-3.707 3.707 3.707 3.707 1.414-1.414-2.293-2.293 2.293-2.293z"/><path d = "m60.884/><path d = "m41 17h14v2h-14z"/></g></svg>',
}; `
после этого вызовите функцию в компоненте приложения внутри конструктора, как показано ниже
this.iconLibraries.registerSvgPack('pack-6', ICON_PACK_6);
когда дошел до небулярного меню добавить
{title: "VNF Onboarding",link: "/package-management/view", icon: { icon: 'VNF-pkg', pack: 'pack-6' }, },]
Спасибо! Лучше добавить папку svg "assets": ["src / assets / svg / *"], чем каждый файл svg.