Home
SVG
Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
Usage
Provide a URL to any SVG file via the src attribute. The SVG is fetched, sanitized, and rendered inline. Use image-title for accessible alt text and preview to enable a click-to-enlarge lightbox.
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" image-title="Bug icon" style="--svg-size: 2rem;"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/heart-fill.svg" image-title="Heart icon" style="--svg-size: 2rem; --svg-color: var(--color-error);" preview="true"></wc-svg>
Color Variants
Use the --svg-color CSS custom property or the inherited color to tint an SVG. The color cascades from a parent element when not set explicitly.
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem; --svg-color: var(--color-primary)"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem; --svg-color: var(--color-success)"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem; --svg-color: var(--color-warning)"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem; --svg-color: var(--color-error)"></wc-svg>
<span style="color: pink; display: inline-flex;">
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem;"></wc-svg>
</span>
Sizes
Control the rendered size using the --svg-size CSS custom property.
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 1rem;"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 2rem;"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 3rem;"></wc-svg>
<wc-svg src="https://icons.getbootstrap.com/assets/icons/bug.svg" style="--svg-size: 4rem;"></wc-svg>
On this page
Usage Color Variants Sizes