Comments (13)
There's likely an issue with the asset path either not being defined or being defined incorrectly when loading the Ionicon. I'm going to move this over to the Ionicons repo so we can take a closer look.
from ionicons.
I am facing the same issue in my project:
// Works when project runs and vitest passes as well
// Works when project runs, but fails in vitest : TypeError: Invalid URL
Important Update:
When running the vitest in Node 16.60.0 there seems to be no issue - test runs succesfully.
But when the same vitest is run in Node 18.18.0 the test fails with above issue.
from ionicons.
Thanks for the issue! This issue has been labeled as holiday triage
. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!
from ionicons.
@asifrahman112 Is the path /image.svg
correct?
Angular copies everything under assets
into the build file, so in most cases it should be /assets/image.svg
or /assets/**/image.svg
.
from ionicons.
@asifrahman112 Is the path
/image.svg
correct? Angular copies everything underassets
into the build file, so in most cases it should be/assets/image.svg
or/assets/**/image.svg
.
@rdlabo yes the path is correct...since its loading correctly in my project and I can access the image on that path. But the test fails with inavlid url message
from ionicons.
@asifrahman112 Thanks reply. Now, try moving your SVG files under /assets
. The error text in the image says it is looking in /assets
.
Failed to parse URL from /assets/nozzle.svg
from ionicons.
@rdlabo The image is already placed in assets folder in the root public directory
from ionicons.
rdlabo/ionic-react-vite-src-icon@2d48a70
@asifrahman112 I had mistakenly commented on some of the configurations. Please check the project that we have made which is displayed correctly. This project is based https://github.com/ionic-team/starters/tree/main/react-vite
from ionicons.
@asifrahman112 Can you provide a GitHub repo with a minimal reproduction?
from ionicons.
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
from ionicons.
@rdlabo The image displays correctly in my project. Only the unit test fails on vitest with the error I have mentioned above
from ionicons.
@liamdebeasi I have added the stackblitz url for the issue reproduction
https://stackblitz.com/edit/ionic-react-vitest-example-qfvsxq?file=src%2Fcomponents%2FHeader.tsx
@liamdebeasi If you do npm run dev
it works correctly, and the image is displayed properly but if you do npm run test
it gives error
from ionicons.
I have the same problem. As @sagarkm mentioned above, the issue disappears when running the tests with node 16, it seems to be a problem with node 18. Any solution found to this? 🙏
from ionicons.
Related Issues (20)
- incorrect icon: ellipsis-horizontal-circle
- icon request: quotation mark icon HOT 1
- icon request: Bank Account Icon HOT 1
- icon request: It would be very nice to have a PDF icon with PDF download icon HOT 1
- icon request: HOT 1
- bug: Power icon doesnt show up HOT 1
- feat: duotone version of ionicons HOT 4
- icon request: X (Formerly Twitter) HOT 1
- icon request: delivery truck HOT 1
- icon request: folder-add
- icon request: schedule
- icon request: Mastodon HOT 3
- icon request: TikTok HOT 1
- Logo request: X HOT 2
- icon request: X(formerly twitter) HOT 1
- bug: test
- icon request: theatre|drama-mask
- bug: Kebab case does not handle numbers properly HOT 1
- feat: why its so tough to add icon using npm and angular HOT 2
- icon request: Number Icon request HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionicons.