Icon Delivery System

Description

The Icon Delivery System is a lightweight package designed to provide developers with dynamic SVG icons based on a requested name. It offers an easy and efficient way to integrate SVG icons into React applications by fetching them based on specific identifiers. This system allows for scalable vector graphics that can be embedded directly into your components, maintaining flexibility and responsiveness in your UI.

Table of Contents

• Installation
• Usage
  • Fetching Icons by Name
  • Using the DynamicIcon Component
• Features
• API
  • 1. getIconByName(name: string)
  • 2. DynamicIcon Component
• Screenshots
• Contributing
• License

Installation

To use the Icon Delivery System in your project, follow these steps:

1. Install the Package:

    npm install icon-delivery

OR

1. Clone the Repository:

   git clone https://github.com/username/icon-delivery.git

2. Navigate to the Project Directory:

   cd icon-delivery

3. Install Dependencies:

   npm install

4. Start the Development Server: To run the package locally, use the development server:

   npm start

You are now ready to use the Icon Delivery System in your React project.

Usage

Once the package is installed and running, you can integrate it into your project by using the provided functions and components.

Fetching Icons by Name

You can fetch SVG icons dynamically by calling the getIconByName function with the icon's name:

import { getIconByName } from 'icon-delivery';

async function fetchIcon() {
    const icon = await getIconByName('React');
    console.log(icon); // Logs the SVG for the React icon
}

OR

import { getIconByName } from './src/index';

async function fetchIcon() {
    const icon = await getIconByName('React');
    console.log(icon); // Logs the SVG for the React icon
}

Using the DynamicIcon Component

For easier integration into your UI, you can also use the DynamicIcon component, which renders the SVG icon based on the iconName prop.

import { DynamicIcon } from 'icon-delivery';

const App = () => {
    return (
        <div>
            <h1>Welcome to the Icon Delivery System</h1>
            <DynamicIcon iconName="React" />
        </div>
    );
};

export default App;

OR

import { DynamicIcon } from './components/DynamicIcon';

const App = () => {
    return (
        <div>
            <h1>Welcome to the Icon Delivery System</h1>
            <DynamicIcon iconName="React" />
        </div>
    );
};

export default App;

This will dynamically render the requested icons in your React application.

Features

• Dynamic Icon Fetching: Fetch SVG icons dynamically based on the provided name.
• React Component Integration: A simple DynamicIcon component to integrate SVGs into your app.
• Lightweight: Optimized for performance and minimal overhead.
• Scalable: SVGs are scalable and responsive, perfect for modern web applications.

Screenshots

Here is a screenshot of the DynamicIcon component in action:

Add screenshot here

Contributing

We welcome contributions to the Icon Delivery System! If you would like to contribute, please follow these steps:

1. Fork the repository on GitHub.
2. Clone your forked repository locally:

   git clone https://github.com/yourusername/icon-delivery.git

3. Create a new branch for your feature:

   git checkout -b feature-branch

4. Make your changes and commit them:

   git commit -m "Add new feature"

5. Push your changes to your branch:

   git push origin feature-branch

6. Open a Pull Request on GitHub, and we will review it as soon as possible.

License

This project is licensed under the MIT License - see the LICENSE file for details.