Skip to content

Instantly share code, notes, and snippets.

@colebemis
Created December 5, 2017 21:30
Show Gist options
  • Save colebemis/21659e4db4e8cbdba401cea68f155377 to your computer and use it in GitHub Desktop.
Save colebemis/21659e4db4e8cbdba401cea68f155377 to your computer and use it in GitHub Desktop.
Using Feather with Angular
import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';
import { icons } from 'feather-icons'; // v4+
@Pipe({ name: 'feather' })
export class FeatherIconsPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(icon: string, size: number = 24, color: string = 'inherit') {
return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
width: size,
height: size,
color: color
}));
}
}
@colebemis
Copy link
Author

colebemis commented Dec 5, 2017

Line 4

BEFORE:
import * as feather from 'feather-icons/dist/feather';

AFTER:
import { icons } from 'feather-icons';

Since we only need the icons object, we can import just icons from the feather-icons package.

Line 11

BEFORE:
transform(..., fill: string = 'none') { ... }

AFTER:
transform(..., color: string = 'inherit') { ... }

I prefer to use color to set the color of the icons. This works because the stroke of all the SVGs are set to currentColor. This approach is a little more flexible than setting the fill because we can set the color of elements with both stroke and fill with one property.

Line 12

BEFORE:
feather.toSvg(icon, { ... });

AFTER:
icons[icon].toSvg({ ... });

I recently released Feather v4 which came with some breaking API changes. This is the new way to use the toSvg() function.

v4.0.0 Release Notes

@attacomsian
Copy link

Thank you for the update @colebemis. My solution was based on Feather icons 3.3. Just upgraded to v4 and it is awesome. You did a great job.

I'll update the blog post soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment