Comments (8)
I also had this issue where building my app would include all the icons.
The workaround is to import all icons as a default export. I'm using Svelte but it should be similar enough.
For example : import IconUser from "@tabler/icons-svelte/IconUser.svelte"
The annoying part is that each import only adds a single icon, so you have to do it multiple times if you use a lot of icons.
I've had this issue since 3.0.0 and I haven't seen anything changed yet. I really like the library so I won't change it, but it would be convenient to import the icons as named imports, like import { IconUser } from "@tabler/icons-svelte"
.
from tabler-icons.
I have the same issue with icons-vue
. Using some icons in my project (vue + electron + vite) and all icons are bundled instead of several ones.
from tabler-icons.
Changed every default exports to named exports and the issue is still here. It still bundles all the icons.
from tabler-icons.
@Nradar While writing this I realised I meant to comment on #793 instead.
Either way it is to illustrate that adding the library and an icon to a page adds less than 1 KB, meaning that selective imports work as expected, using the default syntax, as opposed to "transforming all icons when built" (the title).
I'm not sure if it solves your problem with the library. You might wanna treat it as prod or peer dependency rather than a dev dependency.
from tabler-icons.
Hi, this is project about Tabler Dashboard, Tabler Icons are here: https://github.com/tabler/tabler-icons
from tabler-icons.
I also had this issue where building my app would include all the icons. The workaround is to import all icons as a default export. I'm using Svelte but it should be similar enough. For example :
import IconUser from "@tabler/icons-svelte/IconUser.svelte"
The annoying part is that each import only adds a single icon, so you have to do it multiple times if you use a lot of icons. I've had this issue since 3.0.0 and I haven't seen anything changed yet. I really like the library so I won't change it, but it would be convenient to import the icons as named imports, like
import { IconUser } from "@tabler/icons-svelte"
.
Thank you. I will try your approach to import icons directly
from tabler-icons.
Just reporting that this works correctly in Nextjs 14.
Install
yarn add @tabler/icons-react
Mount
import { IconBulb } from '@tabler/icons-react'
return (<>
...
<IconBulb />
...
</>)
Analyze
from tabler-icons.
Just reporting that this works correctly in Nextjs 14.
Install
yarn add @tabler/icons-reactMount
import { IconBulb } from '@tabler/icons-react' return (<> ... <IconBulb /> ... </>)Analyze
After, the size becomes larger?
from tabler-icons.
Related Issues (20)
- Sometimes icons look wierd
- Notification icon height is a little off
- Storybook v8 upgrade blocked by @tabler/icons-svelte
- Add dev to
- "circle-dashed-letter-letter-v" icon must be removed. HOT 1
- Stroke prop not accepting a Number. Has to be a ColorValue. HOT 1
- Some icons have too much excess space within its svg container HOT 1
- brains
- Satellite dish
- Cluster of antennas
- [File Request] tags.json file not available in all 3.x.x versions HOT 1
- Provide larger versions of existing icons
- exclamation-triangle HOT 1
- OTP - One time password
- Building with Vite and SolidJS includes all icons HOT 1
- Filled linkedin icon
- Musical Instruments
- Bouquet of flowers
- Like in medium, hand clapping icons are needed
- Circle X and Square X do not have the same X size
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabler-icons.