Open humblepie opened 2 years ago
+1
can we get a feedback if there will be any ivy support thanks
+1
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.
with standalone components & ng 16.0.0-next this lib will not work
You can try
iconify-icon
package: https://www.npmjs.com/package/iconify-iconIt 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
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!
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}`
}
}
}
Building projects that depend on this package gives following warning:
⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:
Please update distribution for Ivy Engine Publishing Libraries