nodejs批处理iconfontsvg文件生成svg对象文件供三端统一使用
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 |
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 }) } }) } |
使用方法
1 |
node svgmake.js http://at.alicdn.com/t/font_571559_i5v7ldocuw4mfgvi.js(iconfont项目中可以看到) |