search

natemoo-re / astro-icon

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

Installed astro-icon but it is not working?? #168

Closed agi-omar closed 6 months ago

agi-omar commented 6 months ago

Hi! First of all I want to say thank you to everyone behind this project. I'm a bit of a greenhorn still learning and I can't get the module to work.

image
agi-omar commented 6 months ago

it worked for a bit after I changed removed /components from import {Icon} from 'astro-icon/components'

but then shortly after it stopped working and I'm getting the following from the terminal: 10:20:13 pm [vite] Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 10:20:13 pm [vite] Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 10:20:13 pm [vite] Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 10:20:13 pm [vite] Pre-transform error: Unexpected tokenSpritesheet. Expected.or( 10:20:13 pm [vite] Pre-transform error: Unexpected tokenload. Expected.or( 10:20:13 pm [vite] Error when evaluating SSR module /node_modules/astro-icon/index.ts: failed to import "/node_modules/astro-icon/lib/Icon.astro" |- RollupError: Unexpected tokenload. Expected.or(` at error (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:337:30) at nodeConverters (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:2084:9) at convertNode (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:969:12) at convertProgram (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:960:48) at parseAstAsync (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:2150:20) at async ssrTransformScript (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49543:15) at async loadAndTransform (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49131:11)

10:20:13 pm [vite] Error when evaluating SSR module C:\Design\Projects\Prevalence\astromax-valence\astro.config.mjs: failed to import "/node_modules/astro-icon/index.ts" |- RollupError: Unexpected token load. Expected . or ( at error (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:337:30) at nodeConverters (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:2084:9) at convertNode (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:969:12) at convertProgram (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:960:48) at parseAstAsync (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:2150:20) at async ssrTransformScript (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49543:15) at async loadAndTransform (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49131:11)

[astro] Unable to load your Astro config

Unexpected token load. Expected . or ( Stack trace: at error (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:337:30) at convertNode (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:969:12) at parseAstAsync (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:2150:20) at async loadAndTransform (file:///C:/Design/Projects/Prevalence/astromax-valence/node_modules/astro/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49131:11)`

scriptogre commented 6 months ago

Same issue on my side.

scriptogre commented 6 months ago

Issue was that I have done npm install astro-icon@latest (which installs version 0.8). I should've used npm install astro-icon@next to install the latest version v1. All works now.

agi-omar commented 6 months ago

Awesome! Do I need to uninstall v0.8 if I install v1? Do you think it will affect performance/bundle size?

scriptogre commented 6 months ago

I just removed the whole node_modules folder, removed the package-lock.json file, went into my package.json and made sure there's only "astro-icon": "next" listed, then did a clean npm install.

jonvillalobos commented 6 months ago

Awesome! Do I need to uninstall v0.8 if I install v1? Do you think it will affect performance/bundle size?

Hey, I'm experiencing the same issue. Any luck getting it to work?

agi-omar commented 6 months ago

Awesome! Do I need to uninstall v0.8 if I install v1? Do you think it will affect performance/bundle size?

Hey, I'm experiencing the same issue. Any luck getting it to work?

I got it to work. What is happening with you exactly?

jonvillalobos commented 6 months ago

Awesome! Do I need to uninstall v0.8 if I install v1? Do you think it will affect performance/bundle size?

Hey, I'm experiencing the same issue. Any luck getting it to work?

I got it to work. What is happening with you exactly?

I got it to work as well. Thank you!

agi-omar commented 6 months ago

You're welcome! Happy coding! Side question: Has anyone been able to set icon size with tailwind?

scriptogre commented 6 months ago

You're welcome! Happy coding! Side question: Has anyone been able to set icon size with tailwind?

Sure. Just do <Icon name="icon-name" class=“w-8 h-8" />

agi-omar commented 6 months ago

You're welcome! Happy coding! Side question: Has anyone been able to set icon size with tailwind?

Sure. Just do <Icon name="icon-name" class=“w-8 h-8" />

Thanks! That worked. I was doing size-8 and it stopped working after updating to v1.