Taiga UI family
Is there a practical way to optimize this so that only used icons end up in the bundle?
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"All Taiga UI icons are name @tui. and then the name of the file, you would need a script to go through your source code and collect all used icon names in an array and then copy only those files then. At the moment there's no tool to do this out of the box.
-
|
My bundle size is quite large (16mb) because all Taiga UI icons are copied to the dist folder, not just the ones I need. {
"glob": "**/*",
"input": "node_modules/@taiga-ui/icons/src",
"output": "assets/taiga-ui/icons"
}Is there a practical way to optimize this so that only used icons end up in the bundle? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
They are not in the bundle, they just lay in the assets folder. Are you limited on hosting space? Your users would only download the icons used. |
Beta Was this translation helpful? Give feedback.
-
|
In my case, it's a problem for 3 reasons:
|
Beta Was this translation helpful? Give feedback.
-
|
All Taiga UI icons are name |
Beta Was this translation helpful? Give feedback.
-
This can be necleted as it is still "small" compared to other build tasks.
I also have a PWA. And once it accesses an icon, that is cached afterwards. What do you want more?
I guess then you need to split your app. Or you need to provide your own way to "collect the used icons". I don't see a way on how Taiga UI should handle that for you... |
Beta Was this translation helpful? Give feedback.
-
|
@waterplea Thank you! I will do this as a workaround. @loxy One possible solution would be the approach of Font Awesome: import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'<fa-icon [icon]="faCoffee"></fa-icon> |
Beta Was this translation helpful? Give feedback.
-
|
That would mean the icon gets into JS bundle and slows down initial load time. That still can be done in Taiga UI, you can import raw source code of SVGs and provide the dictionary to |
Beta Was this translation helpful? Give feedback.
-
|
I'll take a closer look at that. In any case, I now have a solution. Thank you so much! |
Beta Was this translation helpful? Give feedback.
All Taiga UI icons are name
@tui.and then the name of the file, you would need a script to go through your source code and collect all used icon names in an array and then copy only those files then. At the moment there's no tool to do this out of the box.