astro-icon - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

index.ts

 import Icon from "./lib/Icon.astro";
-import Spritesheet from "./lib/Spritesheet.astro";
-const SpriteSheet = Spritesheet;
-import Sprite from "./lib/Sprite.astro";
+import SpriteProvider from "./lib/SpriteProvider.astro";
+import SpriteComponent from "./lib/Sprite.astro";
 import createIconPack from "./lib/createIconPack.ts";
 
+import Sheet from "./lib/Spritesheet.astro";
+
+const deprecate = (component: any, message: string) => {
+  return (...args: any[]) => {
+    console.warn(message);
+    return component(...args);
+  };
+};
+
+const Spritesheet = deprecate(
+  Sheet,
+  `Direct access to <Spritesheet /> has been deprecated! Please wrap your contents in <Sprite.Provider> instead!`
+);
+const SpriteSheet = deprecate(
+  Sheet,
+  `Direct access to <SpriteSheet /> has been deprecated! Please wrap your contents in <Sprite.Provider> instead!`
+);
+
+const Sprite = Object.assign(SpriteComponent, { Provider: SpriteProvider });
+
 export {
@@ -12,4 +31,5 @@ Icon as default,
   SpriteSheet,
+  SpriteProvider,
   Sprite,
   createIconPack,
 };

lib/context.ts

@@ -5,11 +5,13 @@ const AstroIcon = Symbol("AstroIcon");
   if (typeof result[AstroIcon] !== "undefined") {
-    result[AstroIcon].add(name);
+    result[AstroIcon]["sprites"].add(name);
   } else {
-    result[AstroIcon] = new Set([name]);
+    result[AstroIcon] = {
+      sprites: new Set([name]),
+    };
   }
 }
 
-export function getUsedSprites(result: any) {
+export async function getUsedSprites(result: any) {
   if (typeof result[AstroIcon] !== "undefined") {
-    return Array.from(result[AstroIcon]);
+    return Array.from(result[AstroIcon]["sprites"]);
   }
@@ -16,0 +18,0 @@ throw new Error(

lib/createIconPack.ts

@@ -1,2 +0,2 @@
-import { promises as fs } from "fs";
+import { statSync, promises as fs } from "fs";
 import { fileURLToPath, pathToFileURL } from "url";
@@ -21,9 +21,11 @@ import { createRequire } from "module";
     return async (name: string) => {
-      const svg = await fs
-        .readFile(
-          fileURLToPath(
-            new URL(dir ? `${dir}/${name}.svg` : `${name}.svg`, baseUrl)
-          )
-        )
-        .then((res) => res.toString());
+      const path = fileURLToPath(
+        new URL(dir ? `${dir}/${name}.svg` : `${name}.svg`, baseUrl)
+      );
+      if (!exists(path)) {
+        throw new Error(
+          `[astro-icon] Unable to load "${path}"! Does the file exist?"`
+        );
+      }
+      const svg = await fs.readFile(path).then((res) => res.toString());
       return svg;
@@ -41,3 +43,8 @@ };
       }
-      const svg = await fetch(url).then((res) => res.text());
+      const res = await fetch(url);
+      if (!res.ok) {
+        const body = await res.text();
+        throw new Error(`Failed to fetch "${url}"!\n${body}`);
+      }
+      const svg = await res.text();
       fetchCache.set(url, svg);
@@ -48,1 +55,8 @@ return svg;
 }
+
+const exists = (path: string): boolean => {
+  try {
+    return statSync(path).isFile();
+  } catch (e) {}
+  return false;
+};

lib/utils.ts

@@ -107,2 +107,14 @@ import { Props, Optimize } from "./Props";
 
+export const fallback = {
+  innerHTML:
+    '<rect width="24" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />',
+  props: {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+  },
+};
+
 export default async function load(
@@ -109,0 +121,0 @@ name: string,

package.json

 {
   "name": "astro-icon",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
@@ -34,4 +34,5 @@ "exports": {
   "dependencies": {
+    "node-fetch": "^3.1.0",
     "svgo": "^2.8.0"
   }
 }

README.md

@@ -53,13 +53,15 @@ # Astro Icon
 ---
-import { Sprite, Spritesheet } from 'astro-icon'
+import { Sprite } from 'astro-icon'
 ---
 
-<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
-<Sprite pack="mdi" name="account" />
+<!-- Required ONCE per page as a parent of any <Sprite> components! Creates `<symbol>` for each icon -->
+<!-- Can also be included in your Layout component! -->
+<Sprite.Provider>
+  <!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
+  <Sprite pack="mdi" name="account" />
 
-<!-- Equivalent shorthand -->
-<Sprite name="mdi:account" />
+  <!-- Equivalent shorthand -->
+  <Sprite name="mdi:account" />
 
-<!-- Required ONCE per page, creates `<symbol>` for each icon -->
-<Spritesheet />
+</Sprite.Provider>
 ```
@@ -94,10 +96,11 @@
 ---
-import { Sprite, SpriteSheet } from 'astro-icon';
+import { Sprite } from 'astro-icon';
 ---
 
-<!-- Uses the sprite from `/src/icons/filename.svg` -->
-<Sprite name="filename" />
-
-<!-- Required ONCE per page, creates `<symbol>` for each icon -->
-<Spritesheet />
+<!-- Required ONCE per page as a parent of any <Sprite> components! Creates `<symbol>` for each icon -->
+<!-- Can also be included in your Layout component! -->
+<Sprite.Provider>
+  <!-- Uses the sprite from `/src/icons/filename.svg` -->
+  <Sprite name="filename" />
+</Sprite.Provider>
 ```
@@ -104,0 +107,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28016

increased by7.48%

Number of package files

13

increased by8.33%

Lines of code

637

increased by7.06%

Number of lines in readme file

173

increased by1.76%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addednode-fetch@^3.1.0

• + Addeddata-uri-to-buffer@4.0.1(transitive)

• + Addedfetch-blob@3.2.0(transitive)

• + Addedformdata-polyfill@4.0.10(transitive)

• + Addednode-domexception@1.0.0(transitive)

• + Addednode-fetch@3.3.2(transitive)

• + Addedweb-streams-polyfill@3.3.3(transitive)