включая шрифт в библиотеке Angular - PullRequest
Новая
       6

включая шрифт в библиотеке Angular

0 голосов
/ 12 октября 2018

В настоящее время мы строим стороннюю библиотеку Angular.Мы разрабатываем сторонние компоненты и используем font-awesome для разработки того же самого.

Мы установили пакет font-awesome npm в хост-приложение, где мы рендерим компонент.

Нозначки отображаются не так, как ожидалось.Есть ли способ включить пакет font-awesome в нашу библиотеку?

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

В дополнение к тому, что сказал Джо, вы можете добавить флаг integrity:

Использовать бесплатный CDN Font Awesome 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Другие вариантыявляются:

Диспетчер пакетов как npm: 

npm install @fortawesome/fontawesome-free

Угловой: Существует официальный угловой компонент:

В соответствии с этой документацией из официальной документации, вот шаги:

Пряжа: 

  yarn add @fortawesome/fontawesome-svg-core \
  yarn add @fortawesome/free-solid-svg-icons \
  yarn add @fortawesome/angular-fontawesome

src /app / app.component.html 

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

src / app / app.component.ts 

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}

Импортировать компонент:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
0 голосов
/ 04 марта 2019

Если вы используете ng-packagr для создания угловой библиотеки, вы можете добавить их в ng-package.json.

Вот так я добавил для библиотеки начальный загрузчик, бурбон и бурбон-аккуратный. 

 "lib": {
    "entryFile": "src/public_api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/assets/styles",
      "../../node_modules/bourbon/app/assets/stylesheets",
      "../../node_modules/bourbon-neat/app/assets/stylesheets",
      "../../node_modules/bootstrap/dist/scss/bootstrap"
    ]
  }
0 голосов
/ 12 октября 2018

В index.html добавьте, если вы используете версию 4.7.0: 

<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">

Для других версий добавьте соответствующие им пути.

...