Question

我找到了我在项目featherIcons中安装的这个开源图标包，并列在my_modules目录中。但是我试图使用它，但我似乎无法使它工作。

问题是，我想我必须以某种方式导入包但不知道如何或在何处。

app-component.html

＆＃13;

<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>

＆＃13;

app.module.ts

＆＃13;

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 { }

＆＃13;

任何帮助将不胜感激

Answer 1

没关系，我想出了解决方案，我会在这里发布解决方案，以便它可以帮助其余的。

因此，当库中提供链接时，我必须像这样安装它

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

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

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

<强> app.component.ts

＆＃13;

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

＆＃13;

然后在我的app.component.html：

＆＃13;

<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>

＆＃13;

说实话，这就是一切。

希望这会有所帮助：）

Answer 2

使用angular-feather

的解决方案

它的优势在于你只选择了你需要的图标，从而减少了束尺寸。

安装包
```
npm install angular-feather
```

导入您需要的图标

在您需要的角度模块中按单位导入图标

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

import { FeatherModule } from 'angular-feather';
import { Camera, Heart, Github } from 'angular-feather/icons';

// Select some icons (use an object, not an array)
const icons = {
  Camera,
  Heart,
  Github
};

@NgModule({
  imports: [
    FeatherModule.pick(icons)
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule {}

导入IconsModule并使用组件

<i-feather name="heart"></i-feather>
<i-feather name="camera"></i-feather>

如何在angular4中使用node_modules中的svg图标集包？

2 个答案:

使用angular-feather

Stackblitz demo