Merge branch 'natemoo-re-main'

advanced-astro · Oct 14, 2023 · 846e62c · 846e62c
2 parents 8eaac06 + 3124648
commit 846e62c
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 11 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "astro": "^1.0.0-beta.2",
-    "astro-icon": "0.8.0"
+    "astro-icon": "0.8.1"
   },
   "dependencies": {
     "heroicons": "^1.0.5"

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "build": "yarn workspace www run build",
     "dev": "yarn workspace demo run dev",
     "lint": "prettier \"**/*.{js,ts,md,json}\""
   },

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,13 @@
 # astro-icon
 
+## 0.8.1
+
+### Patch Changes
+
+- [#106](https://github.com/natemoo-re/astro-icon/pull/106) [`23c032b`](https://github.com/natemoo-re/astro-icon/commit/23c032b41e462107b83c5ce1960f2c5098e2d174) Thanks [@stramel](https://github.com/stramel)! - docs: better docs on Icon Packs, styling, and fallback icon
+
+* [#109](https://github.com/natemoo-re/astro-icon/pull/109) [`4e5f0a9`](https://github.com/natemoo-re/astro-icon/commit/4e5f0a942af7e5515a901e91a2bcd2fc477fcd76) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Remove `vite/client` reference
+
 ## 0.8.0
 
 ### Minor Changes

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -94,16 +94,24 @@ import { Sprite } from 'astro-icon';
 `astro-icon` supports custom local icon packs. These are also referenced with the `pack` and/or `name` props.
 
 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" });
+```
+
+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!
+// Resolves `name` from a remote server, like GitHub! Notice that the `dir` option is not required
 export default createIconPack({
   url: "https://raw.githubusercontent.com/radix-ui/icons/master/packages/radix-icons/icons/",
 });
@@ -113,6 +121,7 @@ If you have custom constraints, you can always create the resolver yourself. Exp
 
 ```ts
 import { loadMyPackSvg } from "my-pack";
+
 export default async (name: string): Promise<string> => {
   const svgString = await loadMyPackSvg(name);
   return svgString;
@@ -143,6 +152,9 @@ import { Icon } from 'astro-icon';
 
 <Icon name="adjustment" /> <!-- will be blue -->
 <Icon name="annotation" /> <!-- will be red -->
+
+<!-- Example using Tailwind to apply color -->
+<Icon name="annotation" class="text-red-500" /> <!-- will be red-500 -->
 ```
 
 ## Props
@@ -178,3 +190,9 @@ import { Icon } from "astro-icon";
 ```
 
 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.
diff --git a/packages/core/lib/utils.ts b/packages/core/lib/utils.ts
@@ -1,4 +1,3 @@
-/// <reference types="vite/client" />
 import { SPRITESHEET_NAMESPACE } from "./constants";
 import { Props, Optimize } from "./Props";
 import getFromService from "./resolver";

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "astro-icons",
+  "name": "astro-icon",
   "version": "0.8.1",
   "type": "module",
   "exports": {

diff --git a/packages/service/package.json b/packages/service/package.json
@@ -2,7 +2,6 @@
   "name": "service",
   "private": true,
   "version": "0.1.0",
-  "type": "module",
   "author": {
     "name": "Nate Moore",
     "email": "[email protected]",

diff --git a/packages/www/CHANGELOG.md b/packages/www/CHANGELOG.md
@@ -1,5 +1,12 @@
 # www
 
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`23c032b`](https://github.com/natemoo-re/astro-icon/commit/23c032b41e462107b83c5ce1960f2c5098e2d174), [`4e5f0a9`](https://github.com/natemoo-re/astro-icon/commit/4e5f0a942af7e5515a901e91a2bcd2fc477fcd76)]:
+  - [email protected]
+
 ## 0.0.7
 
 ### Patch Changes

diff --git a/packages/www/package.json b/packages/www/package.json
@@ -1,6 +1,6 @@
 {
   "name": "www",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": true,
   "type": "module",
   "scripts": {
@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "astro": "^1.0.0-beta.2",
-    "astro-icon": "0.8.0"
+    "astro-icon": "0.8.1"
   }
 }