zi-icon 1.0.0

package/README.md

@@ -0,0 +1,120 @@
+
+
+
+# My Custom Icons
+
+A highly optimized, tree-shakeable SVG icon library for React. Built with TypeScript, exported in ESM and CJS formats, and featuring a built-in Next.js interactive documentation gallery.
+
+This library supports both **monochrome** icons (which automatically inherit CSS colors) and **colored** icons (which preserve their original multi-color palettes).
+
+
+
+## 📦 Installation (For Consumers)
+
+Install the library via your preferred package manager:
+
+```bash
+npm install zi-icons
+# or
+yarn add zi-icons
+# or
+pnpm add zi-icons
+
+```
+
+### Usage
+
+TypeScript
+
+```
+import { AirplaneLanding, ColoredLogo } from 'zi-icons';
+
+export default function App() {
+  return (
+    <div>
+      {/* Monochrome icons inherit CSS color and accept sizing props */}
+      <AirplaneLanding size="ls" style={{ color: 'red' }} />
+      
+      {/* Colored icons retain their original designer colors */}
+      <ColoredLogo size="md" />
+    </div>
+  );
+}
+
+```
+
+**Available Size Props:** `xs` (16px), `sm` (20px - default), `md` (24px), `ls` (32px), `xl` (64px).
+
+----------
+
+## 🛠️ Development & Maintenance Guide
+
+This repository contains both the source code for the npm library and a Next.js application used to preview the icons.
+
+### 1. Adding New Icons
+
+Do **not** manually create React components. Instead, place your raw `.svg` files into the appropriate folder:
+
+-   📂 **`raw_icons/monochrome/`**: Place line-art or solid single-color icons here. The build process will forcefully strip hardcoded colors and apply `fill="currentColor"`, allowing them to react to CSS styles.
+    
+-   📂 **`raw_icons/colored/`**: Place multi-colored icons here. The build process will optimize the SVG but preserve all original hex codes and colors.
+    
+
+### 2. Generating the React Components
+
+Once your `.svg` files are in place, run the generation script:
+
+```
+npm run generate:icons
+```
+
+**What this does:** This uses `@svgr/cli` to read the SVGs, optimize them using SVGO, wrap them in a custom React template with strict TypeScript definitions, and output them to `src/lib/icons/`.
+
+### 3. Previewing the Icons (Documentation Site)
+
+To view the interactive gallery, search for icons, and test click-to-copy functionality, start the Next.js development server:
+
+```
+npm run dev
+```
+
+Open [http://localhost:3000](https://www.google.com/search?q=http://localhost:3000) in your browser.
+
+### 4. Building the NPM Library
+
+When you are ready to publish a new version of the library, run the build command:
+```
+npm run build:lib
+```
+
+**What this does:** This uses `tsup` to bundle the generated React components inside `src/lib/icons/index.ts`. It outputs highly optimized files to the `dist/` directory in three formats:
+
+-   `index.js` (CommonJS for older Node environments)
+    
+-   `index.mjs` (ES Modules for modern bundlers and tree-shaking)
+    
+-   `index.d.ts` (TypeScript definition files)
+    
+
+### 5. Publishing to NPM
+
+1.  Update the `"version"` in `package.json` (e.g., `"1.0.1"`).
+    
+2.  Run `npm run build:lib` to ensure the `dist/` folder is up to date.
+    
+3.  Run `npm publish`.
+    
+
+----------
+
+## 🏗️ Architecture & Tools Used
+
+-   **[SVGR](https://react-svgr.com/):** Transforms raw SVG files into React components automatically. We use custom templates (`svgr-template.mono.js` and `svgr-template.js`) to ensure strict prop typing and proper color inheritance.
+    
+-   **SVGO:** The underlying optimizer for SVGR. It reduces file size by stripping unnecessary XML tags, metadata, and (for monochrome icons) hardcoded designer colors.
+    
+-   **[tsup](https://tsup.egoist.dev/):** A zero-config, blazing fast TypeScript bundler powered by esbuild. We use it to compile the final npm package into ESM and CJS formats so it is instantly compatible with any modern or legacy React project.
+    
+-   **Next.js (App Router):** Used purely as the documentation and gallery frontend, making it easy to search, test, and copy imports for the icons. (Built via `npm run build:docs`).
+    
+-   **React 17+ Compatibility:** The library is compiled with standard React paradigms (`peerDependencies` include `>=17.0.0`) to ensure it works in both older and bleeding-edge (React 19) codebases without throwing Multiple React Instance or Invalid Hook Call errors.

package/dist/index.d.mts

@@ -0,0 +1,184 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps, Ref } from 'react';
+
+interface IconProps$t extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplaneLanding: ({ size, style, width, height, ref, ...props }: IconProps$t) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$s extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplaneTakeoff: ({ size, style, width, height, ref, ...props }: IconProps$s) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$r extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplane: ({ size, style, width, height, ref, ...props }: IconProps$r) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$q extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgArrowCounterClockwise: ({ size, style, width, height, ref, ...props }: IconProps$q) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$p extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgArrowsCounterClockwise: ({ size, style, width, height, ref, ...props }: IconProps$p) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$o extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgBell: ({ size, style, width, height, ref, ...props }: IconProps$o) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$n extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgCalendarDots: ({ size, style, width, height, ref, ...props }: IconProps$n) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$m extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgChartLineUp: ({ size, style, width, height, ref, ...props }: IconProps$m) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$l extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgCheckCircle: ({ size, style, width, height, ref, ...props }: IconProps$l) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$k extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgDeviceRotate: ({ size, style, width, height, ref, ...props }: IconProps$k) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$j extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgDotsThreeVertical: ({ size, style, width, height, ref, ...props }: IconProps$j) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$i extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgExport: ({ size, style, width, height, ref, ...props }: IconProps$i) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$h extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgEyeSlash: ({ size, style, width, height, ref, ...props }: IconProps$h) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$g extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgEye: ({ size, style, width, height, ref, ...props }: IconProps$g) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$f extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgFlag: ({ size, style, width, height, ref, ...props }: IconProps$f) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$e extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgHouse: ({ size, style, width, height, ref, ...props }: IconProps$e) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$d extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMagnifyingGlass: ({ size, style, width, height, ref, ...props }: IconProps$d) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$c extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMapPin: ({ size, style, width, height, ref, ...props }: IconProps$c) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$b extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMinusCircle: ({ size, style, width, height, ref, ...props }: IconProps$b) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$a extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMoneyWavy: ({ size, style, width, height, ref, ...props }: IconProps$a) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$9 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgNotePencil: ({ size, style, width, height, ref, ...props }: IconProps$9) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$8 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgNote: ({ size, style, width, height, ref, ...props }: IconProps$8) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$7 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgPhone: ({ size, style, width, height, ref, ...props }: IconProps$7) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$6 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgPlusCircle: ({ size, style, width, height, ref, ...props }: IconProps$6) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$5 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgSteeringWheel: ({ size, style, width, height, ref, ...props }: IconProps$5) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$4 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgSuitcaseSimple: ({ size, style, width, height, ref, ...props }: IconProps$4) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$3 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgTrash: ({ size, style, width, height, ref, ...props }: IconProps$3) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$2 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgXCircle: ({ size, style, width, height, ref, ...props }: IconProps$2) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$1 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgX: ({ size, style, width, height, ref, ...props }: IconProps$1) => react_jsx_runtime.JSX.Element;
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgWhatsapp: ({ size, style, width, height, ref, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+export { SvgAirplane as Airplane, SvgAirplaneLanding as AirplaneLanding, SvgAirplaneTakeoff as AirplaneTakeoff, SvgArrowCounterClockwise as ArrowCounterClockwise, SvgArrowsCounterClockwise as ArrowsCounterClockwise, SvgBell as Bell, SvgCalendarDots as CalendarDots, SvgChartLineUp as ChartLineUp, SvgCheckCircle as CheckCircle, SvgDeviceRotate as DeviceRotate, SvgDotsThreeVertical as DotsThreeVertical, SvgExport as Export, SvgEye as Eye, SvgEyeSlash as EyeSlash, SvgFlag as Flag, SvgHouse as House, SvgMagnifyingGlass as MagnifyingGlass, SvgMapPin as MapPin, SvgMinusCircle as MinusCircle, SvgMoneyWavy as MoneyWavy, SvgNote as Note, SvgNotePencil as NotePencil, SvgPhone as Phone, SvgPlusCircle as PlusCircle, SvgSteeringWheel as SteeringWheel, SvgSuitcaseSimple as SuitcaseSimple, SvgTrash as Trash, SvgWhatsapp as Whatsapp, SvgX as X, SvgXCircle as XCircle };

package/dist/index.d.ts

@@ -0,0 +1,184 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps, Ref } from 'react';
+
+interface IconProps$t extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplaneLanding: ({ size, style, width, height, ref, ...props }: IconProps$t) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$s extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplaneTakeoff: ({ size, style, width, height, ref, ...props }: IconProps$s) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$r extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgAirplane: ({ size, style, width, height, ref, ...props }: IconProps$r) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$q extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgArrowCounterClockwise: ({ size, style, width, height, ref, ...props }: IconProps$q) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$p extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgArrowsCounterClockwise: ({ size, style, width, height, ref, ...props }: IconProps$p) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$o extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgBell: ({ size, style, width, height, ref, ...props }: IconProps$o) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$n extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgCalendarDots: ({ size, style, width, height, ref, ...props }: IconProps$n) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$m extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgChartLineUp: ({ size, style, width, height, ref, ...props }: IconProps$m) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$l extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgCheckCircle: ({ size, style, width, height, ref, ...props }: IconProps$l) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$k extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgDeviceRotate: ({ size, style, width, height, ref, ...props }: IconProps$k) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$j extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgDotsThreeVertical: ({ size, style, width, height, ref, ...props }: IconProps$j) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$i extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgExport: ({ size, style, width, height, ref, ...props }: IconProps$i) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$h extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgEyeSlash: ({ size, style, width, height, ref, ...props }: IconProps$h) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$g extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgEye: ({ size, style, width, height, ref, ...props }: IconProps$g) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$f extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgFlag: ({ size, style, width, height, ref, ...props }: IconProps$f) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$e extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgHouse: ({ size, style, width, height, ref, ...props }: IconProps$e) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$d extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMagnifyingGlass: ({ size, style, width, height, ref, ...props }: IconProps$d) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$c extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMapPin: ({ size, style, width, height, ref, ...props }: IconProps$c) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$b extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMinusCircle: ({ size, style, width, height, ref, ...props }: IconProps$b) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$a extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgMoneyWavy: ({ size, style, width, height, ref, ...props }: IconProps$a) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$9 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgNotePencil: ({ size, style, width, height, ref, ...props }: IconProps$9) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$8 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgNote: ({ size, style, width, height, ref, ...props }: IconProps$8) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$7 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgPhone: ({ size, style, width, height, ref, ...props }: IconProps$7) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$6 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgPlusCircle: ({ size, style, width, height, ref, ...props }: IconProps$6) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$5 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgSteeringWheel: ({ size, style, width, height, ref, ...props }: IconProps$5) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$4 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgSuitcaseSimple: ({ size, style, width, height, ref, ...props }: IconProps$4) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$3 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgTrash: ({ size, style, width, height, ref, ...props }: IconProps$3) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$2 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgXCircle: ({ size, style, width, height, ref, ...props }: IconProps$2) => react_jsx_runtime.JSX.Element;
+
+interface IconProps$1 extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgX: ({ size, style, width, height, ref, ...props }: IconProps$1) => react_jsx_runtime.JSX.Element;
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    size?: "xs" | "sm" | "md" | "ls" | "xl";
+    ref?: Ref<SVGSVGElement>;
+}
+declare const SvgWhatsapp: ({ size, style, width, height, ref, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+export { SvgAirplane as Airplane, SvgAirplaneLanding as AirplaneLanding, SvgAirplaneTakeoff as AirplaneTakeoff, SvgArrowCounterClockwise as ArrowCounterClockwise, SvgArrowsCounterClockwise as ArrowsCounterClockwise, SvgBell as Bell, SvgCalendarDots as CalendarDots, SvgChartLineUp as ChartLineUp, SvgCheckCircle as CheckCircle, SvgDeviceRotate as DeviceRotate, SvgDotsThreeVertical as DotsThreeVertical, SvgExport as Export, SvgEye as Eye, SvgEyeSlash as EyeSlash, SvgFlag as Flag, SvgHouse as House, SvgMagnifyingGlass as MagnifyingGlass, SvgMapPin as MapPin, SvgMinusCircle as MinusCircle, SvgMoneyWavy as MoneyWavy, SvgNote as Note, SvgNotePencil as NotePencil, SvgPhone as Phone, SvgPlusCircle as PlusCircle, SvgSteeringWheel as SteeringWheel, SvgSuitcaseSimple as SuitcaseSimple, SvgTrash as Trash, SvgWhatsapp as Whatsapp, SvgX as X, SvgXCircle as XCircle };