快捷導(dǎo)航

vue3+vite+ts?通過svg-sprite-loader?插件使用自定義圖標(biāo)的詳細(xì)步驟

更新時(shí)間：2023年09月07日 11:13:48 作者：豬拱小白菜

這篇文章主要介紹了vue3+vite+ts通過svg-sprite-loader插件使用自定義圖標(biāo),本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

第一步

首先下載svg插件和fs模塊；后續(xù)需要用到

npm install svg-sprite-loader -D
npm install fs

第二步新建文件夾和文件

將下載好的svg文件放入新建好的svg文件夾中
index.vue 代碼這里是創(chuàng)建一個(gè)<svg-icon /> 組件

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script setup lang="ts">
import { computed, defineProps } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
});
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`;
  return "svg-icon";
});
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

index.ts 代碼

import { readFileSync, readdirSync } from "fs";
let idPerfix = "";
const svgTitle = /<svg([^>+].*?)>/;
const clearHeightWidth = /(width|height)="([^>+].*?)"/g;
const hasViewBox = /(viewBox="[^>+].*?")/g;
const clearReturn = /(\r)|(\n)/g;
// 查找svg文件
function svgFind(e) {
  const arr = [];
  const dirents = readdirSync(e, { withFileTypes: true });
  for (const dirent of dirents) {
    if (dirent.isDirectory()) arr.push(...svgFind(e + dirent.name + "/"));
    else {
      const svg = readFileSync(e + dirent.name)
        .toString()
        .replace(clearReturn, "")
        .replace(svgTitle, ($1, $2) => {
          let width = 0,
            height = 0,
            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>");
      arr.push(svg);
    }
  }
  return arr;
}
// 生成svg
export const createSvg = (path: any, perfix = "icon") => {
  if (path === "") return;
  idPerfix = perfix;
  const res = svgFind(path);
  return {
    name: "svg-transform",
    transformIndexHtml(dom: String) {
      return dom.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>`
      );
    },
  };
};

第三步打開main.ts 將創(chuàng)建好的<svg-icon />組件注入到全局組件

import { createApp } from "vue";
import svgIcon from "@/icons/index.vue";
const app = createApp(App);
app.component("svg-icon", svgIcon);
app.mount("#app");

第四步在根目錄打開vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 引入icons文件夾中的index.ts文件 
import { createSvg } from "./src/icons/index";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), createSvg("./src/icons/svg/")],
  resolve: {
    alias: {
      "@": path.resolve("./src"), // 相對路徑別名配置，使用 @ 代替 src
    },
  }
});

**

注意

如果引入的文件爆紅，“該目錄不在項(xiàng)目的文件列表中，項(xiàng)目必須列出所有文件，或使用 “include” 模式。”

解決方案：打開根目錄下的tsconfig.node.json文件的inclue中添加"src/icons/"
完整代碼： “include”: [“vite.config.ts”, "src/icons/",]

**

最后使用

 <svg-icon name="hamburger" width="20" height="20" />

引入成功

到此這篇關(guān)于vue3+vite+ts 通過svg-sprite-loader 插件使用自定義圖標(biāo)的文章就介紹到這了,更多相關(guān)vue3+vite+ts 自定義圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: