Closed mamillastre closed 6 days ago
My workaround is just to add them all like this and call the func in the app.component constructor. This way we only have our icons included since we only use outline this also reduced our bundle size yay.
import { addIcons } from 'ionicons'
import {
// ...
} from 'ionicons/icons'
const ALL_ICONS = {
// ...
}
export const addAllIcons = () => addIcons(ALL_ICONS)
I'm going to move this to the Ionicons project instead. This isn't a bug in Ionicons but rather a missing asset path in your project. Stencil does not know where to look for the SVGs which is why you get an invalid URL error. However, we don't have documentation that shows how to do this, so I think we should add that.
Try adding the following to main.ts
in your project:
import { setAssetPath } from '@stencil/core';
...
setAssetPath(`${window.location.origin}/`);
This will set the asset path to something like http://localhost:8100/
or http://example.com/
(wherever your app is served from).
It works just fine, thank you.
Do you plan to set a default assets path in ionicons or maybe expose this configuration method from ionicons or Ionic framework ? Because I think it's strange to have to import @stencil/core when using only Ionic or ionicons.
At the moment our recommendation is to use the setAssetPath
import from @stencil/core
.
I can second this; I was able to get @liamdebeasi's recommendation working in the www
output, but when I attempt the same using the Angular output target, in the Angular test-app, when I pause on the line where getAssetPath
is called when Angular runs, it's undefined:
It is required that setAssetPath
and getAssetPath
come from the same Stencil runtime as the components you are using. For example, if we build the Ionicon project, every output target has its own Stencil runtime. You can import { getAssetPath } from 'ionicons'
because getAssetPath
is being used within the project. However since it doesn't use setAssetPath
, it won't be compiled into the runtime bundle, hence the import error.
At the moment our recommendation is to use the
setAssetPath
import from@stencil/core
.
This would only work if the project that exports components has the externalRuntime
set to true
. I will take this to the @ionic-team/stencil team to work on a fix for this.
I raised a PR with a fix 👆
Hi everyone,
This has been resolved via https://github.com/ionic-team/ionicons/pull/1372.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
If we want to import all icons manually (or custom icons) in a "svg" folder, the IonIcon standalone component does not show the icon when using a name. We also have the following error: Failed to construct 'URL': Invalid base URL
A recent update catches this error to show a warning that invites to use the new addIcons method (https://github.com/ionic-team/ionicons/pull/1297)
But if we copy icons manually in the "svg" folder, the "addIcons" call must not be necessary.
In utils.ts from ionicons repo (https://github.com/ionic-team/ionicons/blob/main/src/components/icon/utils.ts) we have the following code:
If we didn't add the icon with "addIcons", there is a fallback to get the icon from the "svg" folder. But the getAssetPath method always throws an error because the base URL is computed from an empty base.
Expected Behavior
The fallback work and if the icon exists in the "svg" folder, it's rendered.
Steps to Reproduce
Code Reproduction URL
https://github.com/mamillastre/ionic-standalone-icon-error
Ionic Info
Ionic:
Ionic CLI : 7.1.5 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.5.4 @angular-devkit/build-angular : 16.2.10 @angular-devkit/schematics : 16.2.10 @angular/cli : 16.2.10 @ionic/angular-toolkit : 9.0.0
Capacitor:
Capacitor CLI : 5.5.1 @capacitor/android : not installed @capacitor/core : 5.5.1 @capacitor/ios : not installed
Utility:
cordova-res : 0.15.4 native-run (update available: 2.0.0) : 1.7.4
System:
NodeJS : v20.9.0 (/usr/local/bin/node) npm : 10.1.0 OS : macOS Monterey
Additional Information
No response