123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- import { readFileSync, readdirSync } from 'fs'
- let idPerfix = ''
- const svgTitle = /<svg([^>+].*?)>/
- const clearHeightWidth = /(width|height)="([^>+].*?)"/g
- const hasViewBox = /(viewBox="[^>+].*?")/g
- const clearReturn = /(\r)|(\n)/g
- function findSvgFile(dir: string):string[] {
- 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: string) => {
- let width: string = '0'
- let height: string = '0'
- let content = $2.replace(clearHeightWidth, (_: string, s2: string, s3: string) => {
- 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>')
- svgRes.push(svg)
- }
- }
- return svgRes
- }
- export const svgLoader = (path: string, perfix = 'icon') => {
- if (path === '') return
- idPerfix = perfix
- console.log('svgLoader');
- const res = findSvgFile(path)
- return {
- name: 'svg-transform',
- transformIndexHtml(html: any) {
- 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>
- `
- )
- }
- }
- }
|