Package Exports

remixicon-react-bundler
remixicon-react-bundler/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remixicon-react-bundler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

remixicon-react-bundler

A lightweight, performance-optimized React bundler for Remix Icon SVGs. Instead of importing the entire Remix Icon package or relying on CDN, this library dynamically loads only the icons you use, dramatically reducing bundle size and improving offline availability.

🚀 Features

✅ All Remix Icon SVGs Included – Latest SVGs are bundled as string constants.
🧠 Type-Safe Icon Names – Intellisense support with IconName union types for better DX.
🎯 Optimized React Component – Only load what you need, when you need it.
🎨 Customizable Colors – Supports an array of colors for multi-path SVGs.
📏 Resizable Icons – Control icon size via a simple size prop.
📦 Minimal Bundle Size – Uses dynamic imports and manual path rendering.

Screenshot 2025-05-16 at 1 08 55 AM

📦 Installation

npm install remixicon-react-bundler
# or
yarn add remixicon-react-bundler

🧩 Usage

import React from "react";
import { SvgIcon } from "remixicon-react-bundler";

function App() {
  return (
    <div>
      <SvgIcon icon="arrow-right-line" size={32} color={["#ff0000"]} />
    </div>
  );
}

🧪 Props

Prop	Type	Default	Description
icon	`IconName`	Required	Icon name string with full intellisense support.
size	`number \| string`	`24`	Size of the icon in pixels (used for both height and width).
color	`string[]`	`["currentColor"]`	Array of color strings applied to each `<path>` in the SVG.

⚙️ How It Works

Type-Safe Icon Tokens All available icon names are exported as a TypeScript union type, ensuring type safety and editor support.
SVG Constants as Modules All SVG files are converted to string constants and saved as .ts files in the icons directory during build time.
Dynamic Import The SvgIcon component uses dynamic import() to fetch the string for the given icon on-demand.
Path Extraction SVG strings are parsed using RegExp to extract d attributes manually.
Color Injection Custom colors provided through the color prop are mapped to individual paths in order.

🧑‍💻 Contributing

Clone the repo

Run npm install

Build and test your changes

Submit a PR