https://cairnjs.vercel.app/src/shapes/rect.js

1/**
2 * @cairn-js/core - Shape Utilities: Rect
3 * Mathematical SVG rectangle & rounded rect path generator.
4 */
5
6export function rect(props = {}) {
7    const { w = 100, h = 100, rx = 0, ry = 0, fill = 'currentColor', stroke = 'none', strokeWidth = 1 } = props;
8    
9    if (typeof document !== 'undefined') {
10        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
11        svg.setAttribute('width', String(w));
12        svg.setAttribute('height', String(h));
13        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
14        
15        const rectNode = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
16        rectNode.setAttribute('width', String(w));
17        rectNode.setAttribute('height', String(h));
18        if (rx) rectNode.setAttribute('rx', String(rx));
19        if (ry) rectNode.setAttribute('ry', String(ry));
20        rectNode.setAttribute('fill', fill);
21        rectNode.setAttribute('stroke', stroke);
22        rectNode.setAttribute('stroke-width', String(strokeWidth));
23
24        svg.appendChild(rectNode);
25        return svg;
26    }
27
28    return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><rect width="${w}" height="${h}" rx="${rx}" ry="${ry}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" /></svg>`;
29}