Schematic-symbols NPM

schematic-symbols

Schematic symbols for tscircuit

!TIP Looking to contribute to this repo? Take a look at How to Contribute to Schematic Symbols!

Usage

import { getSvg, resize, symbols } from "@tscircuit/schematic-symbols"

console.log(symbols.resistor.primitives)
// [{ type: "path", d: "M0 0L1 0...", color: "primary" }, {type: "text", text: "{REF}", ... }]
console.log(symbols.resistor.size)
// { width: 1, height: 0.6 }

getSvg(resistor)
// <svg><path d="M0 0L1 0... ..."</svg>

// You can easily resize symbols
console.log(resize(symbols.resistor, { width: 100 }).size)
// { width: 100, height: 60 }

Adding New Symbols

Add a new svg file to the ./assets/symbols directory (copy volt_meter.svg to a new file named <symbol_name>.svg)
Run bun run generate to generate the new symbol
Run bun run dev to start the dev server and verify the new symbol
Run bun run format to format code before committing
Run bun run test to ensure symbol snapshots are present & validated
Run bun run build to build all the symbols into the ./generated directory

Here's an example of a generated symbol file:

// boxresistor.ts
import { path, text, defineSymbol } from "drawing"

export const boxresistor = defineSymbol({
  primitives: [
    path({ points: [[0, 0] /* ... */, , [1, 0]], color: "primary" }),
    text("{REF}", { x: 0.5, y: 0.3, anchor: "middle_top" }),
  ],
  ports: [
    { x: 0, y: 0, labels: ["1", "-"] },
    { x: 1, y: 0, labels: ["2", "+"] },
  ],
  center: { x: 0.5, y: 0 },
  size: { width: 1, height: 0.6 },
})

These files are used to generate an

Primitives

Various primitive JSON elements are defined to represent components, each primitive has a function you can use to quickly define it inside new symbol definitions.

Primitive	Description
`path`	A set of lines `{ points: Array<[number, number]>, color }`
`text`	Text `{ text, x, y, anchor }`
`circle`	Circle `{ x, y, radius }`
`box`	Box `{ x, y, width, height, anchor }`