inline-svg-decoratorlisted

Build crisp, theme-aware inline SVGs — icons, section dividers/waves, decorative shapes, logos, simple illustrations, chart marks — from clean parametric coordinates instead of icon fonts, external image links, emoji, or text placeholders like "[icon]". Every SVG gets an explicit viewBox, scales with its container, uses currentColor so it inherits the theme, and sits on integer coordinates so strokes stay sharp. Use this whenever HTML/JSX/CSS output needs any graphic: icons in buttons/nav/lists, a hero or footer divider, background decoration, a placeholder logo, arrows/checks/chevrons, or when the user says "add an icon", "make a wave", "section divider", "decorative shape", "use SVG", "no icon library", or the design would otherwise reach for Font Awesome / Lucide / an <img> that doesn't exist.
fernandokylas/editorial-web-craft · ★ 2 · Web & Frontend · score 73

Install: claude install-skill fernandokylas/editorial-web-craft

# Inline SVG Decorator Icon fonts ship hundreds of glyphs to draw six, break when the font fails to load, and can't be themed per-path. External `<img src="wave.svg">` links break the moment the asset isn't there — which in generated code is always. Emoji and `[icon]` placeholders read as unfinished. An inline SVG built from a few integer coordinates is lighter than any of those, styles with ordinary CSS, and inherits colour from the text around it. Draw what's needed, at the size it's needed, with the fewest points that still read cleanly. ## The four non-negotiables **1. Explicit `viewBox`, no fixed `width`/`height` attributes.** The viewBox defines the coordinate space; CSS defines the rendered size. Standard grids: `0 0 24 24` for UI icons, `0 0 1200 120` for full-width dividers, `0 0 800 400` for section backgrounds. Then size in CSS: ```css .icon { width: 1em; height: 1em; } /* follows the font size */ .divider{ width: 100%; height: clamp(2.5rem, 8vw, 5rem); display: block; } ``` `preserveAspectRatio="none"` only on dividers and backgrounds that are meant to stretch; never on icons (they'd distort). **2. `currentColor`, never hex, inside the SVG.** `fill="currentColor"` or `stroke="currentColor"` on paths, then colour the *wrapper* with a theme token. One SVG, every theme: ```html <div class="editorial-divider"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="vector-wave" aria-hidden="true"