I'm using a Bootstrap template that I bought and it has some decimal size for regular feather icons. The way they did it was to set the width and the height of the feather icon on the element itself, for example:
<span data-feather="x" style="width: 12.8px; height: 12.8px;"></span>

This will make the feather icons width and height becomes 12.8 (checked using inspect element).

But in Svelte Feather Icons, I can just do:
<XIcon size="12.8" />

Well except that I think Svelte Feather Icons don't accept decimal value. I guess it got rounded down to the nearest integer because when I check it with inspect element, it becomes 12.

First of all, thanks for this library. I've been using it in production for a while now with Sapper.

Testing SvelteKit out, i notice that you get a SSR error out of the box:
https://svelte.dev/blog/whats-the-deal-with-sveltekit

How to reproduce:

• follow sveltekit install steps.
• add svelte-feather-icons to project
• try to import icon as usage intend

you'll see a <CheckCircleIcon> is not a valid SSR component. error.

This does not happen with the snowpack 3.0 + svelte hello world out of the box, though. I'm hoping we can get this library + sveltekit to play nice. Likely it's going to be a config setup? But, in any case, dropping this here for other minds to stumble upon.

• I've tried linking to the icons in different ways ( import CheckCircleIcon from "svelte-feather-icons/src/icons/CheckCircleIcon.svelte";) - produces same ssr error
• I can get it working in dev only by mounting the folder by mounting './node_modules/svelte-feather-icons/src/icons': '/_icons' + alias'ing $icons: './node_modules/svelte-feather-icons/src/icons', then importing with import CheckCircleIcon from "$icons/CheckCircleIcon.svelte"; -- but this does not build with sveltekit

Hello,
I do not know if has been, but now this is a malicious link.

do NOT click
https://vue-feather-icons.egoist.sh/

I just started to use TypeScript in my Svelte projects since it's fully compatible using the script tag with lang attribute:

<script lang='typescript'>
// do your code here...
</script>

But for the svelte-feather-icons it still missing the definitions of the types @types/svelte-feather-icons to use it with IDE IntelliSense.

After updating svelte-feather-icons to 3.5.1, I'm getting the following error when running jest:

● <PriceBox /> › Should render all props without sale

    TypeError: Cannot read property '$$' of undefined

      at B (node_modules/svelte-feather-icons/index.js:1:1820)
      at new Object.<anonymous>.e.CheckCircleIcon (node_modules/svelte-feather-icons/index.js:1:301082)
      at create_each_block (src/components/priceBox/PriceBox.svelte:138:20)
      at create_fragment (src/components/priceBox/PriceBox.svelte:218:20)
      at init (node_modules/svelte/internal/index.js:1880:37)
      at new PriceBox (src/components/priceBox/PriceBox.svelte:456:3)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (src/components/priceBox/PriceBox.test.ts:22:11)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.395 s, estimated 3 s

Downgrading to 3.5.0 fixes the issue.

When using this library with Webpack (5.1.3) and svelte-loader (2.13.6) I get a very slow (from 2s to 16s) startup time of Webpack. When using webpack in watch mode all subsequent changes are still fast which makes me think Webpack tries to rebuild each icon every time it is launched.

Do you have any recommendations for this or is this more of a Webpack and/or svelte-loader issue?

So, after using these icons for a long time and not realising why my Sapper build was slow (about 2 minutes) I decided to do some logging.

Turns out that every time a dependency includes this library, svelte compiles every single icon (tree-shaking happens after compilation it seems), and it adds 6 seconds (on a brand new Ryzen 7 - longer on a slower machine)! to the compile time of your app!

Happy to discuss ideas for improving this.

Since today, svelte-check fails when using svelte-feather-icons.
I created a minimal repository here to reproduce the bug. You can also download the code here.

/home/runner/work/abc/abc/src/routes/+page.svelte:10:2
Error: Argument of type 'typeof HomeIcon' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
  Type 'HomeIcon' is missing the following properties from type 'ATypedSvelteComponent': $$prop_def, $$events_def, $$slot_def, $on

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {} (ts)

<HomeIcon />

Here's the strange part: Even rerunning the same workflow (that worked before) don't seem to work now (see images below). Because of this, I don't know if this is an issue with svelte-feather-icons or something else (for example github actions).

I wanted to add a title to icon but couldn't since props weren't passed.
Can open a pr if this feature is welcome.

I've just updated to sveltekit 2.0 and there is the following warning issued:

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Looking at package.json: https://github.com/dylanblokhuis/svelte-feather-icons/blob/9ea2af73f4623c8b217ec5e68afbfcdeb625b6c3/package.json#L10C28-L10C28

10: "svelte": "src/index.js",

and the warning suggests adding a new 'exports' definition...

I was hoping to use svelte-feather-icons really simply without having to specify the size:

<a href="..."><FacebookIcon /> Facebook</a> 
<a href="..."><InstagramIcon /> Instagram</a> 

But the default size of the SVG results in width and height being 100% which in many/most situations the end up really large.
So in the vast majority of cases one has to specify the size.

My first suggestion is that the documentation should say what the default size is if you don't specify it.

Interestingly the vue-feather-icon page at https://vue-feather-icons.egoist.sh/ says the default sizing is '1x' (i.e. 1em) which I think seems a most natural default, assuming the icon is used in a text/button scenario.

However, since Jul 2019, the default in vue-feather-icons appears to have been '24'. See egoist/vue-feather-icons#37
Though there is a comment "I'll just publish a new major version instead since 1em makes more sense 😄" but I can't seem to find that.

In svelte-feather-icons the size is set differently in the components generated by build.js:

export let size = "100%";

Naturally changing away from 100% as the default is a breaking change, but I suspect most people explicitly specify the size anyway.

I had a quick look through some of the usages from https://github.com/search?l=Svelte&q=svelte-feather-icons&type=Code
Most seem to specify a size directly or indirectly via css, though interestingly the most common size if anything is probably 24 from my brief sampling (i.e. 1.5x if rem is 16px).

In my own code I also found that the 1x was possibly a bit too small (1.1x seems better), but 1.5x much to big.
So possibly one solution that is non-breaking, is to have a config item that specifies the default that is used.

<script>
  import { config } from 'svelte-feather-icons';
  export let size = config.size;
  ...

Though, ignoring backwards compatibility, I'd go for "1x".

Hi - thanks for this library, it is excellent!

I'd like to make one suggestion - right now the icons have a hardcoded size of 24px x 24px. If you were to rewrite the SVGs as you ran build.js, you could set that to 100% 100%, meaning that the icons would take the size of their container.