ngneat / svg-icon

👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
https://netbasal.com
MIT License
257 stars 35 forks source link

style="color: var(--svg-icon-color)" added even if color == undefined #130

Closed dmattsson closed 1 year ago

dmattsson commented 1 year ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

<svg-icon> adds style="color: var(--svg-icon-color)" to the element, even if color is undefined. This forces us to write code like this which looks very ugly. Since the element has a color in the style property, this would then override css-classes that tried to change the color of the icon.

@Component({
  selector: 'hpi-icon',

  // Even if color is undefined, <svg-icon> would add style="color: var(--svg-icon-color)" to the element which defaulted to a white icon.
  // This is a temporary fix until this is (hopefully) fixed
  template: `
    <svg-icon *ngIf="color" [key]="key" [fontSize]="fontSize" [color]="color"></svg-icon>
    <svg-icon *ngIf="!color" [key]="key" [fontSize]="fontSize"></svg-icon>
  `,
  styles: [
    `
      svg-icon {
        color: var(--color-grey-1100);
        line-height: 1;
        vertical-align: middle;
      }
    `
  ]
})
export class IconComponent {
  @Input() key: SvgIcons;
  @Input() color: string | undefined;
  @Input() fontSize: string | undefined;

  @Input() set size(size: IconSize) {
    this.fontSize = iconSizes[size];
  }
}

Expected behavior

if @Input color of <svg-icon> is undefined it should not add any color styling at all to the DOM element.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 14.1.1
 "@ngneat/svg-icon": "^6.3.0",

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 16
- Platform:  Mac
NetanelBasal commented 1 year ago

You're welcome to submit a PR