2

I have a library of svg icons in json format, there are keys for the icon name and the path for rendering the icon, these icons are all different dimensions. i have an icon component that consumes the json and makes an svg by inserting the path associated with it.

Here is a stackblitz example: https://angular-qhpqpu.stackblitz.io

The problem im facing is that the viewbox doesnt have the correct ratio for icons that are wider than they are tall. If the icon has a height thats greater than the width, it works perfectly.

When another component consumes the icon component, it never aligns properly on the wide icons because the svg viewbox is not correct.

How can i make the viewbox exactly proportionate to the path inside of it?

grahamama
  • 23
  • 4

1 Answers1

2

In order to make the viewbox exactly proportionate to the path you need to make sure you didn't forget about a minimum x value and a minimum y value returning from SVGGraphicsElement.getBBox() method:

 const { x, y, width, height } = this.iconPath.nativeElement.getBBox();
 this.viewBoxValue = `${x} ${y} ${width} ${height}`;

Forked Stackblitz

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Thank you! I've noticed that the "app-icon" wrapper adds 3px to the height and cannot seem to figure out why this is. It throws off the alignment everywhere i use the icon – grahamama Apr 23 '19 at 13:23
  • Try adding `display: block` or `vertical-align: middle` to svg that is inside app-icon https://stackoverflow.com/questions/10844205/html-5-strange-img-always-adds-3px-margin-at-bottom See also update example https://stackblitz.com/edit/angular-dya9s4?file=src/app/icon/icon.component.scss – yurzui Apr 23 '19 at 13:53