astro-icon - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

lib/utils.ts

@@ -1,2 +0,1 @@
-/// <reference types="vite/client" />
 import { SPRITESHEET_NAMESPACE } from "./constants";
@@ -3,0 +2,0 @@ import { Props, Optimize } from "./Props";

package.json

 {
   "name": "astro-icon",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
@@ -5,0 +5,0 @@ "exports": {

README.md

@@ -97,12 +97,20 @@ # Astro Icon
 1. Create a directory inside of `src/` named `icons/`.
-2. Create a JS/TS file with your `pack` name inside of that directory, eg `src/icons/my-pack.ts`
-3. Use the `createIconPack` utility to handle most common situations.
+2. Inside that directory, create a JS/TS file with your `pack` name inside of that directory, eg `src/icons/my-pack.ts`
+3. Export a `default` function that takes an icon name and returns a svg string. Utilize the `createIconPack` utility to handle most common situations.
 
-```ts
-import { createIconPack } from "astro-icon";
+If using a package from NPM, eg. `heroicons`, the icon pack file would resemble the following:
 
+```js
+import { createIconPack } from "astro-icon/pack";
+
 // Resolves `heroicons` dependency and reads SVG files from the `heroicons/outline` directory
 export default createIconPack({ package: "heroicons", dir: "outline" });
+```
 
-// Resolves `name` from a remote server, like GitHub!
+If using an icon set from a remote server, the icon pack file would resemble the following:
+
+```js
+import { createIconPack } from "astro-icon/pack";
+
+// Resolves `name` from a remote server, like GitHub! Notice that the `dir` option is not required
 export default createIconPack({
@@ -117,2 +125,3 @@ url: "https://raw.githubusercontent.com/radix-ui/icons/master/packages/radix-icons/icons/",
 import { loadMyPackSvg } from "my-pack";
+
 export default async (name: string): Promise<string> => {
@@ -148,2 +157,5 @@ const svgString = await loadMyPackSvg(name);
 <Icon name="annotation" /> <!-- will be red -->
+
+<!-- Example using Tailwind to apply color -->
+<Icon name="annotation" class="text-red-500" /> <!-- will be red-500 -->
 ```
@@ -162,1 +174,7 @@
 See the [`Props.ts`](./packages/core/lib/Props.ts) file for more details.
+
+## Troubleshooting
+
+### Icon not found
+
+When an icon is not found, `Icon` uses a fallback icon of a black box. This is likely either a typo on the `name` prop or a missing svg file in the `src/icons` folder.

No alert changes

Improved metrics

Total package byte prevSize

30012

increased by2.38%

Number of lines in readme file

177

increased by11.32%

Worsened metrics

Lines of code

666

decreased by-0.15%

No dependency changes