Reusable Laravel Blade components with SVG

Who this is for: Laravel beginners who can read Blade templates and basic HTML and want to reuse small pieces of interface markup.

What you will learn: how anonymous Blade components receive props, how components compose inside SVG, and why reusable markup still needs shared styling and accessible descriptions.

Tested environment: Laravel Framework 13.16.1 and PHP 8.4.15. The examples describe the Blade components currently used by TeachyLeaf's circuit diagrams.

Why use small components?

A circuit diagram contains repeated visual elements: wires, resistors, nodes, and sources. Recreating the same SVG markup and styles in every diagram makes inconsistencies and maintenance work more likely.

TeachyLeaf keeps these primitives in resources/views/components/circuits/ and composes them in diagram partials. The same resistor view can draw a vertical or horizontal resistor while the shared stylesheet gives each diagram a consistent appearance.

An anonymous component receives props

The resistor component declares the values it accepts at the top of its Blade file:

@props(['x', 'y', 'orientation' => 'vertical', 'length' => 50, 'width' => 26])

Its template uses those values to draw an SVG rectangle. For a horizontal resistor, it centers the rectangle on x and y; otherwise it uses the vertical dimensions:

@if($orientation === 'horizontal')
    <rect class="circuit-diagram__resistor"
          x="{{ $x - $length / 2 }}"
          y="{{ $y - $width / 2 }}"
          width="{{ $length }}"
          height="{{ $width }}"
          rx="4"/>
@else
    <rect class="circuit-diagram__resistor"
          x="{{ $x - $width / 2 }}"
          y="{{ $y - $length / 2 }}"
          width="{{ $width }}"
          height="{{ $length }}"
          rx="4"/>
@endif

Because this file is under Laravel's conventional resources/views/components directory, it can be called using the x- component syntax. The circuits subdirectory becomes a dot-separated component namespace:

<x-circuits.resistor x="235" y="80" length="48" width="28" />
<x-circuits.resistor
    x="166"
    y="42"
    orientation="horizontal"
    length="72"
    width="24"
/>

Required props specify the position; optional props provide defaults. Each component should have a focused purpose and a small set of understandable inputs. Reuse does not replace checking that the supplied coordinates and dimensions make sense in the particular diagram.

Compose primitives into a complete diagram

The Thevenin circuit partial places wires, ground symbols, a source, a node, and resistors inside one SVG. These components draw individual shapes; the parent partial remains responsible for the overall circuit structure and the labels:

<svg viewBox="0 0 360 250"
     role="img"
     aria-labelledby="circuit-title circuit-description">
    <title id="circuit-title">Loaded voltage divider circuit</title>
    <desc id="circuit-description">
        A source feeds R1. At the output node, R2 and the load connect to ground.
    </desc>

    <x-circuits.wire d="M72 92V42H130M202 42H270" />
    <x-circuits.dc-source x="72" y="120" radius="28" />
    <x-circuits.node x="270" y="42" />
    <x-circuits.resistor
        x="166"
        y="42"
        orientation="horizontal"
        length="72"
        width="24"
    />
</svg>

The abbreviated wire path above is only a markup example, not a complete working circuit. The full diagram also needs paths that connect every symbol correctly, plus labels and grounding as appropriate. Reusing the shapes does not validate circuit topology or calculate electrical behavior.

Keep appearance and accessibility consistent

Reusable markup and reusable styling work together. The SVG elements use shared classes such as circuit-diagram__resistor; public/assets/css/circuit-diagrams.css defines their visual treatment. Updating a shared token or selector can then improve every diagram that uses it.

The parent SVG supplies a meaningful title and desc and references them with aria-labelledby. Those descriptions are specific to each complete diagram, so they belong with the diagram rather than in a generic resistor primitive. Visible labels and a nearby explanation also help readers understand what the drawing represents.

Where this pattern is useful—and its limits

• Use a component when the same meaningful markup appears in multiple places and benefits from a consistent interface.
• Keep the top-level diagram responsible for composition, labels, accessible names, and the complete SVG view box.
• Keep presentation in shared CSS rather than embedding unrelated styles into each component.
• These primitives are presentation helpers, not an interactive schematic editor, circuit simulator, or safety checker.

Try it in this project

1. Open resources/views/components/circuits/resistor.blade.php and identify its required props and defaults.
2. Compare resources/views/partials/frontend/voltage-divider-diagrams.blade.php with resources/views/partials/frontend/thevenin-circuit-diagrams.blade.php to see the same primitives in different compositions.
3. Inspect public/assets/css/circuit-diagrams.css and identify which classes provide the shared appearance.
4. Open the Thevenin lesson and read the SVG description alongside its diagram.

References

• Laravel 13 Blade components
• MDN: SVG title element
• MDN: SVG desc element