feat: pass props to custom resolver (#42)

Co-authored-by: Nate Moore <[email protected]>

.changeset/green-camels-teach.md

@@ -0,0 +1,5 @@
+---
+"astro-icon": minor
+---
+
+Pass props to custom resolvers

demo/src/icons/custom.ts

@@ -0,0 +1,6 @@
+export default async (name: string, { size }): Promise<string> => {
+  return `
+  <svg viewBox="0 0 ${size} ${size}">
+    <circle cx="${size / 2}" cy="${size / 2}" r="${size / 2}"/>
+  </svg>`;
+};

demo/src/pages/index.astro

@@ -28,7 +28,7 @@ import { Icon } from 'astro-icon';
 	<p>The <code>Icon</code> component will optimize and inline any SVG file inside of <code>src/icons/</code></p>
 
 	<p>Alternatively, see <a href="/sprite">the Sprite method</a>.</p>
-	
+
 	<article>
 		<h2>Local</h2>
 		<!-- This will inline your SVG directly -->
@@ -39,9 +39,15 @@ import { Icon } from 'astro-icon';
 	<article>
 		<h2>Custom remote source</h2>
 		<!-- Pull your icon from a custom remote source -->
-	<Icon size={24} pack="radix" name="github-logo" />
+		<Icon size={24} pack="radix" name="github-logo" />
+	</article>
+
+	<article>
+		<h2>Custom SVG resolver</h2>
+		<!-- Pull your icon from a custom remote source -->
+		<Icon size={24} pack="custom" name="circle" />
 	</article>
-	
+
 	<article>
 		<h2>Local dependencies</h2>
 		<!-- Pull your icon from a local dependency -->

packages/core/lib/utils.ts

@@ -170,7 +170,7 @@ export default async function load(
     if (typeof get === "undefined") {
       get = getFromService.bind(null, pack);
     }
-    const contents = await get(name);
+    const contents = await get(name, inputProps);
     if (!contents) {
       throw new Error(
         `<Icon pack="${pack}" name="${name}" /> did not return an icon!`