michaelbazos / angular-feather

A-la-carte integration of Feather Icons in Angular applications
MIT License
155 stars 38 forks source link

Is there any possible way to provide icon in css or typescript file #40

Closed albinjoseph1994 closed 3 years ago

albinjoseph1994 commented 3 years ago

For using icons along with other packages . There some situation we need to provide it in typescript or in css style.Is there any way to do it.

michaelbazos commented 3 years ago

You can have a typescript file exporting svg:

myTrashIcon.ts

export const Trash = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="feather feather-trash">
    <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</svg>`

and import & use it in the call to FeatherModule.pick({ ... }):

icon.module.ts

import { NgModule } from '@angular/core';

import { FeatherModule } from 'angular-feather';
import { Trash } from './myTrashIcon';

@NgModule({
  imports: [
    FeatherModule.pick({
      'my-trash': Trash
    })
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule { }