rendinjast/iconsax-react

ICONSAX for React and React Native ✌️

iconsax-react's Issues

Wrong icons

I think the Wallet and Wallet1 in the Outline variant have been unintendedly swapped to each other.

Change icons color with className

I'm using react and I want to change the icon color on hover but I can't find how to do this.

Any help?

Twitter icon not available

Could we have twitter added to the icon pack?

Using a single component to add any icons without importing all

Hi,

Thanks for this great package. I would like to ask if there is a component to use that prevents us from importing any icons we want to use.

<Icon name="family" size={20} />

Ram usage

Hello! I found your publication on reddit and decided to try it. My config is latest expo build and I found that single import into minimal working example of icon from your package adds 1gb ram usage to the application. Without it it's 80 mb.

import {StatusBar} from "expo-status-bar";
import React from "react";
import {StyleSheet, Text, View} from "react-native";

import {EmojiHappy} from "iconsax-react-native"; // Without this line ram usage is 80mb

export default function App() {
    return (
        <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

Wrong icon name

The HambergerMenu should be HamburgerMenu.

Fill property not working

I've tried to use the fill property on the icon but its not being reflected on the svg

Will there be updates?

Hi guys, I thought the lib was wonderful, it's helping me a lot!

I would like to know if there will be new icon updates?

Can't Change the Stroke Width

Is there any possible way to change the width of the icon stroke?

Linear and Bold variants of some icons are swapped

Hello. The same problem as in this issue (linear and bold variants swapped) occurs with:

• BagCross and BagCross1
• BatteryEmpty and BatteryEmpty1
• Link1 and Link2
• Maximize and Maximize1
• Note and Note1
• Shapes and Shapes1

Also, the Mobile linear variant is not centered.

Wrong icon name

In version ^0.0.7. The names of these 2 icons are interchangeable. SearchStatus1 and SearchStatus.

Mail/Envelope Icon

There are no mail or envelope icons in the pack. Can we get one?

[Critical] Does not work in production build

Hello, everything is okay in dev build with expo, but when I tried to push app through testflight users it crashes on start.
So I started debugging, turned on production mode for expo dev client and found that everything works until I include at least 1 icon.
The error in console:

TypeError: can't assign to property "isRequired" on Symbol.for("react.fragment"): not an object

Now I'm trying to find out the exact reason. I also tried empty project with only 1 include of icon and it fails.

Production bundle returns all 6000 icons even when I import only 1 icon

As a dev, I would like to use iconsax library and I would like to use some of the icons, in my case, only one icon:

import { Folder } from 'iconsax-react';

...
return <Folder className={styles.icon} color={iconColor} variant="Bulk" aria-hidden />;
...

when I look at the generated bundle I expect to see one icon with the variant Bulk being generated, but instead, I see that all 6000 icons are included. This brings a lot of performance issues.

Looking at the Chrome DevTools I can see that the icons chunk takes 16 seconds to load when it is not in cache.

Solution
To include in the bundle only the icons used. Maybe the import should be something like this

import Folder from 'iconsax-react/Folder';

This way, we could even use it as lazy, please have a look at my simplified code:

import React, { Suspense, lazy } from 'react';

const Folder = lazy(() => import('iconsax-react/Folder')); <--- Lazy import

...
return (
    <Suspense fallback={null}>
        <Folder className={styles.icon} color={iconColor} variant="Bulk" aria-hidden />
    </Suspense>;
)
...