📱 React Native (TypeScript) এ Icons & Fonts ব্যবহার

একটি ভালো Mobile App শুধু functionality দিয়েই সুন্দর হয় না, Icons ও Custom Fonts অ্যাপকে করে তোলে আরও Professional ও User-Friendly। এই লেসনে আমরা শিখবো কীভাবে File-based React Native (TypeScript) প্রোজেক্টে Icons এবং Fonts ব্যবহার করা যায়।

🔹 1. React Native এ Icons কেন ব্যবহার করবো?

UI আরও সুন্দর ও modern দেখায়
User কম text পড়েও সহজে বুঝতে পারে
Professional app experience দেয়
Buttons, Tabs, Menus আরও clear হয়

🔹 2. জনপ্রিয় Icon Library – react-native-vector-icons

React Native-এ সবচেয়ে বেশি ব্যবহৃত icon library হলো:

MaterialIcons
FontAwesome
Ionicons
AntDesign
Feather

📦 Installation (TypeScript Project)

npm install react-native-vector-icons

🔹 3. File-based Structure (Icons)

src/
 ├── components/
 │    └── AppIcon.tsx
 ├── screens/
 │    └── HomeScreen.tsx
 └── App.tsx

🧩 AppIcon.tsx

import React from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';

interface Props {
  name: string;
  size?: number;
  color?: string;
}

const AppIcon: React.FC<Props> = ({
  name,
  size = 24,
  color = 'teal',
}) => {
  return <Ionicons name={name} size={size} color={color} />;
};

export default AppIcon;

🖥️ HomeScreen.tsx

import React from 'react';
import { View, Text } from 'react-native';
import AppIcon from '../components/AppIcon';

const HomeScreen = () => {
  return (
    <View style={{ alignItems: 'center', marginTop: 50 }}>
      <AppIcon name="home" size={40} color="teal" />
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

📱 Output:

স্ক্রিনে একটি 🏠 Home Icon দেখাবে এবং নিচে Home Screen লেখা থাকবে।

🔹 4. Custom Fonts কেন ব্যবহার করবো?

Brand identity তৈরি হয়
Text আরও readable হয়
App দেখতে premium লাগে

📂 Fonts File Structure

assets/
 └── fonts/
     ├── Poppins-Regular.ttf
     └── Poppins-Bold.ttf

⚙️ react-native.config.js

module.exports = {
  assets: ['./assets/fonts'],
};

npx react-native-asset

✍️ Font ব্যবহার (TypeScript)


  React Native Font Example