在Angular Library组件中使用svg的相对路径
在Angular Library组件中使用svg的相对路径
提问于 2019-09-14 02:24:20
我用Angular Cli创建了一个定制库。它的结构如下：
- dist
- projects
- customLib
- src
- assets
- icons
- lib
- button按钮组件获取将显示在按钮内部的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“文件夹中。如何强制Library的按钮组件在库中获取svg，因此具有相对路径？
这是Angular App (正在导入和使用库)中的html，我在其中使用了按钮：
<lib-button icon="icon-magic"></lib-button>回答 1
Stack Overflow用户
发布于 2020-06-24 18:56:46
我也遇到过同样的问题，我发现的唯一决定是在"lib“部分的"cssUrl”参数中包含to ng-package.json：
"lib": {
"entryFile": "src/public-api.ts",
"cssUrl": "inline"
},根据文档，它允许使用数据URI在css文件中嵌入资源。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57928640
复制相关文章
相似问题
腾讯云开发者
