Description

First of all, thanks for your work! It's super useful :)

One of the issues I encounter is with the REPL. It's always hard to find an icon and the matching name.
Imo, it would be super useful if the icon name is displayed alongside the icon.

I suggest you this solution:

<script>
	import * as Icons from 'svelte-heros-v2';
	const random_hex_color_code = () => {
		let n = (Math.random() * 0xfffff * 1000000).toString(16);
		return '#' + n.slice(0, 6);
	};
</script>

<div class="container">
	{#each Object.entries(Icons) as [name, component]}
		<div class="icon">
			<svelte:component this={component} color={random_hex_color_code()} />
			{name}
		</div>
	{/each}
</div>

<style>
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 8px;
	}

	.icon {
		display: flex;
		gap: 4px;
		align-items: center;
	}
</style>

Additional Information

No response

Describe the bug

Hi, how to import custom svg icons.

Reproduction

none

Version and System Info

MacOS Somona

Description

see title

Additional Information

No response

Description of the bug

When importing an icon using this method import Plus from 'svelte-heros-v2/Plus.svelte';, I get an error saying "Cannot find module 'svelte-heros-v2/Plus.svelte' or its corresponding type".

importing as import { Plus } from 'svelte-heros-v2': works also but without the error.

The code runs but I need to get rid of the error. I have the latest version of everything installed.

Steps To Reproduce

Try to import an icon in a svelte component.

Additional Information

No response

Description of the bug

Why does strokeWidth default to 2 whereas the icons from https://heroicons.com/ are always with strokeWidth of 1.5 ?

Steps To Reproduce

Use an svg from https://heroicons.com/ and then use an Icon from svelte-heros-v2. You will see that the strokeWidth is different

Additional Information

No response

Description

Any plans to support the micro icons released in Heroicons 2.1.0?

https://github.com/tailwindlabs/heroicons/releases/tag/v2.1.0

Additional Information

I've much appreciated this library, so thank you for building it.

Description of the bug

use svelte-heros-v2, without v1, on start got error:

Cannot find module 'svelte-heros' imported from
'xxx/node_modules/.pnpm/[email protected]/node_modules/flowbite-svelte/accordions/AccordionItem.svelte'

If v2 depends on v1 to work, then might should mention that in README.

But, IMO, v2 should not need v1, otherwise when import icon in .svelte file, it will show both icons, which may be a bit mess.

Steps To Reproduce

• pnpm rm svelte-heros
• pnpm add svelte-heros-v2@latest
• pnpm prune
• pnpm dev
  on start, will get above error,

Additional Information

No response

Description

Can we pass svg attributes? i.e. stroke-width="2"?

Additional Information

No response

Description of the bug

Hey there. Thanks for creating this useful little module.

I've upgraded from V1 and spent quite some time troubleshooting why my app crashes with a "500 Internal server error", while there were no errors shown in the console.

The reason for the crash was that I referenced an icon ArrowNarrowDown that is no longer present in
svelte-heros-v2. Possibly this is less a problem of this library but one of Vite or Sveltekit. Maybe you have an idea how I could dedect such a problem in the future.

Thanks a lot. Have a nice day! :)

Michael

Steps To Reproduce

1. Create a new Sveltekit app (latest Sveltekit version)
2. import { ArrowNarrowDown } from 'svelte-heros-v2';

Additional Information

No response

Description of the bug

apparently svelte-heros-v2 adding 50% of my bundle size.
is there a way to reduce this size?

Steps To Reproduce

N/A

Additional Information

N/A

Description of the bug

Hey, thank you fro your great work!

One question I have... why have you chosen different icon names than in the original library?

original: x-circle
svelte-heros-v2: XCircle

Steps To Reproduce

Documentation

Additional Information

No response

Describe the bug

The Italic icon is missing from the library

Reproduction

Not required

Version and System Info

Svelte, MacOS

Description of the bug

Based on the code, I saw the rendering method is using String Template literals to process the color user just gives.

Exploit

Prove of Concept

Steps To Reproduce

1. write the XSS in the parameter, ex. color, strokeWeight, etc...
2. execute the site you are running.
3. got the alert popup

Additional Information

No response

Description of the bug

Solid icons are no longer solid fill.

Steps To Reproduce

1. Pick the Star Icon
2. The Solid variation is not filled

<Icon name="star-solid" class="text-green-500" />

I'm trying to upgrade to v 0.8.2 and is seeing this regression.

Additional Information

No response

Description

Would love to be able to use the "Mini" variation with all the icons. It's especially useful in header elements and form components. Saves time playing with the icon sizes and a lot of component libraries utilize it so it'd make it easier to implement them.

Additional Information

No response

Description of the bug

I noticed that unlike in svelte-heros-v1 the icons receive a focus when tabbing through the focusable elements. I think this shouldn't happen.

Steps To Reproduce

1. Use any Icon
2. Use TAB

Additional Information

No response

Description

I've been looking at this upcoming PR:

#21

Thinking it would be useful to be able to control the solid | outline | mini defaults at a global level rather than having to apply "solid" to every image.

Something like this could work:

SvelteHeroes.defaultVariation = SvelteHeroes.solid;

Likewise setting the size globally could also be useful.

Cheers,
Matt

Additional Information

No response