2026-04-21 20:56:20 +07:00
|
|
|
|
/**
|
|
|
|
|
|
* InlineComponentSVGs — simple schematic-style icons for the components
|
|
|
|
|
|
* whose SVG isn't pre-rendered into /component-svgs/ (transistors, MOSFETs,
|
|
|
|
|
|
* diodes, capacitors, relays, optocouplers, op-amps, logic gates, signal
|
|
|
|
|
|
* generators, batteries, regulators, motor drivers, etc.).
|
|
|
|
|
|
*
|
|
|
|
|
|
* Used by CircuitPreview.tsx to keep the /examples gallery cards visually
|
|
|
|
|
|
* representative even for parts that weren't extracted from wokwi-elements.
|
|
|
|
|
|
*
|
|
|
|
|
|
* Each renderer receives {w, h} (canvas-space size) and fills its box with
|
|
|
|
|
|
* a recognizable schematic glyph. Sizes chosen to match the on-canvas size
|
|
|
|
|
|
* of the corresponding custom web component, so bounding boxes line up.
|
|
|
|
|
|
*/
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
interface InlineSVGProps {
|
|
|
|
|
|
w: number;
|
|
|
|
|
|
h: number;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Transistors ───────────────────────────────────────────────────────────
|
|
|
|
|
|
const BjtNpn: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<circle cx="36" cy="36" r="24" fill="#f6f1e8" stroke="#555" strokeWidth="1"/>
|
|
|
|
|
|
<line x1="0" y1="36" x2="22" y2="36" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="20" x2="22" y2="52" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<line x1="22" y1="24" x2="44" y2="6" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="44" y1="6" x2="60" y2="6" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="48" x2="44" y2="66" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="44" y1="66" x2="60" y2="66" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<polygon points="40,60 44,66 36,65" fill="#222"/>
|
|
|
|
|
|
<text x="50" y="40" fontSize="8" fill="#333">NPN</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const BjtPnp: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<circle cx="36" cy="36" r="24" fill="#f6f1e8" stroke="#555" strokeWidth="1"/>
|
|
|
|
|
|
<line x1="0" y1="36" x2="22" y2="36" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="20" x2="22" y2="52" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<line x1="22" y1="24" x2="44" y2="6" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="44" y1="6" x2="60" y2="6" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="48" x2="44" y2="66" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="44" y1="66" x2="60" y2="66" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<polygon points="26,28 22,24 32,26" fill="#222"/>
|
|
|
|
|
|
<text x="50" y="40" fontSize="8" fill="#333">PNP</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const Mosfet: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<circle cx="36" cy="36" r="24" fill="#f6f1e8" stroke="#555" strokeWidth="1"/>
|
|
|
|
|
|
<line x1="0" y1="36" x2="20" y2="36" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="20" y1="22" x2="20" y2="50" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="24" y1="20" x2="24" y2="32" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<line x1="24" y1="40" x2="24" y2="52" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<line x1="24" y1="26" x2="48" y2="8" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="48" y1="8" x2="60" y2="8" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="24" y1="46" x2="48" y2="64" stroke="#222" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="48" y1="64" x2="60" y2="64" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<polygon points="32,40 28,36 32,32" fill="#222"/>
|
|
|
|
|
|
<text x="46" y="42" fontSize="8" fill="#333">MOS</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Diodes ────────────────────────────────────────────────────────────────
|
|
|
|
|
|
function diodeGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 40" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="14" y="12" width="44" height="16" rx="2" fill="#2a2a2a" stroke="#111" strokeWidth="1"/>
|
|
|
|
|
|
<rect x="18" y="12" width="4" height="16" fill="#eee"/>
|
|
|
|
|
|
<line x1="0" y1="20" x2="14" y2="20" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="58" y1="20" x2="72" y2="20" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<text x="36" y="25" fontSize="8" fill="#eee" textAnchor="middle" fontFamily="sans-serif">{label}</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const Diode1N4007: React.FC<InlineSVGProps> = ({ w, h }) => diodeGlyph('1N4007', w, h);
|
|
|
|
|
|
const Diode1N5817: React.FC<InlineSVGProps> = ({ w, h }) => diodeGlyph('1N5817', w, h);
|
|
|
|
|
|
const DiodeZener: React.FC<InlineSVGProps> = ({ w, h }) => diodeGlyph('ZD', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Passives ──────────────────────────────────────────────────────────────
|
|
|
|
|
|
const Capacitor: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 56 36" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<line x1="0" y1="18" x2="22" y2="18" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="34" y1="18" x2="56" y2="18" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="6" x2="22" y2="30" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<line x1="34" y1="6" x2="34" y2="30" stroke="#222" strokeWidth="3"/>
|
|
|
|
|
|
<text x="28" y="34" fontSize="6" fill="#666" textAnchor="middle">C</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Relay ─────────────────────────────────────────────────────────────────
|
|
|
|
|
|
const Relay: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="10" y="8" width="76" height="80" rx="4" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="0" y1="16" x2="18" y2="16" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="0" y1="80" x2="18" y2="80" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="22" y1="16" x2="22" y2="80" stroke="#8a5a00" strokeWidth="1.5"/>
|
|
|
|
|
|
{[24, 34, 44, 54, 64, 74].map(cy => (
|
|
|
|
|
|
<circle key={cy} cx="22" cy={cy} r="3" fill="none" stroke="#8a5a00" strokeWidth="1.5"/>
|
|
|
|
|
|
))}
|
|
|
|
|
|
<line x1="60" y1="48" x2="80" y2="48" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="72" y1="20" x2="86" y2="16" stroke="#2a2a2a" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="86" y1="16" x2="96" y2="16" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="86" y1="80" x2="96" y2="80" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<text x="48" y="54" textAnchor="middle" fontSize="9" fill="#333" fontWeight="bold">RELAY</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Optocoupler ───────────────────────────────────────────────────────────
|
|
|
|
|
|
function optoGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 80 64" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="10" y="8" width="60" height="48" rx="3" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="40" y1="8" x2="40" y2="56" stroke="#2a2a2a" strokeWidth="0.8" strokeDasharray="2,2"/>
|
|
|
|
|
|
<polygon points="18,22 18,38 30,30" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.2"/>
|
|
|
|
|
|
<line x1="30" y1="22" x2="30" y2="38" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="46" y1="20" x2="46" y2="40" stroke="#2a2a2a" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="46" y1="25" x2="58" y2="18" stroke="#2a2a2a" strokeWidth="1.2"/>
|
|
|
|
|
|
<line x1="46" y1="35" x2="58" y2="42" stroke="#2a2a2a" strokeWidth="1.2"/>
|
|
|
|
|
|
<line x1="0" y1="16" x2="10" y2="16" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="0" y1="48" x2="10" y2="48" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="70" y1="16" x2="80" y2="16" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="70" y1="48" x2="80" y2="48" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<text x="40" y="62" textAnchor="middle" fontSize="7" fill="#333" fontWeight="bold">{label}</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const Opto4N25: React.FC<InlineSVGProps> = ({ w, h }) => optoGlyph('4N25', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── DIP IC block (motor driver, etc.) ─────────────────────────────────────
|
|
|
|
|
|
function dipGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="10" y="4" width="80" height="72" rx="4" fill="#1f2937" stroke="#eef3fa" strokeWidth="1"/>
|
|
|
|
|
|
<circle cx="18" cy="12" r="2" fill="#eef3fa"/>
|
|
|
|
|
|
{[12, 20, 28, 36, 44, 52, 60, 68].map(y => (
|
|
|
|
|
|
<React.Fragment key={y}>
|
|
|
|
|
|
<line x1="0" y1={y} x2="10" y2={y} stroke="#bbb" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="90" y1={y} x2="100" y2={y} stroke="#bbb" strokeWidth="1.5"/>
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
|
))}
|
|
|
|
|
|
<text x="50" y="44" textAnchor="middle" fontSize="10" fill="#e5e7eb" fontWeight="bold">{label}</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const MotorDriverL293D: React.FC<InlineSVGProps> = ({ w, h }) => dipGlyph('L293D', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Op-amp ────────────────────────────────────────────────────────────────
|
|
|
|
|
|
function opampGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 80 72" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<polygon points="20,8 20,64 66,36" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="0" y1="22" x2="20" y2="22" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="0" y1="50" x2="20" y2="50" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="66" y1="36" x2="80" y2="36" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
<text x="26" y="26" fontSize="10" fill="#333" fontWeight="bold">−</text>
|
|
|
|
|
|
<text x="26" y="55" fontSize="10" fill="#333" fontWeight="bold">+</text>
|
|
|
|
|
|
<text x="40" y="68" textAnchor="middle" fontSize="7" fill="#666">{label}</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const OpampLM358: React.FC<InlineSVGProps> = ({ w, h }) => opampGlyph('LM358', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Logic gates ───────────────────────────────────────────────────────────
|
|
|
|
|
|
function gateShape(
|
|
|
|
|
|
shape: 'and' | 'nand' | 'or' | 'nor' | 'xor' | 'xnor' | 'not',
|
|
|
|
|
|
w: number,
|
|
|
|
|
|
h: number,
|
|
|
|
|
|
): React.ReactElement {
|
|
|
|
|
|
const negated = shape === 'nand' || shape === 'nor' || shape === 'xnor' || shape === 'not';
|
|
|
|
|
|
const exclusive = shape === 'xor' || shape === 'xnor';
|
|
|
|
|
|
const isOr = shape === 'or' || shape === 'nor' || shape === 'xor' || shape === 'xnor';
|
|
|
|
|
|
const isNot = shape === 'not';
|
|
|
|
|
|
const body = isNot
|
|
|
|
|
|
? <polygon points="12,10 12,38 46,24" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
: isOr
|
|
|
|
|
|
? <path d="M 10 8 Q 28 24 10 40 Q 38 40 54 24 Q 38 8 10 8 Z" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>
|
|
|
|
|
|
: <path d="M 10 8 L 30 8 Q 54 8 54 24 Q 54 40 30 40 L 10 40 Z" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>;
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 48" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<line x1="0" y1="16" x2="10" y2="16" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
{!isNot && <line x1="0" y1="32" x2="10" y2="32" stroke="#555" strokeWidth="2"/>}
|
|
|
|
|
|
{body}
|
|
|
|
|
|
{exclusive && <path d="M 4 8 Q 14 24 4 40" fill="none" stroke="#2a2a2a" strokeWidth="1.5"/>}
|
|
|
|
|
|
{negated && <circle cx={isNot ? 50 : 58} cy="24" r="3" fill="#f8f4ee" stroke="#2a2a2a" strokeWidth="1.5"/>}
|
|
|
|
|
|
<line x1={negated ? (isNot ? 53 : 61) : (isNot ? 46 : 54)} y1="24" x2="72" y2="24" stroke="#555" strokeWidth="2"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const GateAnd: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('and', w, h);
|
|
|
|
|
|
const GateNand: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('nand', w, h);
|
|
|
|
|
|
const GateOr: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('or', w, h);
|
|
|
|
|
|
const GateNor: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('nor', w, h);
|
|
|
|
|
|
const GateXor: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('xor', w, h);
|
|
|
|
|
|
const GateXnor: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('xnor', w, h);
|
|
|
|
|
|
const GateNot: React.FC<InlineSVGProps> = ({ w, h }) => gateShape('not', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Power / instruments ───────────────────────────────────────────────────
|
|
|
|
|
|
function reg3pinGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 56" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="8" y="8" width="56" height="40" rx="4" fill="#2a2a2a" stroke="#111" strokeWidth="1.5"/>
|
|
|
|
|
|
<line x1="20" y1="48" x2="20" y2="56" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="36" y1="48" x2="36" y2="56" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="52" y1="48" x2="52" y2="56" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<text x="36" y="32" textAnchor="middle" fontSize="10" fill="#eee" fontWeight="bold">{label}</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const Reg7805: React.FC<InlineSVGProps> = ({ w, h }) => reg3pinGlyph('7805', w, h);
|
|
|
|
|
|
const RegLM317: React.FC<InlineSVGProps> = ({ w, h }) => reg3pinGlyph('LM317', w, h);
|
|
|
|
|
|
|
|
|
|
|
|
const Battery9V: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 48 72" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="6" y="12" width="36" height="52" rx="3" fill="#c9a23a" stroke="#7a5e00" strokeWidth="1.5"/>
|
|
|
|
|
|
<rect x="14" y="4" width="8" height="10" rx="1" fill="#ddd" stroke="#777" strokeWidth="1"/>
|
|
|
|
|
|
<rect x="26" y="4" width="8" height="10" rx="1" fill="#ddd" stroke="#777" strokeWidth="1"/>
|
|
|
|
|
|
<text x="24" y="40" textAnchor="middle" fontSize="12" fill="#3a2d00" fontWeight="bold">9V</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const SignalGenerator: React.FC<InlineSVGProps> = ({ w, h }) => (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 80 64" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="4" y="4" width="72" height="56" rx="5" fill="#1f2937" stroke="#eef3fa" strokeWidth="1.2"/>
|
|
|
|
|
|
<rect x="10" y="10" width="60" height="20" rx="2" fill="#061018" stroke="#0e8c70" strokeWidth="1"/>
|
|
|
|
|
|
<path d="M 14 20 Q 22 12 30 20 T 46 20 T 62 20" fill="none" stroke="#4ade80" strokeWidth="1.5"/>
|
|
|
|
|
|
<circle cx="20" cy="46" r="5" fill="#374151" stroke="#9ca3af" strokeWidth="1"/>
|
|
|
|
|
|
<text x="56" y="50" textAnchor="middle" fontSize="7" fill="#e5e7eb">SIG GEN</text>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
2026-04-21 22:59:59 +07:00
|
|
|
|
function meterGlyph(label: string, w: number, h: number): React.ReactElement {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<svg width={w} height={h} viewBox="0 0 72 56" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<rect x="2" y="2" width="68" height="52" rx="4" fill="#111827" stroke="#e5e7eb" strokeWidth="1.2"/>
|
|
|
|
|
|
<rect x="8" y="8" width="56" height="22" rx="2" fill="#0b1220" stroke="#22d3ee" strokeWidth="1"/>
|
|
|
|
|
|
<text x="36" y="24" textAnchor="middle" fontSize="10" fill="#22d3ee" fontFamily="monospace">{label}</text>
|
|
|
|
|
|
<line x1="0" y1="48" x2="8" y2="48" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
<line x1="64" y1="48" x2="72" y2="48" stroke="#888" strokeWidth="2"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const Voltmeter: React.FC<InlineSVGProps> = ({ w, h }) => meterGlyph('V', w, h);
|
|
|
|
|
|
const Ammeter: React.FC<InlineSVGProps> = ({ w, h }) => meterGlyph('A', w, h);
|
|
|
|
|
|
|
2026-04-21 20:56:20 +07:00
|
|
|
|
// ─── Registry ──────────────────────────────────────────────────────────────
|
|
|
|
|
|
interface InlineEntry {
|
|
|
|
|
|
component: React.FC<InlineSVGProps>;
|
|
|
|
|
|
w: number;
|
|
|
|
|
|
h: number;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const INLINE_SVGS: Record<string, InlineEntry> = {
|
|
|
|
|
|
// BJTs
|
|
|
|
|
|
'wokwi-bjt-2n2222': { component: BjtNpn, w: 72, h: 72 },
|
|
|
|
|
|
'wokwi-bjt-2n3904': { component: BjtNpn, w: 72, h: 72 },
|
|
|
|
|
|
'wokwi-bjt-2n3906': { component: BjtPnp, w: 72, h: 72 },
|
|
|
|
|
|
'wokwi-bjt-bc547': { component: BjtNpn, w: 72, h: 72 },
|
|
|
|
|
|
// MOSFETs
|
|
|
|
|
|
'wokwi-mosfet-2n7000': { component: Mosfet, w: 72, h: 72 },
|
|
|
|
|
|
'wokwi-mosfet-irf540n': { component: Mosfet, w: 72, h: 72 },
|
|
|
|
|
|
'wokwi-mosfet-bs170': { component: Mosfet, w: 72, h: 72 },
|
|
|
|
|
|
// Diodes
|
|
|
|
|
|
'wokwi-diode': { component: Diode1N4007, w: 72, h: 40 },
|
|
|
|
|
|
'wokwi-diode-1n4007': { component: Diode1N4007, w: 72, h: 40 },
|
|
|
|
|
|
'wokwi-diode-1n4148': { component: Diode1N4007, w: 72, h: 40 },
|
|
|
|
|
|
'wokwi-diode-1n5817': { component: Diode1N5817, w: 72, h: 40 },
|
|
|
|
|
|
'wokwi-diode-1n5819': { component: Diode1N5817, w: 72, h: 40 },
|
|
|
|
|
|
'wokwi-zener-1n4733': { component: DiodeZener, w: 72, h: 40 },
|
|
|
|
|
|
// Passives
|
|
|
|
|
|
'wokwi-capacitor': { component: Capacitor, w: 56, h: 36 },
|
|
|
|
|
|
'wokwi-inductor': { component: Capacitor, w: 56, h: 36 },
|
|
|
|
|
|
// Electromechanical
|
|
|
|
|
|
'wokwi-relay': { component: Relay, w: 96, h: 96 },
|
|
|
|
|
|
// Optocouplers
|
|
|
|
|
|
'wokwi-opto-4n25': { component: Opto4N25, w: 80, h: 64 },
|
|
|
|
|
|
'wokwi-opto-pc817': { component: Opto4N25, w: 80, h: 64 },
|
|
|
|
|
|
// IC
|
|
|
|
|
|
'wokwi-motor-driver-l293d': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc00': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc04': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc08': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc14': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc32': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
'wokwi-ic-74hc86': { component: MotorDriverL293D, w: 100, h: 80 },
|
|
|
|
|
|
// Op-amps
|
|
|
|
|
|
'wokwi-opamp-ideal': { component: OpampLM358, w: 80, h: 72 },
|
|
|
|
|
|
'wokwi-opamp-lm358': { component: OpampLM358, w: 80, h: 72 },
|
|
|
|
|
|
'wokwi-opamp-lm741': { component: OpampLM358, w: 80, h: 72 },
|
|
|
|
|
|
'wokwi-opamp-lm324': { component: OpampLM358, w: 80, h: 72 },
|
|
|
|
|
|
'wokwi-opamp-tl072': { component: OpampLM358, w: 80, h: 72 },
|
|
|
|
|
|
// Logic gates — examples use both `wokwi-logic-gate-*` and `wokwi-logic-*` naming
|
|
|
|
|
|
'wokwi-logic-gate-and': { component: GateAnd, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-or': { component: GateOr, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-nand': { component: GateNand, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-nor': { component: GateNor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-xor': { component: GateXor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-xnor': { component: GateXnor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-gate-not': { component: GateNot, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-and': { component: GateAnd, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-or': { component: GateOr, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-nand': { component: GateNand, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-nor': { component: GateNor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-xor': { component: GateXor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-xnor': { component: GateXnor, w: 72, h: 48 },
|
|
|
|
|
|
'wokwi-logic-not': { component: GateNot, w: 72, h: 48 },
|
|
|
|
|
|
// Power
|
|
|
|
|
|
'wokwi-reg-7805': { component: Reg7805, w: 72, h: 56 },
|
|
|
|
|
|
'wokwi-reg-7812': { component: Reg7805, w: 72, h: 56 },
|
|
|
|
|
|
'wokwi-reg-7905': { component: Reg7805, w: 72, h: 56 },
|
|
|
|
|
|
'wokwi-reg-lm317': { component: RegLM317, w: 72, h: 56 },
|
|
|
|
|
|
'wokwi-battery-9v': { component: Battery9V, w: 48, h: 72 },
|
|
|
|
|
|
'wokwi-battery-aa': { component: Battery9V, w: 48, h: 72 },
|
|
|
|
|
|
'wokwi-signal-generator': { component: SignalGenerator, w: 80, h: 64 },
|
2026-04-21 22:59:59 +07:00
|
|
|
|
// Instruments
|
|
|
|
|
|
'wokwi-instr-voltmeter': { component: Voltmeter, w: 72, h: 56 },
|
|
|
|
|
|
'wokwi-instr-ammeter': { component: Ammeter, w: 72, h: 56 },
|
2026-04-21 20:56:20 +07:00
|
|
|
|
};
|
