@karrotmarket/lynx-icon-rsbuild-plugin

@karrotmarket/lynx-icon-rsbuild-plugin

All-in-one Rsbuild plugin for Lynx icons - no additional loader required!

Automatically converts SVG icons from @karrotmarket/assets-monochrome and @karrotmarket/assets-multicolor to WebP base64 format for optimal performance in Lynx applications.

Features

• ✅ Zero configuration: Just install and add to plugins
• ✅ All-in-one: Includes loader functionality, no separate packages needed
• ✅ Automatic SVG handling: Detects and processes Lynx icons automatically
• ✅ Type-safe: Full TypeScript support with autocomplete
• ✅ Customizable: Control image quality and size
• ✅ High performance: WebP format with optimized compression

Installation

yarn add -D @karrotmarket/lynx-icon-rsbuild-plugin

Usage

Basic Setup

Simply add the plugin to your Rsbuild config:

// lynx.config.ts
import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
import { pluginLynxIcon } from '@karrotmarket/lynx-icon-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
    pluginLynxIcon(), // 👈 Add this!
  ],
});

That's it! No additional rspack configuration needed.

With Options

import { pluginLynxIcon } from '@karrotmarket/lynx-icon-rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginLynxIcon({
      maxSize: 72,      // Maximum icon size (default: 72)
      quality: 90,      // WebP quality 0-100 (default: 90)
    }),
  ],
});

Using Icons in Your App

import { IconAppleFill } from '@karrotmarket/lynx-monochrome-icon';
import { IconApple } from '@karrotmarket/lynx-multicolor-icon';

function MyComponent() {
  return (
    <view>
      {/* Monochrome icon with color */}
      <IconAppleFill size={24} color="#FF6B00" />

      {/* Multicolor icon (uses original colors) */}
      <IconApple size={32} />
    </view>
  );
}

Migration from Manual Configuration

Before (manual rspack config):

// lynx.config.ts
export default defineConfig({
  tools: {
    rspack(config) {
      // 20+ lines of manual configuration...
      config.module.rules = config.module.rules.map((rule) => {
        // SVG exclude logic...
      });
      config.module.rules.unshift({
        test: /\.svg$/,
        use: { loader: './icon-loader.js' }
      });
      return config;
    },
  },
});

After (plugin):

// lynx.config.ts
import { pluginLynxIcon } from '@karrotmarket/lynx-icon-rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginLynxIcon(),  // Just one line!
  ],
});

Options

LynxIconPluginOptions

interface LynxIconPluginOptions {
  /**
   * Maximum size for icon conversion (default: 72px)
   * @default 72
   */
  maxSize?: number;

  /**
   * WebP quality (0-100, default: 90)
   * @default 90
   */
  quality?: number;

  /**
   * Include additional paths beyond default @karrotmarket/assets-*
   * @default []
   */
  includePaths?: RegExp[];
}

How It Works

• Automatic Detection: Plugin detects SVG files from @karrotmarket/assets-monochrome/svg/ and @karrotmarket/assets-multicolor/svg/
• SVG Exclusion: Automatically excludes these SVGs from default asset handling
• WebP Conversion: Converts SVGs to WebP format using Sharp
• Base64 Encoding: Encodes as base64 data URL for inline usage
• Zero Runtime: All conversion happens at build time

Related Packages

• @karrotmarket/lynx-monochrome-icon - Monochrome icon components
• @karrotmarket/lynx-multicolor-icon - Multicolor icon components
• @karrotmarket/assets-monochrome - Raw monochrome SVG assets
• @karrotmarket/assets-multicolor - Raw multicolor SVG assets

License

MIT