visurel / iconify-angular Goto Github PK

Problem

I followed the steps that are described in the readme file of this repository, but there was a missing import that prevented me from using the icon set that your repository provides.

When I tried to include the icon component in one of my application's templates, I got the following error:

Snapshots of my files

Here's a snapshot of my src/app.component.ts file.

And here's a snapshot of the icons object that I provided:

Here are the versions of my current setup tools:

@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.3.5

How I was able to solve it

I was able to resolve this by adding the IconModule to the imports array of my app.module.ts file, like this:

import { IconModule } from '@visurel/iconify-angular';

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [BrowserModule, IconModule],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Suggestions

I think you should clarify things in your readme file about the missing import for the IconModule.

I would be glad to provide any information that you could use to resolve this.

Any plan for the angular 13 support? seems like its not working with angular 13.

i have tested version 11.0.0 and @iconify/icons-ic version 1.1.18, angular 13 seems like some issues, not displaying the icon,

please do a test on your end. thanks

I'm getting this error and the icons aren't showing up even though I'm following the readme for string syntax. I'm using Angular 11.

'ic-icon' is not a known element:
1. If 'ic-icon' is an Angular component, then verify that it is part of this module.
2. If 'ic-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng

Building projects that depend on this package gives following warning:

⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

• @visurel/iconify-angular [es2015/esm2015] (https://github.com/visurel/iconify-angular)
  Encourage the library authors to publish an Ivy distribution.

Please update distribution for Ivy Engine
Publishing Libraries

Hi,
How can I show icon from icon module path? Because when importing dynamically it seems not to find that module.

Or maybe with a name icon, will I show it by not import static icon module path. Here is my code

const importIcon = '@iconify/icons-ic/' + item.icon;
const a = import(importIcon).then(icon => {
   console.log(icon);
});

ERROR Error: Uncaught (in promise): Error: Cannot find module '@iconify/icons-ic/twotone-layers'
Error: Cannot find module '@iconify/icons-ic/twotone-layers'

I tried upgrading to angular 12.

Package "@visurel/iconify-angular" has an incompatible peer dependency to "@angular/common" (requires "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0" (extended), would install "12.0.3").

Hi Visurel team,

I have migrated my angular app to the V16 and now I am getting errors while running the app.

This is the error:

How to fix this issue, Any suggestions?

Thanks

v0.0.7 ---> v11.0.0

<button color="primary" class="mr-0" mat-raised-button type="button" (click)="navigateToNotifications()">
      <span style="font-size: small;">&nbsp;&nbsp;  TÜMÜNÜ GÖRÜNTÜLE </span>
      <ic-icon [icon]="icArrows" class="ltr:-ml-1 rtl:-mr-1 ltr:mr-2 rtl:ml-2" inline="true" size="20px"></ic-icon>
 </button>

I'm submitting a...

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

Current behavior

Inputs need to be set as [inline]="true" so boolean properties, numbers and sizes are correctly handled.

Expected behavior

properties should be able to coerce from string attributes

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

more infos why you should allow / check for this can be found for example here:
https://netbasal.com/trust-but-verify-coerce-your-component-inputs-bdb743e8b579

Environment

Angular ships with a coercion package in Angular CDK 5+, so it should be fine for all allowed Angular versions.

Angular version: 5+
https://github.com/angular/components/tree/5.0.x/src/cdk/coercion

If wanted, I can submit a PR

In the React module it supports String syntax. The idea is that an icon can be registered once with a name, and can then be used by providing that name.
This is a really nice feature.

The Angular module could support this using the following solution:

• Create a IconService with a method addIcon:

  @Injectable({
    providedIn: 'root',
  })
  export class IconService {
    private icons = {};
  
    addIcon(name: string, icon: string) {
      this.icons[name] = icon;
    }
  
    getIcon(name: string) {
      const icon = this.icons[name];
      if(!icon){
        throw new Error(`[Iconify]: No icon registered for name '${name}'. Call 'IconService.addIcon' to register icons.`);
      }
      return icon;
    }
  }

• Adjust the the directive:

  updateIcon() {
    const icon = this.getIcon();
  
    // Get SVG data
    const svg = new SVG(normalize(icon);
  
    // Generate SVG
    this.iconHTML = this.domSanitizer.bypassSecurityTrustHtml(svg.getSVG({
      width: this.width,
      height: this.height,
      color: this.color,
      inline: this.inline,
      box: this.box,
      align: this.align,
      hFlip: this.hFlip,
      vFlip: this.vFlip,
      flip: this.flip,
      rotate: this.rotate
    }));
  }
  
  private getIcon() {
    if (typeof this.icon !== 'object' && typeof this.icIcon !== 'object'
      && typeof this.icon !== 'string' && typeof this.icIcon !== 'string') {
      throw new Error('[Iconify]: No icon provided');
    }
  
    if (typeof this.icon === 'string' || typeof this.icIcon === 'string') {
      return this.iconService.getIcon(this.icon || this.icIcon);
    } else {
      return this.icon || this.icIcon;
    }
  }

Usage in template:

<ic-icon icon="homeIcon"></ic-icon>

Registerering icons:

@Component({
  selector: 'ic-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(iconService: IconService){
    iconService.addIcon('home', home);
    iconService.addIcon('groupAdd', groupAdd);
    iconService.addIcon('bellSlash', bellSlash);
  }
}

The documentation that is shown on the package page on npm is outdated (it doesn't show the name syntax section).
The README.md in the latest published version is also outdated (which makes sense, because npm uses that).

Maybe you somehow locally had the outdated README when publishing the npm package?

I am unable to use in latest project, plz update to ng 9