Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dmattsson opened this issue Mar 22, 2023 · 1 comment
Closed

Comments

@dmattsson
Copy link

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
@dmattsson dmattsson changed the title style="color. style="color: var(--svg-icon-color)" added even if color == undefined Mar 22, 2023
@NetanelBasal
Copy link
Member

You're welcome to submit a PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants