[vite]vue2+vite引入svg

这里是个记录贴

已于 2023-02-22 18:46:10 修改

阅读量2.3k

点赞数

文章标签： javascript

于 2022-04-25 11:41:49 首次发布

本文链接：https://blog.csdn.net/zzzyqsama/article/details/124401245

版权

背景介绍
由于webpack打包太慢，使用vite进行打包，由于更改为vite,原始svg引入产生问题，

const svgFiles = require.context('./svg', true, /\.svg$/)
console.log("svg",svgFiles)
const iconList = svgFiles.keys().map(item => svgFiles(item))

因此根据底下大佬文章进行了更改，

https://juejin.cn/post/6932351293273047054

import { readFileSync, readdirSync } from 'fs'

// id 前缀
let idPerfix = ''

// 识别svg标签的属性
const svgTitle = /<svg([^>+].*?)>/

// 有一些svg文件的属性会定义height和width，要把它清除掉
const clearHeightWidth = /(width|height)="([^>+].*?)"/g

// 没有viewBox的话就利用height和width来新建一个viewBox
const hasViewBox = /(viewBox="[^>+].*?")/g

// 清除换行符
const clearReturn = /(\r)|(\n)/g

/**
 * @param dir 路径
*/
function findSvgFile(dir){
  const svgRes = []
  const dirents = readdirSync(dir, {
    withFileTypes: true
  })
  for (const dirent of dirents) {
    const path = dir + dirent.name
    if (dirent.isDirectory()) {
      svgRes.push(...findSvgFile(path + '/'))
    } else {
      const svg = readFileSync(path)
        .toString()
        .replace(clearReturn, '')
        .replace(svgTitle, ($1, $2) => {
          let width = 0
          let height = 0
          let content = $2.replace(
            clearHeightWidth,
            (s1, s2, s3) => {
              s3 = s3.replace('px', '')
              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="${dirent.name.replace(
            '.svg',
            ''
          )}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  return svgRes
}
export function svgBuilder(path, perfix = ''){
  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设置
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import path from 'path';
import { svgBuilder } from './static/plugins/svgBuilder'
// https://vitejs.dev/config/
// eslint-disable-next-line
export default defineConfig(({command, mode})=>({
  plugins: [createVuePlugin(),svgBuilder('src/icons/svg/')], // 引入svg所在的组件
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions:['.vue','.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  },
  build: {
    sourcemap: command === 'serve',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})
)

// svg组件
<template>
  <svg
    class="icon-svg"
    :width="width"
    :height="height"
    aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon-svg',
    props: {
      name: {
        type: String,
        required: true
      },
      className: {
        type: String
      },
      width: {
        type: String
      },
      height: {
        type: String
      }
    },
    computed: {
      getName () {
        return `#icon-${this.name}`
      },
      getClassName () {
        return [
          'icon-svg',
          `icon-svg__${this.name}`,
          this.className && /\S/.test(this.className) ? `${this.className}` : ''
        ]
      }
    }
  }
</script>

<style>
  .icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
//使用
<icon-svg name="zhedie"></icon-svg>

将svg引入如下图所示：
在这里插入图片描述

<INSUREQ>
    <MAIN>
        <SERIALDECIMAL>1666697719004601219</SERIALDECIMAL>
        <JD_FLAG>JDJR</JD_FLAG>
        <METHOD_CODE>insurePlanQuery</METHOD_CODE>
        <TRANSRDATE>2022-10-25 19:35:20</TRANSRDATE>
        <JD_ORDER_ID>1666697719004601219</JD_ORDER_ID>
        <BUSINESS_CODE>13</BUSINESS_CODE>
        <comId>209</comId>
    </MAIN>
    <BASE/>
    <VHL>
        <C_DPT_CDE>510100</C_DPT_CDE>
        <C_CAR_FLAG>1</C_CAR_FLAG>
        <C_LCN_NO>川AD56822</C_LCN_NO>
        <C_NEW_VHL>0</C_NEW_VHL>
        <C_DRV_OWNER>卢威</C_DRV_OWNER>
        <C_DRV_IDCARD>513901198806222337</C_DRV_IDCARD>
        <C_DRV_MOBILE>13709015523</C_DRV_MOBILE>
        <C_ENG_NO>J9B30779</C_ENG_NO>
        <C_VHL_FRM>LL227409XJW111421</C_VHL_FRM>
        <C_FST_REG_DTE>2018-11-28</C_FST_REG_DTE>
        <C_VEHICLE_CODE>WMEAAD0003</C_VEHICLE_CODE>
        <C_VEHICLE_NAME>威马EX5</C_VEHICLE_NAME>
        <C_VEHICLE_BRAND>威马EX52018款 威尔马斯特SZS6460A05BEV纯电动多用途乘用车Extra创新版400 5座(222300元)</C_VEHICLE_BRAND>
        <N_VEHICLE_PRICE>222300</N_VEHICLE_PRICE>
        <N_LIMIT_LOAD_PERSON>5</N_LIMIT_LOAD_PERSON>
        <C_EXT_MSR>0</C_EXT_MSR>
        <C_VEHICLE_FAMILY>威马EX5</C_VEHICLE_FAMILY>
        <C_IMPORT_FLAG>1</C_IMPORT_FLAG>
        <C_WHOLE_WEIGHT>0</C_WHOLE_WEIGHT>
        <C_MODEL_DESC>Extra创新版400</C_MODEL_DESC>
        <N_VEHICLE_TONNAGE>0</N_VEHICLE_TONNAGE>
        <C_MARKET_TIMESTAMP>2018</C_MARKET_TIMESTAMP>
        <C_AGE_LEVEL>34</C_AGE_LEVEL>
        <C_SEX>1061</C_SEX>
        <C_DEVICE1_MRK>0</C_DEVICE1_MRK>
        <C_DEVICE_MRK>0</C_DEVICE_MRK>
        <C_IDENT_TYPE>01</C_IDENT_TYPE>
        <C_INSRNT_NME>卢威</C_INSRNT_NME>
        <C_INSRNT_IDENT_TYPE>01</C_INSRNT_IDENT_TYPE>
        <C_INSRNT_IDENT_NO>513901198806222337</C_INSRNT_IDENT_NO>
    </VHL>
    <APPLICANT>
        <C_APP_NME>卢威</C_APP_NME>
        <C_APP_GENDER>1</C_APP_GENDER>
        <C_APP_IDENT_TYPE>01</C_APP_IDENT_TYPE>
        <C_APP_IDENT_NO>513901198806222337</C_APP_IDENT_NO>
        <C_APP_IDENT_TEL>13709015523</C_APP_IDENT_TEL>
    </APPLICANT>
</INSUREQ>
妮萨好激动啥度搜啊

这里是个记录贴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[vite]vue2+vite引入svg

背景介绍由于webpack打包太慢，使用vite进行打包，由于更改为vite,原始svg引入产生问题，const svgFiles = require.context('./svg', true, /\.svg$/)console.log("svg",svgFiles)const iconList = svgFiles.keys().map(item => svgFiles(item))因此根据底下大佬文章进行了更改，https://juejin.cn/post/69323512932
复制链接

扫一扫