ngneat / svg-icon

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

Conflict involving icons that share the same name but have different paths (solid/outline). #135

Open avim101 opened 1 year ago

avim101 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

I have come across a conflict related to registering icons that share the same name but have different paths, such as "arrowUp" from the "solid" and "outline" directories. The issue arises when the registration process checks if the name already exists.

  register(icons: SvgIconType | SvgIconType[]) {
    for (const { name, data } of Array.isArray(icons) ? icons : [icons]) {
      if (!this.svgMap.has(name)) {
        this.svgMap.set(**name**, new SvgIcon(data));
      }
    }
  }

Expected behavior

should be able to handle icons with the same name but different paths in a way that allows both versions to coexist. Resolution Suggestions: add the possibility to add prefix / postfix to icon output name when generation

export interface Config {
  srcPath: string;
  outputPath: string;
  svgoConfig: { plugins: any[] };
  prefix?: string;
  postfix?: string;
  rootBarrelFile?: boolean;
  rootBarrelFileName?: string;
  iconExportedNamePrefix?: string;
  iconExportedNamePostfix?: string;
}
export const arrowUpIcon = {
    data: `...`,
    name: 'arrow-up' as const
};

will be

export const arrowUpIcon = {
    data: `...`,
    name: 'arrow-up-**solid**' as const
};

Minimal reproduction of the problem with instructions

  1. Register icons with the same name but different paths, such as "arrowUp" from both the "solid" and "outline" directories.

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

Environment


Angular version: X.Y.Z


Browser:
- [ ] 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: XX  
- Platform:  
Mac
Others:

NetanelBasal commented 11 months ago

You're welcome to submit a PR