vue3使用字节(icon-park)自定义项目图标

539 阅读1分钟

1、index.html引入icon-park自定义项目链接

image.png

2、使用方法

  <iconpark-icon name="riqi" size='22' fill='red'></iconpark-icon>
  

常见错误

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

解决方法

vite.config.ts

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag === "iconpark-icon",
        },
      },
    }),
  ],
});