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:

• primary
• secondary
• background

Guidelines

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

• The width of most standard passives is 1
• The height of most standard passives is 0.6

Development

Software needed to edit this project:

• VS Code
• Inkscape

References

• MIT Schematic Symbols
• affinity-circuit-symbols-asset
• Inkscape Symbols