在 Angular 库组件中使用 svg 的相对路径

Question

我用 Angular Cli 创建了一个自定义库。 它具有以下结构：

 - dist
 - projects 
    - customLib
        - src
            - assets
                - icons
            - lib
                - button

按钮组件获取将显示在按钮内的 svg 图标的名称作为 Input() ：

  import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'lib-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss']
 })

export class ButtonComponent implements OnInit {
svgIconUrl: string;

constructor() {
}

ngOnInit() {
  if (this.icon) {
    this.svgIconUrl = '../../assets/icons/' + this.icon + '.svg';
  }
}}

按钮组件的html：

<button>
   <div *ngIf="svgIconUrl">
    <svg-icon [src]="svgIconUrl"></svg-icon>
   </div>
</button>

我制作了一个脚本，用于复制所有图标（存储在 src/assets/icons 中）并将其粘贴到 dist 文件夹中。 所有这些都运行良好。 然后，我在 bitbucket 上发布了我的库，并将其安装在另一个 Angular 应用程序中。 库已正确导入，但 angular-svg-icon 找不到 svg，因为它在 localhost:4200/#/assets/icons/myicon.svg 中使用 svg

当然它没有找到 svg，因为它在库中，所以它在“node_modules”文件夹中。 我怎样才能强制库的按钮组件在库中使用 svg，所以使用相对路径？

这是我使用按钮的 Angular 应用程序（正在导入和使用库）中的 html：

    <lib-button icon="icon-magic"></lib-button>

Answer 1

我遇到了同样的问题，我发现的唯一决定是在“lib”部分“cssUrl”参数中包含ng-package.json ：

"lib": {
   "entryFile": "src/public-api.ts",
   "cssUrl": "inline"
 },

根据文档，它允许使用数据 URI 在 css 文件中嵌入资产。