iconfont SVG 图标库 生成 react-native-svg所需的格式

const fs = require('fs');
const path = require('path');

const filePath = `${path.resolve('fontsvg')}/build`
//判断文件夹是否存在
const isDirectory = (filePath) =>{
  return new Promise((resolve,reject) => {
    fs.access(filePath, (err) => {
      if(err){
        resolve('faild')
      }
      resolve('ok')
    })
  })
}

//创建文件夹
const creactMkdir = (filePath) =>{
  return new Promise((resolve,reject) => {
    fs.mkdir(filePath, (err) => {
      if(err){return}
      resolve(true)
    })
  })
}

const writeSvg = (filePath) => {
  console.log('读取处理中...')
  fs.readFile(`${path.resolve('fontsvg')}/iconfont.js`, 'utf8', (err, data) => {
    if (err) {
    } else {
      const svgArr = data.split('</symbol>');
      svgArr.pop();
      let svgTmp = '';
      let viewBox = '';
      svgArr.forEach((svg) => {
        const tmpPath = svg.split('<path');
        const viewBoxKey = tmpPath[0].match('id=.*"')[0].split('"')[1].replace('icon-', '').replace(/-(\w)/g, x => x.slice(1).toUpperCase());
        const viewBoxValue = tmpPath[0].match('viewBox=.*"')[0].split('"')[1];
        if (viewBoxValue !== '0 0 1024 1024') {
          viewBox[viewBoxKey] = viewBoxValue;
          viewBox += `    ${viewBoxKey}: '${viewBoxValue}',\n`;
        }
        const pathArr = [];
        tmpPath.shift();
        tmpPath.forEach((path) => {
          pathArr.push(`{${path.replace(/=/g, ': ').replace('fill', ', fill').replace('></path>', '')}}`);
        });
        svgTmp += `  ${viewBoxKey}: [${pathArr}],\n`;
      });
      const svgStr = `export default {\n${svgTmp}\n}`;
      fs.writeFile(`${filePath}/iconfont.svg.js`, svgStr, 'utf8',() => {
        if (err) return
        console.log('写入成功')
      });
    }
  })
}

async function WriteFontSvg () {
  const directory = await isDirectory(filePath)
  if(directory == 'ok'){
    writeSvg(filePath)
  }else{
    const creact= await creactMkdir(filePath)
    if(creact){
      console.log('创建成功')
      writeSvg(filePath)
    }
  }
}

WriteFontSvg()


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值