Add support for is:inline directive (#200)

Author: natemoo-re

.changeset/nine-waves-film.md

@@ -0,0 +1,5 @@
+---
+"astro-icon": minor
+---
+
+Adds support for the `is:inline` directive, which bypasses automatic sprite optimization and directly embeds the plain SVG.

demo/src/pages/index.astro

@@ -15,14 +15,15 @@ const icon = "adjustment";
 
   <article>
     <h2>Local Icons</h2>
-    <!-- This will inline your SVG directly -->
     <Icon size={24} name="adjustment" />
     <Icon size={24} name={icon} />
     <Icon size={24} name="annotation" />
     <Icon size={24} name="logos/deno" />
     <Icon name="logos/deno" />
     <Icon width={75} name="logos/alpine" />
     <Icon name="logos/alpine-multi-color" />
+
+    <Icon is:inline size={24} name="adjustment" />
   </article>
 
   <article>

packages/core/components/Icon.astro

@@ -9,6 +9,7 @@ import { cache } from "./cache.js";
 
 interface Props extends HTMLAttributes<"svg"> {
   name: Icon;
+  "is:inline"?: boolean;
   title?: string;
   size?: number;
   width?: number;
@@ -24,7 +25,7 @@ class AstroIconError extends Error {
 }
 
 const req = Astro.request;
-const { name = "", title, ...props } = Astro.props;
+const { name = "", title, "is:inline": inline = false, ...props } = Astro.props;
 const map = cache.get(req) ?? new Map();
 const i = map.get(name) ?? 0;
 map.set(name, i + 1);
@@ -33,7 +34,7 @@ cache.set(req, map);
 const { include = {} } = config;
 const sets = Object.keys(include);
 
-const includeSymbol = i === 0;
+const includeSymbol = !inline && i === 0;
 
 let [setName, iconName] = (name as string).split(":");
 
@@ -115,6 +116,14 @@ const normalizedBody = renderData.body;
 
 <svg {...normalizedProps} data-icon={name}>
   {title && <title>{title}</title>}
-  {includeSymbol && <symbol id={id} set:html={normalizedBody} />}
-  <use xlink:href={`#${id}`}></use>
+  {
+    inline ? (
+      <Fragment id={id} set:html={normalizedBody} />
+    ) : (
+      <Fragment>
+        {includeSymbol && <symbol id={id} set:html={normalizedBody} />}
+        <use xlink:href={`#${id}`} />
+      </Fragment>
+    )
+  }
 </svg>