@karrotmarket/lynx-multicolor-icon

Lynx multicolor icons for Seed Design System.

Installation

yarn add @karrotmarket/lynx-multicolor-icon
yarn add -D @karrotmarket/lynx-icon-config

Setup

import { defineConfig } from '@lynx-js/rspeedy'
import { applyLynxIconConfig } from '@karrotmarket/lynx-icon-config'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],

  tools: {
    rspack(config) {
      applyLynxIconConfig(config)
      return config
    },
  },
})

Usage

import { useMainThreadRef } from '@lynx-js/react';
import type { MainThread } from '@lynx-js/types';
import { IconApple, IconCamera } from '@karrotmarket/lynx-multicolor-icon';

function MyComponent() {
  const iconRef = useMainThreadRef<MainThread.Element>(null);

  return (
    <view>
      {/* Default size (24px) - uses original multicolor */}
      <IconApple />

      {/* Override the default size */}
      <IconApple size={32} />

      {/* style.width / style.height override size individually */}
      <IconApple size={32} style={{ width: '16px', height: '16px' }} />

      {/* Ref + passthrough props */}
      <IconCamera
        ref={iconRef}
        size={32}
        className="icon-camera"
        mode="aspectFit"
        bindload={(event) => {
          console.log(event);
        }}
      />
    </view>
  );
}

Props

IconProps

interface IconProps {
  size?: number;       // Default: 24
  className?: string;
  style?: ImageProps['style'];
  // Plus Lynx <image> props/directives except src, ref, main-thread:ref, tint-color
}

• size: Icon size in pixels (default: 24)
• className: Class name forwarded to the underlying <image>
• style: Optional Lynx <image> style object. width and height override the fallback size individually when provided.
• ref: Forwarded to the underlying <image> as MainThread.Element
• other props: Lynx <image> props and directives such as mode, placeholder, bindload

Note: Multicolor icons keep their original colors and do not accept color or tint-color.

Related Packages

• @karrotmarket/lynx-icon-config - Rspack config helper for Lynx icons (recommended)
• @karrotmarket/lynx-icon-loader - Rspack/Webpack loader for Lynx icons (legacy)
• @karrotmarket/assets-multicolor - Raw SVG assets

License

MIT