Масштабируемый способ импорта изображений из библиотеки payment-icons в Angular

Question

Я пытаюсь использовать библиотеку 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.

Answer 1

Создайте немой компонент, который использует службу, и входной параметр

<my-svg [name]="credit-card"> <\my-svg>

В вашей службе создайте массив, содержащий ссылки на все ваши svg, которые вы хотите использовать в проекте.

В своем тупом компоненте вы можете разрешить свое имя SVG, полученное из ввода, и разрешить его, используя метод из вашей службы, который принимает имя файла SVG в качестве параметра, фильтрует наш массив и возвращает ссылку или что-то, что может связать с нашимСвойство img src.

Тупой компонент

<div class="my-svg">
<img [src]="imgSrc" />
</div>

Надеюсь, это поможет поддерживать масштабируемость.Для отложенной загрузки изображений вы можете попробовать использовать Intersection Observer