node脚本读取iconfont字体中文名称、英文名称

如图，iconfont图标库是从阿里图标库下载的，读取方式有三种

1. 通过读取css读取生成class名称

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

/**
 * 读取iconfont.css字体文件
 * @param config
 * @returns {*[]}
 */
function matchFilesFromCss(config) {
  const files = []
  ;(function find(fPath = __dirname, extract = 'css') {
    const fileAndDirs = fs.readdirSync(fPath)
    fileAndDirs.forEach((value, index) => {
      const fullPath = path.resolve(fPath, value)
      if (fs.statSync(fullPath).isDirectory()) {
        find(fullPath)
      } else if (value.endsWith(extract)) {
        files.push(fullPath)
      }
    })
  })(config.path, config.extract)
  return files
}

const files = matchFilesFromCss({
  path: path.resolve(__dirname, '../assets/iconfonts')
})

console.log('读取到的css字体文件', files)

/**
 * 读取iconfont字体名称
 * @param cssFile
 * @returns {string}
 */
function getFamilyName(cssFile) {
  const fontFamilyReg = /font-family:(.*) !important/
  const resultS = fontFamilyReg.exec(cssFile)
  // 去除空格，双引号、单引号
  const fontFamily = resultS[1].trim().replaceAll('"', '').replaceAll(''', '').replaceAll(' ', '')
  return fontFamily
}

const json = {}
for (let i = 0; i < files.length; i++) {
  const iconList = []
  const file = files[i]
  const cssFile = fs.readFileSync(file, 'utf8')
  const fontFamily = getFamilyName(cssFile)
  // 仅能识别icon开头的css
  // const reg = /(icon-.*):before/g
  const reg = /.(.*):before/g
  // 筛选icon-开头:before结尾的字符串 期中/(icon-.*)代表icon-加任意字符的分组
  let resultS
  while ((resultS = reg.exec(cssFile)) != null) {
    // 遍历出分组的数据是我们需要的
    iconList.push(`${fontFamily} ${resultS[1]}`)
    if (!json[fontFamily]) {
      json[fontFamily] = [resultS[1]]
    } else {
      json[fontFamily].push(resultS[1])
    }
  }
  console.log(`${fontFamily}共有${iconList.length}个图标`)
}
console.log(JSON.parse(JSON.stringify(json)))
// 写入数据库
const jsonStr = 'export default ' + JSON.stringify(json,null,2)
const iconPath = path.resolve(__dirname, '../assets/iconfonts/data-css.js')
fs.writeFileSync(iconPath, jsonStr)

2. 通过读取json读取生成class名称和中文名称

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

/**
 * 读取iconfont.json字体文件
 * @param config
 * @returns {*[]}
 */
function matchFilesFromCss(config) {
  const files = []
  ;(function find(fPath = __dirname, extract = 'json') {
    const fileAndDirs = fs.readdirSync(fPath)
    fileAndDirs.forEach((value, index) => {
      const fullPath = path.resolve(fPath, value)
      if (fs.statSync(fullPath).isDirectory()) {
        find(fullPath)
      } else if (value.endsWith(extract)) {
        files.push(fullPath)
      }
    })
  })(config.path, config.extract)
  return files
}

const files = matchFilesFromCss({
  path: path.resolve(__dirname, '../assets/iconfonts')
})

console.log('读取到的json字体文件', files)

/**
 * 读取iconfont字体名称
 * @param cssFile
 * @returns {string}
 */
function getFamilyName(cssFile) {
  const fontFamilyReg = /font-family:(.*) !important/
  const resultS = fontFamilyReg.exec(cssFile)
  // 去除空格，双引号、单引号
  const fontFamily = resultS[1].trim().replaceAll('"', '').replaceAll(''', '').replaceAll(' ', '')
  return fontFamily
}

const json = {}
for (let i = 0; i < files.length; i++) {
  const file = files[i]
  const jsonFile = fs.readFileSync(file, 'utf8')
  console.log(jsonFile)
  const font = JSON.parse(jsonFile)
  const fontFamily = font['font_family']
  const iconList = font['glyphs'].map(glyph => {
    let obj = {
      name: glyph.name,
      codeName: glyph.font_class
    }
    return obj
  })

  console.log(`${fontFamily}共有${iconList.length}个图标`)
  if (!json[fontFamily]) {
    json[fontFamily] = iconList
  }
}

console.log(JSON.parse(JSON.stringify(json)))
// 写入数据库
const jsonStr = 'export default ' + JSON.stringify(json, null, 2)
const iconPath = path.resolve(__dirname, '../assets/iconfonts/data-json.js')
fs.writeFileSync(iconPath, jsonStr)

3. 通过读取html读取生成class名称和中文名称

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

/**
 * 从 demo.html中读取字体图标的中文名name 和 英文名codeName
 * @param config
 * @returns {*[]}
 */
function matchFiles(config) {
  const files = []
  ;(function find(fPath = __dirname, extract = 'html') {
    const fileAndDirs = fs.readdirSync(fPath)
    fileAndDirs.forEach((value, index) => {
      const fullPath = path.resolve(fPath, value)
      if (fs.statSync(fullPath).isDirectory()) {
        find(fullPath)
      } else if (value.endsWith(extract)) {
        files.push(fullPath)
      }
    })
  })(config.path, config.extract)
  return files
}

const files = matchFiles({
  path: path.resolve(__dirname, '../assets/iconfonts')
})

// 解析字体库
const json = {}
for (let index = 0; index < files.length; index++) {
  const element = files[index];
  const $ = cheerio.load(fs.readFileSync(element))
  const $fonts = $('.content.font-class .dib');
  console.log('数量：', $fonts.length)
  $fonts.each(function () {
    const $icon = $(this).find('.icon')
    const name = $(this).find('.name').text().trim()
    const codeName = $(this).find('.code-name').text().trim().replace('.', '')
    const parent = $icon.attr('class').split(' ')
      .map((e) => e.trim().replace(/^icon-*/, '').replace(/^icon$/, ''))
      .filter((e) => e.trim().length > 0)
      .find((e) => e.length > 0)
    if (!json[parent]) {
      json[parent] = [{
        name, codeName
      }]
    } else {
      json[parent].push({
        name, codeName
      })
    }
  })
}

// 写入数据库
const jsonStr = 'export default ' + JSON.stringify(json,null,2)
const iconPath = path.resolve(__dirname, '../assets/iconfonts/data-html.js')
fs.writeFileSync(iconPath, jsonStr)

生成示例