vite3 + vue3如何封装健壮的【SVG插件】?

头像
月弦笙音
     北京
    阅读 9 分钟
    1
    头图

    前言

    小伙伴们好，我是代码诗人_，今天带大家用如何用vue3 + vite3封装一个健壮的svg插件！

    首先得知道为什么要使用svg

    • 概念：SVG是一种基于XML的矢量图形格式，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体,用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。它由万维网联盟制定，是一个开放标准。
    • 优点：可伸缩性，响应性，交互性，可编程性，体积小性能高。
      因为SVG是基于矢量的，所有在放大图形时不会出现任何降低或丢失保真度的情况。它只是重新绘制以适应更大的尺寸，这使得它非常适合多语境场景，例如响应式Web设计。而且性能也极佳，与栅格图形（如GIF，JPG和PNG）相比，SVG图形通常是较小的文件。
    • 浏览器支持度：svg对市面上常见的浏览器已经有很好的支持度

    image.png

    **所以，综上所述，日常开发中使用svg来代替图片及图标是我们的不二选择！**

    # 为什么要封装
    如果对svg不封装，代码必定会难以维护，阅读性极差，比如：

    image.png
    再看下封装后的代码效果：

    image.png

    一个自定义标签组件即可搞定，也方便维护和阅读

     <svg-icon iconName="q" />

    下面我们就开始编写插件及组件，来实现它，分5步走

    • 第一步： 建立所需文件
    • 第二步：封装转换并读取svg文件的插件
    • 第三步：利用vite transformIndexHtml封装渲染svg内容
    • 第四步：封装vue组件并全局注册

    • 第五步：页面中应用传值

      第一步：建立所需文件

      首先在src文件夹下建立如下文件：

    image.png

    目录文件解释

    • SvgIcon/index.vue 封装<svg-icon />组件
    • svg目录存放你的svg格式的文件
    • index.js 全局注册svg的钩子
    • svgTagView.js svg插件

    第二步：封装（转换并读取svg）文件的插件

    1. 首先在svgTagView.js中引入node文件系统,并在vite中使用

    import { readFileSync, readdirSync } from 'fs'
    • readdirSync：同步 readdir().返回文件数组列表
    • readFileSync：同步读取文件内容

    还不知道node fs文件系统的小伙伴，请点击 传送门

    然后在vite.config.js中的插件plugins中使用它

    import { svgTagView } from './src/icons/svgTagView.js'
 plugins: [
        vue(),
        svgTagView()
      ]

    2. 设置svg的正则匹配标签及属性

    const attributeMatch = {
  svgTag: /<svg([^>+].*?)>/, //匹配多个<svg 未闭合的标签
  clearWidthHeight: /(width|height)="([^>+].*?)"/g, // 全局匹配为svg的width或height属性
  hasViewBox: /(viewBox="[^>+].*?")/g, // 全局匹配视区属性（viewBox）
  clearReturn: /(\r)|(\n)/g // 全局匹配回车和换行
}
let idPerfix = ''

    还不知道svg属性viewbox(svg视区，就是在svg上截取一小块，放大到整个svg显示)的小伙伴，请点击 传送门

    3. 递归的形式读取svg文件信息及文件列表

    递归svg文件，那么现在就用到了readdirSync和 readFileSync;

    (1. 首先我们用readdirSync获取文件列表信息
    const svgRes = [] //
let dir = './src/icons/svg/', //存放svg文件的目录
  const dirents = readdirSync(dir, {
    withFileTypes: true // 将文件作为fs.Dirent对象返回,
  })
  console.log(dirents) // 文件列表信息

    fs.Dirent 是目录项（可以是文件或目录中的子目录）的表示，通过读取 fs.Dir 返回。 目录项是文件名和文件类型对的组合。

    dirent会返回icons/svg下的文件列表信息

    启动项目，在终端中会看到文件列表信息，这是我的svg文件信息：

    1673597851119.png

    可以清楚地看到 文件名称name和独立的文件 [Symbol(type)]

    (2. 遍历文件列表信息，转换svg

    遍历文件获取内容需要递归，所以我们将第一步获取文件信息的代码放到一个函数中,
    用readFileSync读取文件内容，并用repalce方法配合第一大步的正则逐步匹配转换svg文件，
    最后得到一个含有<symbol标签的字符串数组

    1673599628818.png
    实现：

    function recursivelyFindSvg(dir) {
  const svgRes = []
  const dirents = readdirSync(dir, {
    withFileTypes: true // 将文件作为fs.Dirent对象返回,
  })
  
  for (const dirent of dirents) {
    if (dirent.isDirectory()) { // 判断是否一个目录
      svgRes.push(...recursivelyFindSvg(dir + dirent.name + '/')) //递归获取svg文件内容
    } else {
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(attributeMatch.clearReturn, '')
        .replace(attributeMatch.svgTag, ($1, $2) => {
          let width = 0
          let height = 0
          let content = $2.replace(attributeMatch.clearWidthHeight, (s1, s2, s3) => {
            if (s2 === 'width') {
              width = s3
            } else if (s2 === 'height') {
              height = s3
            }
            return ''
          })
          if (!attributeMatch.hasViewBox.test($2)) {
            content += `viewBox="0 0 ${width} ${height}"`
          }
          return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  console.log(svgRes)
  return svgRes
}

    运行此段代码，可以在终端看到如下信息：

    1673599628818.png
    第二大步就算完成了

    第三步：利用vite transformIndexHtml封装渲染svg内容

    上面第二步获取了svg的容，现在我们要将这些内容渲染到视图上，
    那么就用到了vite的transformIndexHtml

    1. 解释下 transformIndexHtml:

    transformIndexHtml是转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文。上下文在开发期间暴露ViteDevServer实例，在构建期间暴露 Rollup 输出的包。

    这个钩子可以是异步的，并且可以返回以下其中之一:

    • 经过转换的 HTML 字符串
    • 注入到现有 HTML 中的标签描述符对象数组（{ tag, attrs, children }）。每个标签也可以指定它应该被注入到哪里（默认是在 <head> 之前）

    • 一个包含 { html, tags } 的对象

      2. transformIndexHtml渲染svg

    利用transformIndexHtml配合replace替换<body,并将第二步的svg数组内容放到
    svg标准定义的标签中

    标准svg标签：

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0"></svg>

    实现：

    const svgTagView = (path = './src/icons/svg/', perfix = 'icon') => {
  if (path === '') return
  idPerfix = perfix
  const res = recursivelyFindSvg(path)
  return {
    name: 'svg-transform',
    transformIndexHtml(html) { // transformIndexHtml    转换 index.html 的专用钩子，vite3 独享
      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>
        `
      )
    }
  }
}

    到这里插件就算封装完了，然后我们需要将svg路径写入vite.config.js中，便于全局配置

    svgTagView('./src/icons/svg/')

    附上完整代码如下：

    import { readFileSync, readdirSync } from 'fs'

const attributeMatch = {
  svgTag: /<svg([^>+].*?)>/,
  clearWidthHeight: /(width|height)="([^>+].*?)"/g,
  hasViewBox: /(viewBox="[^>+].*?")/g,
  clearReturn: /(\r)|(\n)/g
}
let idPerfix = ''

function recursivelyFindSvg(dir) {
  const svgRes = []
  const dirents = readdirSync(dir, {
    withFileTypes: true // 将文件作为fs.Dirent对象返回,
    //fs.Dirent 是目录项（可以是文件或目录中的子目录）的表示，通过读取 fs.Dir 返回。 目录项是文件名和文件类型对的组合。
  })
  // console.log(dirents) // { name: 'guanyuwomeng1.svg', [Symbol(type)]: 1 }
  for (const dirent of dirents) {
    if (dirent.isDirectory()) { // 判断是否一个目录
      svgRes.push(...recursivelyFindSvg(dir + dirent.name + '/')) //递归获取svg文件内容
    } else {
      // 读取文件信息并用repalce方法，利用第一步的正则匹配转换svg文件
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(attributeMatch.clearReturn, '')
        .replace(attributeMatch.svgTag, ($1, $2) => {
          let width = 0
          let height = 0
          let content = $2.replace(attributeMatch.clearWidthHeight, (s1, s2, s3) => {
            if (s2 === 'width') {
              width = s3
            } else if (s2 === 'height') {
              height = s3
            }
            return ''
          })
          if (!attributeMatch.hasViewBox.test($2)) {
            content += `viewBox="0 0 ${width} ${height}"`
          }
          return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  // console.log("🚀 ~ file: svgTagView.js:28 ~ recursivelyFindSvg ~ svgRes", svgRes)

  return svgRes
}

export const svgTagView = (path, perfix = 'icon') => {
  if (path === '') return
  idPerfix = perfix
  const res = recursivelyFindSvg(path)
  return {
    name: 'svg-transform',
    transformIndexHtml(html) { // transformIndexHtml    转换 index.html 的专用钩子，vite3 独享
      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>
        `
      )
    }
  }
}

    插件是封装完了，下一步我们就得封装svg vue组件，来渲染证实它

    第四步：封装vue组件并全局注册

    打开我们第一次新建的文件components/SvgIcon/index.vue

    1. 封装一个全局通用的svg-icon组件如下：

    可自行配置svg标签可有的属性（width,class,name等等...）,封装语法很简单，这里不再赘述

    <template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ width, height, color }">
    <use :href="svgName"></use>
  </svg>
</template>

<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    iconName: {
      type: String,
      default: ''
    },
    //对不同区域的 icon 样式调整，如字体大小
    className: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    color: {
      type: String,
      default: '#333'
    }
  })

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

<style>
  .svg-icon {
    width: 22px;
    height: 22px;
    fill: currentColor; /*此属性为更改svg颜色属性设置*/
    stroke: currentColor;
    overflow: hidden;
    vertical-align: text-top;
  }
</style>

    2. 全局注册上一步封装的svg-icon

    打开第一次新建的icons/idnex.js
    使用install钩子在vue实例上注册它,如下：

    import SvgIcon from '@/components/SvgIcon/index.vue'

export default {
    install: (app) => {
        app.component('svg-icon', SvgIcon)
    }
}

    然后在入口文件main.js use使用它

    import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './icons/index'

const app = createApp(App)
app.use(SvgIcon)
app.mount('#app')

    全局注册和use使用搞定，下一步我们在模板中使用它(<svg-icon />)

    第五步：页面中应用<svg-icon />组件传值

    <template>
<svg-icon iconName="ziliao2" />
<svg-icon iconName="ziliao2" />
<svg-icon iconName="ziliao2" />
<template/>

    页面展示效果如下：

    1673602429633.png

    到这里插件和组件及使用就完成啦！！

    总结

    • 第一步： 建立所需文件
    • 第二步：封装转换并读取svg文件的插件
    • 第三步：利用vite transformIndexHtml封装渲染svg内容
    • 第四步：封装vue组件并全局注册
    • 第五步：页面中应用传值

    当然，封装的插件（svgTagView）你也可以自行发布到npm上，然后安装并使用它，这样最方便你开发不过了。

    点击查看更多文章

    前端vue3vitesvg插件
    月弦笙音
    45 声望5 粉丝

    前端开荒

    下一篇 »
    【js 必备工具代码段】，建议收藏！持续更新ing...

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    【为什么】使用 reduce 按顺序执行 promise 有效？💭

    月弦笙音阅读 516

    头像
    CSS团队协作规范

    寒青赞 35阅读 3k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 14阅读 1.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.1k评论 3

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.7k

    头像
    开发插件集合

    寒青赞 11阅读 2.8k

    0 条评论
    得票最新