npm package: @montarist/vignetim-icons
Description: SVG icons as React components for web and React Native
Author: Montarist Bilisim
Latest version: 1.0.11

# @montarist/vignetim-icons

A component library for using SVG icons in React and React Native applications.

## Features

-   60+ SVG icons
-   Support for both React (web) and React Native
-   Customizable size and color
-   TypeScript support
-   Automatic icon generation system

## Installation

```bash
# npm
npm install @montarist/vignetim-icons

# yarn
yarn add @montarist/vignetim-icons

# pnpm
pnpm add @montarist/vignetim-icons
```

For React Native, you'll also need to install `react-native-svg`:

```bash
# npm
npm install react-native-svg

# yarn
yarn add react-native-svg

# pnpm
pnpm add react-native-svg
```

## Usage

### React Web (including Next.js)

```jsx
import { CarStrokeMin, VanFilledBlackMin } from '@montarist/vignetim-icons';

function App() {
	return (
		<div>
			<CarStrokeMin size={24} color="#000000" />
			<VanFilledBlackMin size={32} color="#FF0000" />
		</div>
	);
}
```

### React Native

```jsx
import { CarStrokeMinNative, VanFilledBlackMinNative } from '@montarist/vignetim-icons';
import { View } from 'react-native';

function App() {
	return (
		<View>
			<CarStrokeMinNative size={24} color="#000000" />
			<VanFilledBlackMinNative size={32} color="#FF0000" />
		</View>
	);
}
```

## Next.js Configuration

This package works out of the box with Next.js, but if you're using Next.js with custom webpack configuration, you might need to make sure SVGs are properly handled:

### For Next.js 13+ (App Router)

No additional configuration is needed for Next.js 13+ with the App Router. Icons should work right away.

### For Next.js with Pages Router (or custom config)

Make sure your `next.config.js` includes:

```js
const nextConfig = {
	webpack(config) {
		// Add SVG support if needed
		config.module.rules.push({
			test: /\.svg$/,
			use: ['@svgr/webpack'],
		});

		return config;
	},
};

module.exports = nextConfig;
```

And install the required dependency:

```bash
npm install --save-dev @svgr/webpack
```

## React Native Configuration

### For React Native CLI projects

No additional configuration is needed as this package uses `react-native-svg`. Just make sure you have `react-native-svg` installed.

### For Expo projects

Expo supports `react-native-svg` out of the box with Expo SDK 33 and higher. If you're using an older version, run:

```bash
expo install react-native-svg
```

### For React Native Web

If you're using React Native Web, you'll need to add the following to your webpack configuration:

```js
// In your webpack config
module.exports = {
	// ...other config
	resolve: {
		// ...other resolve config
		alias: {
			// ...other aliases
			'react-native-svg': 'react-native-svg-web',
		},
	},
};
```

And install the necessary dependency:

```bash
npm install react-native-svg-web
```

## Adding New Icons

To add a new icon:

1. Place the SVG file in the `src/icons/` directory
2. Run `npm run build` command

File naming convention:

-   File names should be in kebab-case (e.g., `my-new-icon.svg`)
-   Component names are automatically generated in PascalCase (e.g., `MyNewIcon`)

## Props

### IconProps (React Web)

| Prop    | Type          | Description                           |
| ------- | ------------- | ------------------------------------- |
| size    | number/string | Icon size in pixels                   |
| color   | string        | Icon color (hex, rgb, etc.)           |
| ...rest | -             | Other props passed to the SVG element |

### NativeIconProps (React Native)

| Prop    | Type          | Description                             |
| ------- | ------------- | --------------------------------------- |
| size    | number/string | Icon size in pixels                     |
| color   | string        | Icon color (hex, rgb, etc.)             |
| ...rest | -             | Other props passed to the Svg component |

## Available Icons

This package includes the following icons (and more):

-   Vehicle icons: Car, Van, Bus, Truck, Motorcycle, etc.
-   Infrastructure icons: Bridge, Tunnel, etc.
-   Various styles: Stroke, Filled (Black/White) versions

Import them using their PascalCase names (e.g., `CarStrokeMin`, `VanFilledBlackMin`).
For React Native, append "Native" to the import name (e.g., `CarStrokeMinNative`).

## Development

```bash
# Install dependencies
npm install

# Generate icons and build the package
npm run build
```

## How It Works

The build process:

1. Scans all SVG files in the `src/icons/` directory
2. Converts them to React components for web
3. Converts them to React Native components using `react-native-svg`
4. Exports all components through a central index file
5. Bundles everything using Rollup

## Troubleshooting

### SVG Icons Not Rendering in React Native

Make sure:

-   You're importing the Native version (e.g., `CarStrokeMinNative`)
-   You have `react-native-svg` installed
-   For Expo, you're using SDK 33 or higher

### Icons Too Small or Large

All icons accept a `size` prop that can be adjusted:

```jsx
<CarStrokeMin size={48} />
```

The default size is 24px.

### Custom Colors Not Applying

Ensure you're using the `color` prop correctly:

```jsx
<CarStrokeMin color="#FF5500" />
```

Some icons may have fixed colors in certain parts of their design.