vue3批量创建svg icon组件

原创

已于 2024-02-28 16:35:06 修改 · 562 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-02-28 16:00:37 首次发布

本文介绍了如何在Vue3项目中通过vite插件vite-plugin-svg-icons动态导入SVG文件，并将其转换为可复用的Vue组件，以及如何批量生成和在ElementPlus中使用自定义SVG组件的过程。

1、通过插件动态导入svg文件

安装vite插件vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D

配置插件svg-icon.ts

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

export default function createSvgIcon(isBuild: boolean) {
  return createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), "src/assets/icons/svg")],
    symbolId: "icon-[dir]-[name]",
    svgoOptions: isBuild,
  });
}

vite导入插件vite.config.ts

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd());
  const { VITE_APP_ENV } = env;
  const config = command === "build" ? buildConfig : serveConfig;
  return {
    plugins: [vue(), createSvgIcon(command === "build")],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    ...confi