Issues with icons

[madkarmaa]

I've come across some issues while using the <Button /> component.

• There's a limited choice of icons, which need to be added manually

• The colors of the icons are hardcoded in the SVG code

I had to modify the filter CSS property to make the colors of the icons black/white because the hardcoded blue-ish color they currently have didn't fit on red/yellow backgrounds.

I think having an icon library is better than the current method, such as Google font icons or FontAwesome icons.

A component can be created as well, I've already made one for my own website, it's a really easy solution.

The only downside I can think of is the big size of these CSS files which need to be downloaded by the client.

[oSumAtrIX]

Any free icon pack package should work and should replace the current SVG icons.

[madkarmaa]

Component proposal

Addition in src/lib/types.ts

export enum FAIconFamily {
	CLASSIC = 'classic',
	DUOTONE = 'duotone',
	SHARP = 'sharp',
	SHARP_DUOTONE = 'sharp-duotone'
}

export enum FAIconVariant {
	SOLID = 'solid',
	REGULAR = 'regular',
	LIGHT = 'light',
	THIN = 'thin'
}

New component src/lib/components/Icon.svelte
Ignore the TailwindCSS syntax, it can be easily replaced

<script lang="ts">
	import { FAIconFamily, FAIconVariant } from '@/types';

	type Family = FAIconFamily | `${FAIconFamily}`;
	type Variant = FAIconVariant | `${FAIconVariant}`;

	type IconOptions =
		| {
				brands: true;
		  }
		| {
				brands?: never;
				family: Family;
				variant: Variant;
		  };

	export let name: string;
	export let options: IconOptions = { family: 'classic', variant: 'solid' };

	const classes: string[] = [`fa-${name}`];

	if (options.brands) classes.push('fa-brands');
	else Object.values(options).forEach((option) => classes.push(`fa-${option}`));
</script>

<i class="{classes.join(' ')} mr-2 h-4 w-4 flex justify-center items-center"></i>

Screenshots

<Icon name="house" />

<Icon name="folder" options={{ family: 'duotone', variant: 'light' }} />

P.S.: there's FontAwesome icon files to import. They can be non-premium (or premium, acquired via page inspection 🤐).

[oSumAtrIX]

Doesn't Fa already provide types

[madkarmaa]

Doesn't Fa already provide types

not that I know of, no