Vite 使用 ionicons

在 ionicons 的官方文档中，对于不使用ionic框架的情况，建议使用cdn的方式引入。

第二行是为了兼容不支持module的浏览器，不考虑兼容的话不用加

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/6.0.2/ionicons/ionicons.esm.min.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/6.0.2/ionicons.min.js"></script>

吐槽

ionicons的官方上版本号还是5.5.2，但是npm上包版本都到6.0.2了。

根据github上的更新指南，对大多数开发者来说没有影响。所以用新不用旧。

对于 vite 项目，cdn的引入自然是要放在./index.html中。

然后就可以使用：

<ion-icon name="logo-ionic"></ion-icon>

现在图标可以正常显示了。但是如果你打开调试工具，会发现如下报错：

[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. 
  at <ParentCompoent> 
  at <App>

这是因为 vue 无法解析ion-icon这个组件。其实提示也给出解决方案了，要配置compilerOptions.isCustomElement。

在 vite ^2.9.x中，compilerOptions.isCustomElement要这么配：

在vite.config.ts中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }
    }),
  ],
})