-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uncaught TypeError: Failed to construct 'URL': Invalid base URL #1032
Comments
Any workaround? I think this might be related to ionic-team/ionic-framework#24480 |
You can avoid this error by using
|
same problem with latest ionic |
ignore this, my code is wrong .... |
I'm facing this issue too using |
I figured out a solution for this by looking through the source code, which was that
Here's the content of that file:
|
I solved it by filing the Here's my code that was not working: (react) import { IonIcon } from '@ionic/react';
<IonIcon name="heart"></IonIcon> Here's my code that works: import { IonIcon } from '@ionic/react';
import { heart } from 'ionicons/icons';
<IonIcon icon={heart}></IonIcon> |
Wow, shocked that this has been open for a year. My coworker and I found a simpler workaround for this while upgrading our app. In your store definition:
In every page:
|
An alternative to this solution. <ion-icon :icon="icons.documentOutline"></ion-icon> import { IonIcon } from '@ionic/vue';
import * as icons from 'ionicons/icons'; The only downfall is that you end with two imports in each page you wish to use the icons. Great if you are working with an ide as vscode: |
This is still a problem for me, any tips?
In my template:
Gives " error 'eyeOutline' is defined but never used no-unused-vars" If I disable that eslint check, I get this error: [Vue warn]: Property "eyeOutline" was accessed during render but is not defined on instance. Attempting to import all icons into a namespace also doesn't work. I'm not using the vue composition API (using the older options api method). So frustrated, thanks for any help. |
According to answers above, this working for me at nuxt3 and Ionic, I'm using module @nuxtjs/ionic. Icons are auto-imported from ionicons/icons by default, following the pattern of camel case naming with ionicons in front of the original icon name, that you can find on the official ionicons website. so, this is nuxt.config.ts
// and using in component template
|
I couldn't find any documentation for this, I took it from ionic generated template app.page.html app.page.ts
|
Thank you @Syahrul ! Works on ionic/angular: "^7.5.0" |
If you need to import all icons in ionic 7, Angular standalone (I use angular 17) and use it everywere just add to the app.component.ts the following code:
|
When I need import all icons in ionic 7, for me works: app.component.ts
|
Using Ionicons 6.0.0 with Ionic 6.0.1
The text was updated successfully, but these errors were encountered: