Default sizing is awkward (100%) and differs from vue-feather-icons

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 https://github.com/egoist/vue-feather-icons/pull/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".

dylanblokhuis / svelte-feather-icons

Default sizing is awkward (100%) and differs from vue-feather-icons #17