dylanblokhuis / svelte-feather-icons Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://www.npmjs.com/package/svelte-feather-icons/
License: MIT License
Home Page: https://www.npmjs.com/package/svelte-feather-icons/
License: MIT License
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?
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.
<script>
import { AirplayIcon } from 'svelte-feather-icons'
</script>
<!-- Working with width/height = 100% -->
<AirplayIcon />
<!-- NOT working -->
<airplay-icon />
<!-- NOT working -->
<airplay-icon size="25" class="custom-class"/>
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.
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.
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.
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.
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.
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".
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:
svelte-feather-icons
to projectyou'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.
import CheckCircleIcon from "svelte-feather-icons/src/icons/CheckCircleIcon.svelte";
) - produces same ssr error'./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 sveltekitSince 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'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...
Hello,
I do not know if has been, but now this is a malicious link.
do NOT click
https://vue-feather-icons.egoist.sh/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.