xar commented 5 years ago

Bug Report

Ionic version: [x] 4.6.2 [x]@ionic/vue next

Current behavior: After update icons aren't visible and they are probably ignored by webpack in build process. Application is trying to load it from path like http://localhost:8080/svg/md-fastforward.svg although prior to 4.6 it was loading it from transpiled path with chunk sum in path.

Expected behavior: Icons will load correctly

Steps to reproduce: Create new project with @vue/cli add @ionic/vue and try to use icons

Related code: https://vibrant-poitras-bc75b8.netlify.com/#/ - There is <ion-icon name="fastforward"> right under Hello world title

https://github.com/xar/ionic-icons-vue-problem

stripathix commented 5 years ago

I am also facing the same issue.

sneko commented 5 years ago

Still having this issue from version 4.6.0 to 4.7.1 😢

Does anyone have a fix/workaround please?

Omer-Shahar commented 5 years ago

There is a similar problem in React: #18847

hunterloftis commented 5 years ago

I was experiencing the same issue; ionic 4 + vue doesn't seem to import & add any ionic icons by default other than the ones used by internal ionic components.

I also couldn't find any docs on how to add icons to the build. Checking out the commit history of @ionic/vue led me to this fix (this adds the "key" icon to the build):

// Fix for missing ionicons
// re: https://github.com/ionic-team/ionic/commit/f56fea6a1fa93a2109a2cba35365fda0383341e8
import { addIcons } from 'ionicons'
import { key } from 'ionicons/icons'

addIcons({
  'ios-key': key.ios,
  'md-key': key.md
})

sneko commented 5 years ago

As you specified @hunterloftis , I also saw that in the Ionic code and it works fine. I don't like that much the way it is verbose to register iOS and Android icons... but whatever 😄

Note, I'm using the addIcons in each Vue component that requires some icons, to be more component specific.

JeremyDfr commented 5 years ago

If you are interested, I fix this problem by changing Ionicons version to 4.5.8 or install latest version of @ionic/vue to 0.0.9 $ npm install @ionic/vue@0.0.9.

mcroni commented 4 years ago

@JeremyDfr , i think the problem still persists, had to apply what @hunterloftis did, I'm on the latest ionic/vue version too

liamdebeasi commented 4 years ago

Thanks for the issue! We recently released an all new Ionic Vue beta that should fix most of the issues reported. Can you try out the latest Ionic Vue beta and let me know if this is still an issue?

Getting Started with the latest Ionic Vue beta

The new Ionic Vue beta is built for Vue 3. Moving forward, we are not going to support Vue 2. For information on how to get started with the latest beta, check out our Ionic Vue Getting Started Guide.

At this time, we do not have a migration path from Ionic Vue built for Vue 2 to Ionic Vue built for Vue 3, but the Ionic Framework differences should be minimal.

Feel free to check out our Ionic Vue Beta Announcement blog post for more details on this release.

Help! The reported issue still happens in the latest Ionic Vue beta.

Please follow up here with the issue reproduced in an Ionic starter application running the latest Ionic Vue beta. Also include any revised steps to reproduce the issue. Issues that do not have a GitHub repo with the issue reproduced in an Ionic starter app will be closed.

My issue is resolved/My issue is no longer relevant.

You can either close the issue yourself, or do nothing. If there is no response within 14 days, this thread will be automatically closed.

I have a new issue.

Please create a new issue. Be sure to reproduce the issue in an Ionic starter application running the latest Ionic Vue beta and include a link to the repo.

Be sure to search for your issue first, as the issue you are running into may have already been reported.

We are excited to get closer to the Ionic Vue release and look forward to welcoming new Vue developers to the Ionic community. Please let me know if there are any questions. Thanks!

ionitron-bot[bot] commented 4 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionic-team / ionic-framework

bug: Icons not working with @ionic/vue~next #18837

Bug Report