@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

# 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:

# npm
npm install react-native-svg

# yarn
yarn add react-native-svg

# pnpm
pnpm add react-native-svg

Usage

React Web (including Next.js)

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

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

React Native

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:

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:

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:

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:

// 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:

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

# 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:

<CarStrokeMin size={48} />

The default size is 24px.

Custom Colors Not Applying

Ensure you're using the color prop correctly:

<CarStrokeMin color="#FF5500" />

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