diff --git a/demo/package.json b/demo/package.json index 3fdc473d..823c5a27 100644 --- 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 index 3b3b0035..c5cd2458 100644 --- 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 index f21df037..ba80e20c 100644 --- 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 index d288412d..4b5d3c24 100644 --- 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 => { const svgString = await loadMyPackSvg(name); return svgString; @@ -143,6 +152,9 @@ import { Icon } from 'astro-icon'; + + + ``` ## 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 index 6103d527..aec11e25 100644 --- a/packages/core/lib/utils.ts +++ b/packages/core/lib/utils.ts @@ -1,4 +1,3 @@ -/// 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 index 772e7ea8..edbeeff2 100644 --- 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 index ef72451e..02e4929e 100644 --- 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": "nate@natemoo.re", diff --git a/packages/www/CHANGELOG.md b/packages/www/CHANGELOG.md index 234c7d1a..e674c8e2 100644 --- 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)]: + - astro-icon@0.8.1 + ## 0.0.7 ### Patch Changes diff --git a/packages/www/package.json b/packages/www/package.json index 5e3da535..daf0d1a6 100644 --- 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" } }