Vue3 + vite svg 组件

Vue3 + vite 编写svg组件，本质上和vue2 + webpack 没有多大出入，唯一不同的是得编写一个vite插件

WbIcon.vue

这个文件和之前没多大改变，不一样之处是用了setup,可以按需更改，当然了不改也能食用。

在main.js中引入WbIcon组件

网上有好多文章，没说明引入，我这提一下

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
import WbIcon from "@/components/icon/WbIcon.vue";

import "@/assets/css/index.scss";

const app = createApp(App);
app.component("WbIcon", WbIcon);

app.use(router).mount("#app");

新建如下目录，补全文件

assets
├── icon
│   ├── svg // 下存储svg文件
│   │   └── analysis-icon.svg
│   └── svgBuilder.js // vite 插件主要是为了loader svg

svgBuilder.js

这个文件是从网上直接copy的，他们写是ts版本的，我这删掉类型声明那些东西，改成了js版本的

import { readFileSync, readdirSync } from "fs";

let idPerfix = "";
const svgTitle = /+].*?)>/;
const clearHeightWidth = /(width|height)="([^>+].*?)"/g;

const hasViewBox = /(viewBox="[^>+].*?")/g;

const clearReturn = /(\r)|(\n)/g;

function findSvgFile(dir) {
  const svgRes = [];
  const dirents = readdirSync(dir, {
    withFileTypes: true,
  });
  for (const dirent of dirents) {
    if (dirent.isDirectory()) {
      svgRes.push(...findSvgFile(dir + dirent.name + "/"));
    } else {
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(clearReturn, "")
        .replace(svgTitle, ($1, $2) => {
          let width = 0;
          let height = 0;
          let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
            if (s2 === "width") {
              width = s3;
            } else if (s2 === "height") {
              height = s3;
            }
            return "";
          });
          if (!hasViewBox.test($2)) {
            content += `viewBox="0 0 ${width} ${height}"`;
          }
          return ``;
        })
        .replace("", "");
      svgRes.push(svg);
    }
  }
  return svgRes;
}

export const svgBuilder = (path, perfix = "icon") => {
  if (path === "") return;
  idPerfix = perfix;
  const res = findSvgFile(path);
  return {
    name: "svg-transform",
    transformIndexHtml(html) {
      return html.replace(
        "",
        `
          
            
        `
      );
    },
  };
};

vite.config.js内补全插件

做完以上这些，在vite.config.js添加plugin即可

import { defineConfig } from "vite";
import { svgBuilder } from "./src/assets/icon/svgBuilder";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    svgBuilder("./src/assets/icon/svg/")],
});

最终效果

• 使用

• 效果

  
  
  最终效果加载失败