vite2 + vue3 使用svg图标

1. 首先创建一个svgBuilder.js

import { readFileSync, readdirSync } from 'fs'

let idPerfix = ''
const svgTitle = /+].*?)>/
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, (_, $2) => {
          let width = 0
          let height = 0
          let content = $2.replace(clearHeightWidth, (_, 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 ``
        })
        .replace('', '')
      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(
        '',
        `
          
            
        `,
      )
    },
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2. 在vite.config.js中导入svgBuilder.js

 plugins: [
      vue(),
      [svgBuilder('./src/assets/svg/')] // 这里已经将src/icons/svg/下的svg全部导入，无需再单独导入
    ]
1
2
3
4

3. 创建一个svg-icon组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4. 在main.js中引入svg-icon

import SvgIcon from './components/svg-icon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')
1
2
3
4

5. 使用

 
1