Ivy distribution

[humblepie]

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

[puneetv05]

+1

[axmad22]

can we get a feedback if there will be any ivy support thanks

[tomstolarczuk]

+1

[cyberalien]

You can try iconify-icon package: https://www.npmjs.com/package/iconify-icon

It has almost the same functionality, but built as a web component, so it works with all frameworks including Angular. No need to update it for each Angular release.

[sysmat]

with standalone components & ng 16.0.0-next this lib will not work

[tleveque23]

You can try iconify-icon package: https://www.npmjs.com/package/iconify-icon

It has almost the same functionality, but built as a web component, so it works with all frameworks including Angular. No need to update it for each Angular release.

Ok.... but to use it. I cannot find any solution right now

[tomstolarczuk]

Install (you don't have to use mdi icons, just an example):

npm i iconify-icon @iconify/icons-mdi

In your app.module:

import { addIcon } from 'iconify-icon';
import videoMarker from '@iconify/icons-mdi/video-marker';

addIcon('video-marker', videoMarker);

In your component template:

<iconify-icon inline icon="mdi:video-marker" class="text-primary" style="font-size: 3rem"></iconify-icon>

Cheers!

[tleveque23]

I just build a simple component with the same name to replace it. No need to change anything in your code. Juste make sure to import iconify-icon. Here is the code of my component:

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'
import {IconifyIcon} from 'iconify-icon'
import {DomSanitizer, SafeHtml} from '@angular/platform-browser'

/**
 * Wrapper to @visurel/iconify-angular. (https://github.com/visurel/iconify-angular)
 * Since this lib is no longer maintained, this component replace it without any modification to the code.
 * All you need to do is to install iconify-icon (yarn add iconify-icon)
 */

@Component({
  selector: 'ic-icon',
  template: '<svg [innerHTML]="iconHtml" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" [attr.viewBox]="viewbox" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"></svg>'
})
export class IconComponent implements OnChanges {

  @Input() icon: IconifyIcon
  iconHtml: SafeHtml
  viewbox: string

  constructor(private sanitizer: DomSanitizer) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.icon) {
      this.iconHtml = this.sanitizer.bypassSecurityTrustHtml(this.icon.body)
      this.viewbox = `0 0 ${this.icon.width} ${this.icon.height}`
    }
  }
}