Installed astro-icon but it is not working??
agi-omar opened this issue · comments
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.
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 token Spritesheet. 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)`
Same issue on my side.
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.
Awesome! Do I need to uninstall v0.8 if I install v1? Do you think it will affect performance/bundle size?
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.
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?
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?
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!
You're welcome! Happy coding! Side question: Has anyone been able to set icon size with tailwind?
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" />
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.