Support string syntax

[marklagendijk]

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);
  }
}

[visurel]

@marklagendijk Looks great and is backwards-compatible. If you can get all this into a PR we can easily get this in. 👍

[marklagendijk]

Awesome. I will create a pull request.

[marklagendijk]

I created the pull request #10