使用 node.js 将 svg 图片批量转为 vue 组件

在使用 svg 图片的时候，有一种做法是把 svg 图片转换成 vue 组件的方式，所以就写了个脚本批量进行了转换。

svg 图片转成 vue 组件示例

svg

vue

转换的 node 脚本

// svg2vue.js
var fs = require('fs')

const ICON_COMP_PATH = './src/components/Icon/'

fs.readdir(ICON_COMP_PATH + '/svg', (err, files) => {
  if (err) {
    return console.error(err)
  }

  // 将 svg 转换成 vue 文件
  files.forEach(file => {
    fs.readFile(ICON_COMP_PATH + '/svg/' + file, (err, data) => {
      if (err) {
        return console.error(err)
      }
      const str = data.toString()
      const regex = /<\/path>/g
      const paths = str.match(regex)
      let template = `


`
      const filename = file.replace('.svg', '') // 获取文件名

      fs.writeFile(
        `${ICON_COMP_PATH}/components/${filename}.vue`,
        template,
        err => {
          if (err) {
            return console.error(filename + '转换失败', err)
          }
          console.log(filename + '转换成功')
        }
      )
    })
  })

  // 生成注册 vue 组件的 js 文件
  const registIconComponent = () => {
    let template = "import Vue from 'vue'\n"
    files.forEach(file => {
      const filename = file.replace('.svg', '')
      const componentName = filename.replace('-', '')

      template += `import ${componentName} from './components/${filename}.vue'\n`
    })

    template += '\n'

    files.forEach(file => {
      const filename = file.replace('.svg', '')
      const componentName = filename.replace('-', '')

      template += `Vue.component('${filename}', ${componentName})\n`
    })

    fs.writeFile(ICON_COMP_PATH + '/register.js', template, err => {
      if (err) {
        return console.error(err)
      }
      console.log('register.js 注册代码重新生成！')
    })
  }
  registIconComponent()

  // 生成组件名称列表
  const getIconList = () => {
    let template = 'export default [\n'
    files.forEach(file => {
      const filename = file.replace('.svg', '')

      template += `  '${filename}',\n`
    })
    template += ']\n'

    fs.writeFile(ICON_COMP_PATH + '/icon-list.js', template, err => {
      if (err) {
        return console.error(err)
      }
      console.log('icon-list.js 注册代码重新生成！')
    })
  }
  getIconList()
})

使用

执行 node 脚本：

node svg2vue.js

在入口文件 main.js 中导入注册文件：

import './components/Icon/register'

最后

不过这种方式需要在每次有新 svg 图片的时候执行命令。也可以通过 iconfont 来做到 svg 图片的管理。