I created a Weapon class with at least one icon.
export default abstract class Weapon {
icons: string[]; // Possibly incorrect type
constructor(iconOrIcons: string | string[]) {
this.icons = typeof iconOrIcons === 'string' ? [iconOrIcons] : iconOrIcons;
}
}
My icons are in the format .webp and I'm importing them like this:
import icon from '../../../assets/weapons/swords/dagger.webp';
import Sword from './Sword';
export default new Sword(icon);
When simply having these files in my project (without trying to render the images), webpack throws an error:
Error: Module parse failed: Unexpected character '♦' (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Webpack indicates that I need a loader. However, it's unclear to me how to add a loader to angular.json.
It might be unnecessary or not ideal to import the .webp file itself, as I could instead use URLs pointing to those resources. In that case, I would prefer a better way to declare those URLs rather than just using arbitrary string literals on my Weapon instances.