我正在尝试使用Angular中的payment-icons库。而建议的导入方式：
import visa from 'payment-icons/min/flat/visa.svg';
确实有效，这是不可扩展的 - 我最终会为我的网站支持的每个图标提供一堆单独的图标导入和相应的属性。另外，我有一个场景，根据对特定交易的支持，我可以在其中有条件地显示图像，因此没有理由我什至需要属性：
是否有更可扩展的方式懒惰导入这些图像？
component.ts
import visa from 'payment-icons/min/flat/visa.svg';
import mastercard from 'payment-icons/min/flat/mastercard.svg';
import maestro from 'payment-icons/min/flat/maestro.svg';
import amex from 'payment-icons/min/flat/amex.svg';
// regardless of whether you make it a collection or an array
// this is horrible:
visa = visa;
mastercard = mastercard
maestro = maestro
amex = amex
（然后是<img [attr.src]="visa" alt="Visa"/>）
编辑：
实际上，即使此方法确实可以在浏览器中起作用，也不会编译用于生产，Cannot find module 'payment-icons/min/flat/mastercard.svg'当ng build --prod。
创建使用服务的愚蠢组件和输入参数
<my-svg [name]="credit-card"> <my-svg>
在您的服务中，创建一个包含对所有SVG的引用的数组，要在项目中使用。
在您的愚蠢组件中，您可以通过使用从服务中以svg文件名称为参数的服务来解决您从输入中获得的SVG名称，并过滤我们的数组，并返回一个能够绑定的参考或某些内容到我们的IMG SRC属性。
愚蠢的组件
<div class="my-svg">
<img [src]="imgSrc" />
</div>
我希望这可以帮助保持可扩展性。对于懒惰的加载图像，您可以尝试使用交叉点观察者