nodejs批处理iconfontsvg文件

nodejs批处理iconfontsvg文件生成svg对象文件供三端统一使用

const fs = require('fs')
const path = require('path')
const request = require('request')
// const svgfilesPath = path.resolve("./app/files/svgfiles");
// const svgfilesPath = "http://at.alicdn.com/t/font_376253_fntz7jc3f3nxw29.js"

// 下载iconfontsvg图标
function downloadFile(uri, filename, callback) {
  const stream = fs.createWriteStream(`./app/files/${filename}`)
  request(uri).pipe(stream).on('close', callback)
}
const fileUrl = process.argv[2]
const filename = 'svgfont.js'
downloadFile(fileUrl, filename, () => {
  svgformat('./app/files')
})

function svgformat(filePath) {
  fs.readFile(`./app/files/${filename}`, 'utf8', (error, data) => {
    if (error) {
      throw error
    } else {
      const pattern = /<symbol ("[^"]*"|'[^']*'|[^'">])*>[\s\S]*?<\/symbol>/
      // 获取svg图标数组
      const svgArr = data.split('</symbol>')
      // 最后一个为js代码忽略
      svgArr.pop()
      let svgTmp = ''
      let viewBox = ''
      svgArr.forEach((svg, v) => {
        const tmpPath = svg.split('<path')
        // 将-连接的变量转为驼峰式命名变量
        const viewBoxKey = tmpPath[0].match('id=.*"')[0].split('"')[1].replace(/\-(\w)/g, x => x.slice(1).toUpperCase())
        // 获取viewBox大小
        const viewBoxValue = tmpPath[0].match('viewBox=.*"')[0].split('"')[1]
        const pathValue = tmpPath
        viewBox[viewBoxKey] = viewBoxValue
        viewBox += `${viewBoxKey}:'${viewBoxValue}',\n`
        const pathArr = []
        // 第一个用来获取viewBox获取信息，后面的数据为path
        tmpPath.shift()
        tmpPath.forEach((path) => {
          // 组装为object对象
          pathArr.push(`{${path.replace(/=/g, ':').replace('fill', ',fill').replace('></path>', '')}}`)
        })
        svgTmp += `${viewBoxKey}:[${pathArr}],\n`
      })
      const svgStr =
        `export default {
          viewBox:{${viewBox}},
          ${svgTmp}
        }`
      fs.writeFileSync('./app/files/font/iconfont.svg.js', svgStr, 'utf8')
      // 删除下载的文件
      fs.unlink(`./app/files/${filename}`, (err) => {
        if (err) throw err
      })
    }
  })
}

const fs = require('fs')

const path = require('path')

const request = require('request')

// const svgfilesPath = path.resolve("./app/files/svgfiles");

// const svgfilesPath = "http://at.alicdn.com/t/font_376253_fntz7jc3f3nxw29.js"

// 下载iconfontsvg图标

function downloadFile(uri, filename, callback) {

const stream = fs.createWriteStream(`./app/files/${filename}`)

request(uri).pipe(stream).on('close', callback)

}

const fileUrl = process.argv[2]

const filename = 'svgfont.js'

downloadFile(fileUrl, filename, () => {

svgformat('./app/files')

})

function svgformat(filePath) {

fs.readFile(`./app/files/${filename}`, 'utf8', (error, data) => {

if (error) {

throw error

} else {

const pattern = /<symbol ("[^"]*"|'[^']*'|[^'">])*>[\s\S]*?<\/symbol>/

// 获取svg图标数组

const svgArr = data.split('</symbol>')

// 最后一个为js代码忽略

svgArr.pop()

let svgTmp = ''

let viewBox = ''

svgArr.forEach((svg, v) => {

const tmpPath = svg.split('<path')

// 将-连接的变量转为驼峰式命名变量

const viewBoxKey = tmpPath[0].match('id=.*"')[0].split('"')[1].replace(/\-(\w)/g, x => x.slice(1).toUpperCase())

// 获取viewBox大小

const viewBoxValue = tmpPath[0].match('viewBox=.*"')[0].split('"')[1]

const pathValue = tmpPath

viewBox[viewBoxKey] = viewBoxValue

viewBox += `${viewBoxKey}:'${viewBoxValue}',\n`

const pathArr = []

// 第一个用来获取viewBox获取信息，后面的数据为path

tmpPath.shift()

tmpPath.forEach((path) => {

// 组装为object对象

pathArr.push(`{${path.replace(/=/g, ':').replace('fill', ',fill').replace('></path>', '')}}`)

})

svgTmp += `${viewBoxKey}:[${pathArr}],\n`

})

const svgStr =

`export default {

viewBox:{${viewBox}},

${svgTmp}

fs.writeFileSync('./app/files/font/iconfont.svg.js', svgStr, 'utf8')

// 删除下载的文件

fs.unlink(`./app/files/${filename}`, (err) => {

if (err) throw err

})

}

})

}

使用方法