search

tscircuit / schematic-symbols

Schematic symbols for tscircuit
https://symbols.tscircuit.com/
MIT License
10 stars 22 forks source link
hacktoberfest

readme

schematic-symbols

View Online

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

  1. Add a new svg file to the ./assets/symbols directory (copy volt_meter.svg to a new file named <symbol_name>.svg)
  2. Run bun run generate to generate the new symbol
  3. Run bun run dev to start the dev server and verify the new symbol
  4. Run bun run format to format code before committing
  5. Run bun run test to ensure symbol snapshots are present & validated
  6. 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 }

Colors

You can use the following color aliases to color your symbol:

Guidelines

The symbols should all look correct next to eachother, since they're all used together in the same schematic.

Development

Software needed to edit this project:

References