📌 Icons কেন ব্যবহার করবেন?

Icons অ্যাপ UI-কে আরও সুন্দর, আধুনিক এবং ব্যবহারবান্ধব করে তোলে। এগুলো টেক্সট-এর জায়গায় Visual Meaning দেয়, যেমন:

• Navigation Icons (Home, Settings, Profile)
• Button Icons (Send, Add, Delete)
• Status Indicators (Success, Error, Warning)
• Social Media Icons (Facebook, Google, Twitter Login)

📦 React Native-এ জনপ্রিয় Icon Library

React Native-এ সবচেয়ে জনপ্রিয় লাইব্রেরি হলো:

⚙️ Installation

npm install react-native-vector-icons

    

Expo ব্যবহার করলে অতিরিক্ত কনফিগ লাগবে না; এটি Already Built-in আছে।

🧩 Importing Icons

কোন Icon Pack ব্যবহার করতে চান তার উপর ভিত্তি করে import করতে হবে।

import Icon from 'react-native-vector-icons/MaterialIcons';

    

অন্য কিছু Popular Packs:

• MaterialIcons
• FontAwesome
• Ionicons
• Feather
• AntDesign

🎨 Simple Icon Usage Example

import { View } from "react-native";
import Icon from "react-native-vector-icons/Feather";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Icon name="home" size={40} color="#008080" />
    </View>
  );
}

    

🛎️ Button-এর সাথে Icon ব্যবহার

Button-এর UI আরও সুন্দর করতে Icon ব্যবহার করা খুব সাধারণ।

import { TouchableOpacity, Text, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity 
        style={{
          flexDirection: "row",
          alignItems: "center",
          backgroundColor: "#008080",
          padding: 12,
          borderRadius: 6
        }}
      >
        <Icon name="send" size={22} color="white" />
        <Text style={{ color: "white", marginLeft: 10, fontSize: 16 }}>
          Send Message
        </Text>
      </TouchableOpacity>
    </View>
  );
}

    

🔗 Social Media Icons Example

Login Screen-এ Icon ব্যবহার বেশ Effective:

import { View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

export default function App() {
  return (
    <View style={{ flexDirection: "row", gap: 20, padding: 20 }}>
      <Icon name="facebook" size={40} color="#1877F2" />
      <Icon name="google" size={40} color="#DB4437" />
      <Icon name="github" size={40} color="#000" />
    </View>
  );
}

    

💡 Icons ব্যবহার করার কিছু Best Practice

• Icon-এর size সর্বদা UI-এর সাথে match করে সেট করুন।
• Colors Theme অনুযায়ী ঠিক রাখুন (যেমন: teal #008080)।
• TouchableOpacity + Icon ব্যবহার করলে UI আরও উন্নত হয়।
• IconPack পরিবর্তন করলে import path অবশ্যই আপডেট করুন।
• Text-এর সাথে Icon align করতে flexDirection ব্যবহার করুন।