Vue3 + vite svg 组件

听风念旧人

已于 2022-03-27 18:26:24 修改

阅读量1.6k

点赞数 1

分类专栏： Vue 文章标签： vue.js web

于 2022-03-27 18:18:11 首次发布

本文链接：https://blog.csdn.net/qq_44306441/article/details/123778160

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

WbIcon.vue

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

<template>
    <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script setup>
import { computed, defineProps } from 'vue';
const props = defineProps({
    name: {
        type: String,
        required: true,
    }
})

const iconName = computed(() => `#icon-${props.name}`);

const svgClass = computed(() => {
    if (props.name) {
        return `wb-icon svg icon-${props.name}`
    }
    return 'wb-icon svg'
})
</script>

<style lang="scss" scoped>
.wb-icon.svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
    vertical-align: middle;
}
</style>

在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 = /<svg([^>+].*?)>/;
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 `<symbol id="${idPerfix}-${dirent.name.replace(
            ".svg",
            ""
          )}" ${content}>`;
        })
        .replace("</svg>", "</symbol>");
      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(
        "<body>",
        `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join("")}
            </svg>
        `
      );
    },
  };
};

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/")],
});

最终效果

使用

<template>
  <wb-icon name="analysis-icon" style="color:aqua; margin: 200px;font-size: 2em;"></wb-icon>
</template>

效果

听风念旧人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3 + vite svg 组件

Vue3 + vite 编写svg组件，本质上和vue2 + webpack 没有多大出入，唯一不同的是得编写一个vite插件WbIcon.vue这个文件和之前没多大改变，不一样之处是用了setup,可以按需更改，当然了不改也能食用。<template> <svg :class="svgClass" aria-hidden="true" v-bind="$attrs"> <use :xlink:href="iconName" /> &
复制链接

扫一扫