vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤

更新时间：2023年09月07日 11:13:48 作者：猪拱小白菜

这篇文章主要介绍了vue3+vite+ts通过svg-sprite-loader插件使用自定义图标,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

第一步

首先下载svg插件和fs模块；后续需要用到

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

第二步新建文件夹和文件

将下载好的svg文件放入新建好的svg文件夹中
index.vue 代码这里是创建一个<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 将创建好的<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
    },
  }
});

注意

如果引入的文件爆红，“该目录不在项目的文件列表中，项目必须列出所有文件，或使用 “include” 模式。”

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

最后使用

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

引入成功

到此这篇关于vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的文章就介绍到这了,更多相关vue3+vite+ts 自定义图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue父组件中获取子组件中的数据(实例讲解)
下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue项目配置国际化$t('')的介绍和用法示例
这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下
2023-09-09
Vue.js图片滑动验证的实现示例
为了防止有人恶意使用脚本进行批量操作,会设置图片滑动验证，本文就介绍了Vue.js图片滑动验证的实现示例，感兴趣的可以了解一下
2023-05-05
深入理解vue-router之keep-alive
本篇文章主要介绍了深入理解vue-router之keep-alive。keep-alive使被包含的组件保留状态，或避免重新渲染，有兴趣的可以了解一下
2017-08-08
使用imba.io框架得到比 vue 快50倍的性能基准
imba 是一种新的编程语言，可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下
2019-06-06
VUE3学习教程之全局组件和局部组件
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下
2022-01-01
vue2更改data里的变量不生效时,深层更改data里的变量问题
这篇文章主要介绍了vue2更改data里的变量不生效时,深层更改data里的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue中onmounted周期里获取不到dom的原因及分析
这篇文章主要介绍了vue中onmounted周期里获取不到dom的原因及分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue使用map代替Aarry数组循环遍历的方法
这篇文章主要介绍了vue使用map代替Aarry数组循环遍历的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
.vue文件加scoped 样式不起作用的解决方法
本篇文章主要介绍了.vue文件加scoped 样式不起作用的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05