#Using astro-icon#v1 with Astro 2.6

44 messages · Page 1 of 1 (latest)

thorn tundra
#

Trying to use astro-icon#v1. I've installed from github since it's not available on npm yet. I'm getting a map error.

Cannot read properties of undefined (reading 'map')
I've looked at the example project within the repo as well as referred to the documentation.
What am I doing wrong?

// astro config
import icon from "astro-icon";
export default defineConfig({
integrations: [
    icon({
      include: {
          ri: ['*']
      }
  })
]
})

// component.astro
---
import { siteMeta, profiles } from "../site.config";
import { Icon } from "astro-icon";
---
<Icon
name={profile.icon}
width={24}
</Icon>

Dependencies:

"astro-icon": "github:natemoo-re/astro-icon#v1",
"@iconify-json/ri": "^1.1.9",
"svgo": "^3.0.2"
#

I also tried import { Icon } from 'astro-icon/components'

static imp
#
  1. npm i astro-icon
  2. Create /src/icons directory where you store your SVGs OR load directly from Iconify (See codeblocks below)
  3. Use it in your project:
---
import { Icon } from 'astro-icon';
---

<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />

OR

---
import { Icon } from 'astro-icon'
---

<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon pack="mdi" name="account" />

<!-- Equivalent shorthand -->
<Icon name="mdi:account" />
thorn tundra
#

I've tried the demo in v1 and it doesn't compile either, so it may not be ready?

#

BTW, I already had this working with the master branch, but 0.8.1 still doesn't work with svgo v3

static imp
#

Ohh okay, sorry don't know why I totally ignored the version you mentioned haha
Well that is quite the possibility it seems, try to follow the steps again just to make sure, but again.. its not the latest release anyway

thorn tundra
#

Regardless, thanks for chiming in @static imp

#

@autumn flare Is v1 not ready for a beta preview?

static imp
cosmic niche
#

Hey, if you're trying to use the V1, you need to install the ms/v1 branch right now since it has the built directory. It's not identical to the V1 yet but I can push a build version once I get back

#

Feel free to ping me if you still have trouble with it

thorn tundra
#

@cosmic niche that would be great! Thanks

cosmic niche
copper mortar
#

Since you've manually downloaded it, are you using the correct version in your package.json?

image.png
thorn tundra
cosmic niche
#

What version of astro are you using? I'm able to not have src/icons and have an empty src/icons both work

thorn tundra
#

I'm using Astro 2.7.1 BTW

cosmic niche
#

Running builds locally and netlify. I'll double-check with the 2.7.1

#

for some reason my version was set at 1.9.2

thorn tundra
#

I don't know if it matters, but using node v18.13.0

cosmic niche
#

It successfully worked on netlify for me as well

thorn tundra
#

netlify.toml

[build]
  publish = "dist"
  command = "npm run build"
cosmic niche
thorn tundra
#

I'm gonna try starting from a barebones project – which I should've done from the start.

cosmic niche
#

if you can share the repo with me, I can try to help debug

cosmic niche
thorn tundra
#

I am posting my repo in a sec…

cosmic niche
thorn tundra
cosmic niche
#

Still strange that it required the src/icons

#

Will pull that down and give it a shot after my next meeting

thorn tundra
#

Here's a screencast:

#

It's such a minor issue in the grand scheme of things. Thanks!

cosmic niche
#

It is reproducing locally for me with your repo now. I'll look into it now. Thank you for the reproducible repo and screencast.

As you stated in the screencast, git doesn't track empty folders so that's why it was failing on your remote build.

#

It looks like the issue is tied to the new importDirectory call failing if the folder doesn't exist. I'll see if I can isolate the error and should prevent any issue there

#

You should be unblocked on this version of the package now.

"astro-icon": "https://gitpkg.now.sh/natemoo-re/astro-icon/packages/core?v1-alpha.1"

#

Hoping to get an actual alpha released this week

cosmic niche
#

@thorn tundra We published a new version which should provide better messaging. You can install it under the next tag npm i astro-icon@next

thorn tundra
#

Thanks @cosmic niche Got it!

thorn tundra
#

@cosmic niche Should we still be using astro-icon@next or is there a 1.0 beta? I think I'm using 1.0.0-next.2