search

natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!
https://astroicon.dev
Other
1.01k stars 57 forks source link

Improve Documentation on Local Icon Pack #53

Closed zaha closed 1 year ago

zaha commented 1 year ago

Hi!

While trying to create my own local icon package I noticed the docs for astro/icon don't reflect the latest changes in the import path here: https://github.com/natemoo-re/astro-icon#local-icon-packs

import { createIconPack } from "astro-icon";

should be 

import { createIconPack } from "astro-icon/pack";

according to the changelog.

Also, the following comment could be improved:

// Resolves `heroicons` dependency and reads SVG files from the `heroicons/outline` directory
export default createIconPack({ package: "heroicons", dir: "outline" });

Does this mean the icon will be searched for in src/icons/heroicons/outline? I tried it like that but I'm getting a pretty long error message :sweat_smile:

TypeError: String.prototype.startsWith called on null or undefined at startsWith () at Proxy.pathToFileURL (node:internal/url:1474:20) at eval (/node_modules/astro-icon/lib/createIconPack.ts:16:53) at Module.load [as default] (/node_modules/astro-icon/lib/utils.ts:156:28) at eval (/node_modules/astro-icon/lib/Icon.astro:26:52) at Module.renderToIterable (/node_modules/astro/dist/runtime/server/render/astro.js:79:27) at renderAstroComponentInline (/node_modules/astro/dist/runtime/server/render/component.js:75:52) at renderAstroComponentInline.next () at Module.renderChild (/node_modules/astro/dist/runtime/server/render/any.js:25:5) at processTicksAndRejections (node:internal/process/task_queues:96:5)

I'm also missing the info whether it's possible to skip the dir parameter and put the icons directly into src/icons/heroicons/?

PersonalInfoHidden commented 1 year ago

For me I just needed to import default like this:

import createIconPack from "astro-icon";

But I could also import the function like this:

import { createIconPack } from "astro-icon/lib/createIconPack";

However this did not work:

import { createIconPack } from "astro-icon/pack";

Strange 🤔

Also the Documentation on "Local Icon Packs" has two default exports which makes it difficult to follow, it would probably be best to put an "or" or separate the snippets as alternatives to communicate it better.