Geo Icons

geo-icons is a lightweight collection of React components for geographical SVG icons. It allows you to dynamically load and display SVG icons for states, countries, and regions with easy integration and support for styling frameworks like Tailwind CSS.

Installation

To install the package, use npm or yarn:

npm install geo-icons

or

yarn add geo-icons

Features

• Dynamically load SVG icons by geography type (e.g., state, country, region).
• Fully compatible with Tailwind CSS or other styling frameworks.
• Supports modular imports to optimize your application’s bundle size.
• Easily extendable for additional geographies.

Usage

Importing the Component

To use the Geography component, import it and specify the geography type and the name of the geography you want to display.

import React from "react";
import { Geography } from "geo-icons";

const App = () => (
  <div>
    {/* Display a state icon */}
    <Geography
      geography="state"
      name="Alabama"
      className="w-12 h-12 text-blue-500"
    />

    {/* Display a country icon */}
    <Geography
      geography="country"
      name="USA"
      className="w-16 h-16 text-red-600"
    />

    {/* Display a region icon */}
    <Geography
      geography="region"
      name="Northeast"
      className="w-10 h-10 text-green-400"
    />
  </div>
);

export default App;

Props

| Prop | Type | Description | | ----------- | ------------------- | ------------------------------------------------------ | --------- | --------------------------------- | | geography | 'state' | 'country' | 'region' | The type of geography to display. | | name | string | The name of the specific geography (case-insensitive). | | className | string (optional) | Custom class names for styling the SVG. |

Supported Geographies

States

• Alabama
• California
• Texas
• ... (add all supported states here)

Countries

• USA
• Canada
• Mexico
• ... (add all supported countries here)

Regions

• Northeast
• Midwest
• South
• ... (add all supported regions here)

Customization

Styling with Tailwind CSS

Icons are compatible with Tailwind CSS. Use the className prop to apply classes for:

• Size: Control width and height (e.g., w-12 h-12).
• Color: Use text-* classes to change the icon color if the SVGs use currentColor for fill or stroke.

Example:

<Geography
  geography="state"
  name="California"
  className="w-8 h-8 text-gray-600"
/>

Adding New Geographies

To add new geographies, place the corresponding SVG file in the correct folder (svgs/states/, svgs/countries/, or svgs/regions/) and rebuild the package:

npm run build

Contributing

Contributions are welcome! To add new features or improve the package:

1. Fork the repository.
2. Create a new branch.
3. Commit your changes.
4. Submit a pull request.

Development

To test the package locally:

1. Clone the repository:

   git clone https://github.com/your-username/geo-icons.git

2. Install dependencies:

   npm install

3. Build the package:

   npm run build

4. Link the package locally for testing:

   npm link

5. In your test project, link the package:

   npm link geo-icons

License

This project is licensed under the ISC License. See the LICENSE file for details.

Contact

For issues, suggestions, or contributions, please contact [your email or GitHub profile].