akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 952 forks source link

All the icons from `EvaIconsPack` are being bundled even though i'm using none #1771

Open rawatnaresh opened 11 months ago

rawatnaresh commented 11 months ago

💬 Question

My app setup looks like this.

App.js

import React from 'react';
import * as eva from '@eva-design/eva';
import {
  ApplicationProvider,
  IconRegistry,
  Layout,
  Text,
} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text category="h1">HOME</Text>
  </Layout>
);

export default () => (
  <>
    <IconRegistry icons={EvaIconsPack} />

    <ApplicationProvider {...eva} theme={eva.light}>
      <HomeScreen />
    </ApplicationProvider>
  </>
);

package.json

{
  "name": "Test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "bundle:analysis": "visualize-bundle -a",
    "test": "jest"
  },
  "dependencies": {
    "@eva-design/eva": "^2.2.0",
    "@ui-kitten/components": "^5.3.1",
    "@ui-kitten/eva-icons": "^5.3.1",
    "react": "18.2.0",
    "react-native": "0.72.0",
    "react-native-svg": "^13.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "@ui-kitten/metro-config": "^5.3.1",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4",
    "visualize-bundle": "^1.4.0"
  },
  "engines": {
    "node": ">=16"
  }
}

When I analyze the bundle of the app it shows all the icons from the evaIcons are bundled. Is there a way I can only load the icons I'm using?

Screenshot 2023-08-01 at 12 20 59

Also, Will I get the same behaviour If I use 3rd party Icons such as Material Icons from react-native-vector-icons?

UI Kitten and Eva version

Package Version
@eva-design/eva ^2.2.0
@ui-kitten/components ^5.3.1
@ui-kitten/eva-icons ^5.3.1