如何从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>

说实话，这就是全部。

希望这可以帮助 ：）