@karrotmarket/lynx-monochrome-icon

Lynx monochrome icons for Seed Design System.

Installation

yarn add @karrotmarket/lynx-monochrome-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 { IconAppleFill, IconArrowLeft } from '@karrotmarket/lynx-monochrome-icon';

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

  return (
    <view>
      {/* Default size (24px) */}
      <IconAppleFill color="#FF6B00" />

      {/* Override the default size */}
      <IconAppleFill size={32} color="#FF6B00" />

      {/* style.width / style.height override size individually */}
      <IconAppleFill
        size={32}
        color="#FF6B00"
        style={{ width: '16px', height: '16px' }}
      />

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

Props

IconProps

interface IconProps {
  size?: number;       // Default: 24
  color?: string;     // Optional
  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)
• color: Icon tint color (optional, applied only when provided)
• 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

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-monochrome - Raw SVG assets

License

MIT