embed-svg
Version:
Dynamically inline SVG files so they can be customised without bundling
72 lines (60 loc) • 2.62 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/rocket.svg" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embed SVG</title>
</head>
<body>
<div id="app">
<div>
<h1>Embed SVG</h1>
<h3>Stop bundling your SVGs</h3>
<p>Embed SVG is a simple web component that allows you to inline SVGs into your HTML.</p>
<p>All the benefits of inlining your SVGs without having to bundle them.</p>
<h3>Features</h3>
<ul>
<li>✨ Dynamically load SVG files</li>
<li>🧳 Request caching</li>
<li>🎨 Customize SVG attributes (fill, width, height, etc.)</li>
<li>🔄 Pattern replacement support</li>
<li>🎯 Shadow DOM encapsulation</li>
<li>📦 No dependencies</li>
<li>🐣 1kb gzipped</li>
</ul>
<div class="demo-section">
<h2>Installation</h2>
<p>
You can install Embed SVG using npm:
</p>
<pre><code class="language-bash">npm install embed-svg</code></pre>
<p>Then import the package</p>
<pre><code class="language-js">import 'embed-svg';</code></pre>
</div>
<div class="demo-section">
<h2>Basic Usage</h2>
<div class="example">
<div class="svg-container" id="example-1">
<embed-svg src="https://raw.githubusercontent.com/guywalker/embed-svg/refs/heads/main/public/rocket.svg" width="80" height="80" fill="#ffce2b"></embed-svg>
</div>
</div>
<div class="example-code" data-example="example-1"></div>
</div>
<div class="demo-section">
<h2>Replacements</h2>
<div class="example">
<div class="svg-container" id="example-2">
<embed-svg src="https://raw.githubusercontent.com/guywalker/embed-svg/refs/heads/main/public/car.svg" width="250" height="250">
<embed-svg-replace pattern="#2f2e43" value="#725C42"></embed-svg-replace>
<embed-svg-replace pattern="1\.22292Z"\s+fill="#6c63ff" value="1.22292Z" fill="#42692F"></embed-svg-replace>
</embed-svg>
</div>
<div class="example-code" data-example="example-2"></div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>