I'm using the ionicons library in my Vue project but I get this warning in the console:

Vue warn]: Failed to resolve component: ion-icon. 
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

I tried configuring my vue.config.js like this poster but it hasn't worked for me. This is my vue.config.js at the moment:

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options['compilerOptions'] = {
          ...options.compilerOptions || {},
          isCustomElement: tag => tag === 'ion-icon'
        };
        return options;
      })
  }
})

CodePudding user response：

1. Make sure you have the following <script> tags in your public/index.html:

 <script type="module" 
 src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"> 
 </script>
 <script nomodule 
 src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Try adding this line in your main.js, as this will ignore all components with an ion- prefix:

Vue.config.ignoredElements = [/^ion-/]

Take a look at: https://dev.to/devmount/how-to-use-ionicons-v5-with-vue-js-53g2

CodePudding user response：

Is this the answer you looking for? Usually I meet this warning just add the component and the warn will be fixed. write on your vue page

import {IonIcon} from '@ionic/vue';
export default defineComponent({
  compontents:{
   IonIcon
  }
})