将 svg 文件加载为 vue 组件

vite-svg-loader 是一个 vite2.x 社区插件,只支持 vue3,用于将 svg 文件转换成 vue 组件进行使用

基本使用

安装插件

npm install vite-svg-loader -D

在 vite.config.js 里配置插件

import svgLoader from "vite-svg-loader";

export default defineConfig({
  plugins: [vue(), svgLoader()],
});

准备 svg 文件进行引入 svg

import avatar from "@/assets/img/avatar.svg?component";

和使用组件一样使用 svg

<template>
  <avatar />
</template>