Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dependency) Icon overhaul / Replace @vicons/tabler & MDI with @tabler/icons-vue #1373

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

gitmotion
Copy link
Contributor

@gitmotion gitmotion commented Oct 27, 2024

@CorentinTh

Related to: #1369

Unsure about the duplication of icons lib, but it seems tree shaked so no big deal for now

Icon overhaul for consistent theming:

  • replaced all existing usages of @vicons/tabler with @tabler/icons-vue and their respective icons
  • replaced material design icons (mdi) with equivalent @tabler/icons-vue icons
  • included changes to all icons for now but can understand if you only want tool icons to be updated instead - let me know if you want me to revert the mdi icon changes
- more efficient and designed for Vue3 (expand comparison)
@tabler/icons-vue @vicons/tabler
Tree-Shaking and Bundle Size This library is designed specifically for Vue 3 and optimized for tree-shaking. It includes each icon as an individual component, making it easy for build tools like Vite or Webpack to only include the icons you actually use, keeping the final bundle size smaller. Also supports tree-shaking but is part of the @vicons collection, a wrapper for multiple icon packs. While it can be tree-shaken, the structure might include more metadata or common code shared across different icon libraries, which may lead to slightly larger bundle sizes when using multiple icons.
Rendering Efficiency These icons are implemented as native Vue components, which allows for more efficient DOM updates and state management. Icons can be customized directly with props like size and color, without requiring additional wrapper components. Provides a consistent API across different icon sets, but the generic approach may lead to slightly more overhead when rendering in Vue. However, it still provides good performance, as it’s designed to be lightweight.
Dependency Size and Installation Generally, this package tends to have fewer dependencies since it’s purpose-built for Vue 3 and Tabler icons. Installation sizes are typically smaller, and it’s less likely to pull in extra dependencies that aren’t essential to its core functionality. Since it’s part of a larger, multi-library package, there can be more dependencies, especially if you’re using other libraries from @vicons. While they’re generally minimal, it might increase installation time and disk usage.

Before Vs. After

Most icons had direct equivalents - below is a visual representation of example changes or updated representations of their former/previous icon with "biggest" differences:
Previous Icons Updated Icons
Previous Icon 1 Updated Icon 1
Previous Icon 2 Updated Icon 2
Previous Icon 3 Updated Icon 3
Previous Icon 4 Updated Icon 4
Previous Icon 5 (dev only) Updated Icon 5 (dev only)

For Devs:

You can now find a full list of all available icons at: https://tabler.io/icons as a single source of truth for icons
image image
tabler.io/icons VSCode Intellisense

Copy link

vercel bot commented Oct 27, 2024

@gitmotion is attempting to deploy a commit to the Corentin Thomasset's Team Team on Vercel.

A member of the Team first needs to authorize it.

@gitmotion gitmotion changed the title fix(dependency) Replace @vicons/tabler with @tabler/icons-vue fix(dependency) Replace @vicons/tabler & material design icons with @tabler/icons-vue Oct 27, 2024
@gitmotion gitmotion changed the title fix(dependency) Replace @vicons/tabler & material design icons with @tabler/icons-vue fix(dependency) Replace @vicons/tabler & material design icons with @tabler/icons-vue (Icon overhaul) Oct 27, 2024
@gitmotion gitmotion force-pushed the fix/dependency-replace-viconstabler-with-tablericonsvue branch 3 times, most recently from 175c412 to 9c4658e Compare October 27, 2024 22:48
@gitmotion gitmotion changed the title fix(dependency) Replace @vicons/tabler & material design icons with @tabler/icons-vue (Icon overhaul) fix(dependency) Replace @vicons/tabler & MDI with @tabler/icons-vue (Icon overhaul) Oct 27, 2024
@gitmotion gitmotion force-pushed the fix/dependency-replace-viconstabler-with-tablericonsvue branch 4 times, most recently from 246e7f3 to 4c1403c Compare October 28, 2024 00:44
@gitmotion gitmotion changed the title fix(dependency) Replace @vicons/tabler & MDI with @tabler/icons-vue (Icon overhaul) fix(dependency) Icon overhaul / Replace @vicons/tabler & MDI with @tabler/icons-vue Oct 28, 2024
@gitmotion gitmotion force-pushed the fix/dependency-replace-viconstabler-with-tablericonsvue branch from 4c1403c to b771381 Compare October 28, 2024 18:24
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant