¿Cómo importo svg desde un archivo a un componente en angular 5?

Este equipo redactor ha pasado mucho tiempo investigando la respuesta a tus preguntas, te dejamos la resolución de modo que esperamos serte de mucha ayuda.

Solución:

Incluya sus archivos SVG en la carpeta src/assets y agregue la carpeta svg en su angular.json expediente.

"assets": [ "src/assets/svg/*" ]

De esta manera puede incluir el archivo en sus componentes como desee.

Si usted tiene logo.svg:

1. Ponlo dentro de tu src/assets carpeta
2. Incluir carpeta en el angular.json configuración: "assets": [ "src/assets" ]
3. Consúltelo desde la plantilla:

una forma de hacer esto es establecer la propiedad id para su archivo svg y poner sus archivos svg en su carpeta de activos. luego use esa identificación en mat-icon como este:

esta es una mejor manera de hacerlo; de esta manera, no tiene que lidiar con etiquetas svg en su código html de interfaz de usuario. también esto es compatible con los iconos de Google.

aunque esto funciona si está utilizando material angular.

Editar:
Debe registrar el ícono con IconRegistry en su componente para que esto funcione:

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) 
    iconRegistry.addSvgIcon(
        'my-star-icon',
        sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg'));
  

Consulte los documentos aquí y un ejemplo aquí.

valoraciones y reseñas

Ten en cuenta compartir este post si te ayudó.

---

---

Utiliza Nuestro Buscador