vue3批量创建svg icon组件

落叶上的秋

已于 2024-02-28 16:35:06 修改

阅读量503

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

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

本文链接：https://blog.youkuaiyun.com/huanglgln/article/details/136347891

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章

200万优质内容无限畅学