Files
privacy.sexy/tests/unit/shared/Stubs/UseSvgLoaderStub.ts
undergroundwires 48730bca05 Implement new UI component for icons #230
- Introduce `AppIcon.vue`, offering improved performance over the
  previous `fort-awesome` dependency. This implementation reduces bundle
  size by 67.31KB (tested for web using `npm run build -- --mode prod`).
- Migrate Font Awesome 5 icons to Font Awesome 6.

This commit facilitates migration to Vue 3.0 (#230) and ensures no Vue
component remains tightly bound to a specific Vue version, enhancing
code portability.

Font Awesome license is not included because Font Awesome revokes its
right:

> "Attribution is no longer required as of Font Awesome 3.0"
>
> Sources:
>
> - https://fontawesome.com/v4/license/ (archived: https://web.archive.org/web/20231003213441/https://fontawesome.com/v4/license/, https://archive.ph/Yy9j5)
> - https://github.com/FortAwesome/Font-Awesome/wiki (archived: https://web.archive.org/web/20231003214646/https://github.com/FortAwesome/Font-Awesome/wiki, https://archive.ph/C6sXv)

This commit removes following third-party production dependencies:

- `@fortawesome/vue-fontawesome`
- `@fortawesome/free-solid-svg-icons`
- `@fortawesome/free-regular-svg-icons`
- `@fortawesome/free-brands-svg-icons`
- `@fortawesome/fontawesome-svg-core`
2023-10-11 18:38:19 +02:00

32 lines
906 B
TypeScript

import {
WatchSource, computed, ref, watch,
} from 'vue';
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
import { useSvgLoader } from '@/presentation/components/Shared/Icon/UseSvgLoader';
export class UseSvgLoaderStub {
private readonly icons = new Map<IconName, string>();
public withSvgIcon(name: IconName, svgContent: string): this {
this.icons.set(name, svgContent);
return this;
}
public get(): typeof useSvgLoader {
return (iconWatcher: WatchSource<IconName>) => {
const iconName = ref<IconName | undefined>();
watch(iconWatcher, (newIconName) => {
iconName.value = newIconName;
}, { immediate: true });
return {
svgContent: computed<string>(() => {
if (!iconName.value) {
return '';
}
return this.icons.get(iconName.value) || '';
}),
};
};
}
}