Issues with icons #255
Assignees
Comments
|
Any free icon pack package should work and should replace the current SVG icons. |
Component proposalAddition in 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 <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' }} />
|
|
Doesn't Fa already provide types |
not that I know of, no |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
filterCSS 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.
The text was updated successfully, but these errors were encountered: