wave-roll/dist/assets/instrument-icons.d.ts

JavaScript Library for Comparative MIDI Piano-Roll Visualization

/**
 * SVG Icons for instrument families
 * Used in Settings UI to visually distinguish track types
 *
 * Design System:
 * - Base Grid: 24x24 viewBox
 * - Style: Lucide/Feather (clean lines, rounded corners)
 * - Attributes: stroke="currentColor", stroke-width="2", fill="none"
 *
 * 16px Readability Heuristics:
 * - Piano: compact keyboard with three clear black-key blocks
 * - Strings: violin silhouette with paired f-holes and vertical strings
 * - Drums: single shell + lid with one diagonal stick
 * - Guitar: circular body plus angled neck with tuning nubs
 * - Bass: offset body with long neck, bridge rails, and tuning dots
 * - Synth: rack with two knobs plus three grouped keys
 * - Winds: horizontal flute pill, mouthpiece, and three tone holes
 * - Brass: flared trumpet bell, short lead pipe, and two valves
 * - Vocal: microphone with singing figure silhouette
 * - Organ: pipe organ with vertical pipes
 * - Mallet: maracas percussion instrument
 * - Others: generic musical note retained for catch-all usage
 */
import { InstrumentFamily } from "@/lib/midi/types";
/**
 * SVG icons for each instrument family.
 * All icons use 24x24 viewBox with Lucide/Feather styling.
 */
export declare const INSTRUMENT_ICONS: Record<InstrumentFamily, string>;
/**
 * Get the SVG icon for a given instrument family.
 * @param family - The instrument family
 * @returns SVG string for the icon
 */
export declare function getInstrumentIcon(family: InstrumentFamily): string;
/**
 * Chevron icon for accordion expand/collapse
 */
export declare const CHEVRON_DOWN = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none; transition: transform 0.2s;\">\n  <path d=\"M6 9l6 6 6-6\" />\n</svg>";
export declare const CHEVRON_RIGHT = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none; transition: transform 0.2s;\">\n  <path d=\"M9 6l6 6-6 6\" />\n</svg>";
//# sourceMappingURL=instrument-icons.d.ts.map