html - 如何在angular4中使用来自node_modules的svg图标集包？

Question

我在我的项目中找到了这个开源图标包 featherIcons ，并列在 my_modules 目录中。然而，我正在尝试使用它，但我似乎无法让它发挥作用。

问题是，我想我必须以某种方式导入包，但不确定如何或在哪里。

app-component.html

<div class="navbar__nav-container">
  <ul class="navbar__nav-container__nav-items">
    <li>Platform</li>
    <li>Stix/Taxi</li>
    <li>Menu</li>
    <li>
      <i data-feather="circle"></i>
    </li>
  </ul>
</div>

app.module.ts

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

import { RoutingModule } from './routing.module';
import { SharedModule } from './shared/shared.module';
import { CatService } from './services/cat.service';
import { UserService } from './services/user.service';
import { AuthService } from './services/auth.service';
import { AuthGuardLogin } from './services/auth-guard-login.service';
import { AuthGuardAdmin } from './services/auth-guard-admin.service';
import { AppComponent } from './app.component';
import { CatsComponent } from './cats/cats.component';
import { AboutComponent } from './about/about.component';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { AccountComponent } from './account/account.component';
import { AdminComponent } from './admin/admin.component';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    CatsComponent,
    AboutComponent,
    RegisterComponent,
    LoginComponent,
    LogoutComponent,
    AccountComponent,
    AdminComponent,
    NotFoundComponent
  ],
  imports: [
    RoutingModule,
    SharedModule
  ],
  providers: [
    AuthService,
    AuthGuardLogin,
    AuthGuardAdmin,
    CatService,
    UserService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})

export class AppModule { }

任何帮助将不胜感激

Answer 1

没关系，我想出了解决方案，我会在此处发布解决方案，以便它可以帮助其他人。

因此，正如提供的链接中的库所述，我必须像这样安装它

npm install feather-icons --save - --save 非常重要，因为它将在我的 package.json 中引用。安装后，您将能够在 node_modules 目录中看到它。

然后我想在哪个组件中使用该库，我所要做的就是按以下方式导入它:

因为我想在 app.component.ts 中使用库中的图标:

app.component.ts

import {Component, OnInit} from '@angular/core';
import { AuthService } from './services/auth.service';

/*
- feather-icons is a directory installed in node_modules.
- I dont have to specify the whole path like '../node_modules/path/to/feather-icons'.
- Also rememeber to call the feather.replace() inside ngOnInit
- because it needs to first make sure the component loads first
*/
import * as feather from 'feather-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor (
    public auth: AuthService
  ) { }


  ngOnInit() {
    feather.replace();
  }

}

然后在我的 app.component.html 中:

<div class="navbar__nav-container">
  <ul class="navbar__nav-container__nav-items">
    <li>Platform</li>
    <li>Stix/Taxi</li>
    <li>Menu</li>
    <li>
      <i data-feather="circle"></i>
    </li>
  </ul>
</div>

老实说，这就是全部。

希望这有帮助:)