2

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

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

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

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

1 回答 1

0

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

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

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

于 2020-06-24T10:56:46.110 回答