CODEWITHSUNDEEP
javascripthtmlcssangularsvg
Iangyl
Iangyl

Reputation: 77

Unexpected 2-4px Height Increase in SVG After Extracting to Angular Component

After extracting it to a separate Angular component, I'm encountering an issue where an SVG's height increases by several pixels. The SVG displays correctly when inline, but the height grows unexpectedly in the component.
pause.component.html

<svg xmlns="http://www.w3.org/2000/svg" [attr.width]='width' [attr.height]="height" viewBox="0 0 100 100"
  xml:space="preserve">
  <path
    d="M34.124 33.604a23.1 23.1 0 0 1 16.396-6.791 23.12 23.12 0 0 1 16.396 6.791 23.1 23.1 0 0 1 6.791 16.392 23.12 23.12 0 0 1-6.791 16.4c-9.055 9.055-23.737 9.055-32.792 0s-9.055-23.737 0-32.792M45.747 40v20m9.547-20v20"
    fill="none" [attr.stroke]="strokeColor" [attr.stroke-width]="strokeWidth" stroke-linecap="round"
    stroke-linejoin="round" stroke-miterlimit="10" />
</svg>

pause.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'pause-icon',
  imports: [],
  templateUrl: './pause.component.html',
})
export default class PauseIcon {
  @Input() width?: number = 800;
  @Input() height?: number = 800;
  @Input() strokeColor?: string = '#fff';
  @Input() strokeWidth?: number = 4;
}

Inside other component: 
<button type='button' class='play-pause'>
  <pause-icon [width]="24" [height]="24" />
</button>

Below I attached two pictures: the first is an SVG size, and the second is a pause component size. SVG size pause component size

Upvotes: -1

Views: 34

Answers (0)

Related Questions