vue项目中自动拉取更新阿里巴巴图标库

在vue项目中使用 iconfont图标库，网上的栗子很多，这边就随手给一个，点这里

上面的解决了，那我就很苦恼，我每次添加或删除或更新图标库，需要重新下载？自己手动去覆盖吗？我是拒绝的。so，自动覆盖就很有必要了。

贴一下我的iconfont目录

四个文件，加一个css，注意css文件与创建项目的设置对比一下

但是，我们的图标是动态扩展的，随时可能删除和添加，每次删除和添加，都要下载到本地替换原油的字体样式文件，并且可能删除，添加后忘记下载到本地，特别麻烦。这就实现自动帮你每次样式文件，你只需要简单的配置，在每次构建时自动帮你自动下载下来。

并且为了更好的使用图标，建议将图标封装成vue组件，而不是简单的使用class样式。

组件代码: 也就是icon.vue

<style lang="scss" rel="stylesheet/scss">
  @import "iconfont.css";
</style>
<template>
  <i :class="classes" :style="styles"></i>
</template>
<script>
  const prefixCls = 'uzi-icon'
  export default {
    name: 'UziIcon',
    componentName: 'UziIcon',
    props: {
      type: String,
      size: [Number, String],
      color: String,
      fontStyle: {
        default: 'normal',
        type: String
      }
    },
    computed: {
      classes () {
        return `${prefixCls} ${prefixCls}-${this.type}`
      },
      styles () {
        let style = {}
        style['font-style'] = `normal`
        if (this.size) {
          style['font-size'] = `${this.size}rem`
        }
        if (this.fontStyle) {
          style['font-style'] = this.fontStyle
        }
        if (this.color) {
          style.color = this.color
        }
        return style
      }
    }
  }
</script>

当然，此组件需要用到样式文件，我们需要将样式文件在我们修改的时候更新一下，我这边，是在build目录下新建一个icon.js的文件进行对文件的拉取更新

const chalk = require('chalk')
const _ = require('lodash')
// const utl = require('./utl/utl')
const path = require('path')
const fs = require('fs')
const request = require('request')
const wget = require('wget')

const FONT_FILE_TYPE_EOT = 'eot'
const FONT_FILE_TYPE_WOFF = 'woff'
const FONT_FILE_TYPE_TTF = 'ttf'
const FONT_FILE_TYPE_SVG = 'svg'

const icon = [{  // 自动维护图标
  aliUrl: '//at.alicdn.com/t/font_819408_9zb80t2tc6.css',  // 暂时只支持使用阿里巴巴图标库
  dir: 'src/components/uzi-icon'  // 公共图标
}]


const postUrl = (_url,fn) => {
  request(_url, function (error, response, body) {
    if (!error && response.statusCode == 200) {
      fn(body)
    }else {
      throw new Error("gen Icon error")
    }
  })
}

const downIcon = (iconUrl,dir)=> {
  postUrl('https:'+iconUrl,(chunk)=>{
    let form = 0
    let to = form
    let urlList = []
    let count = 0
    while (form !== -1 && to !== -1){
      count++
      if(count > 3000) throw new Error("gen icon failed")
      form = to + 1
      form = chunk.indexOf("url(",form)
      to = chunk.indexOf(")",form+1)
      if(form !== -1 && to !== -1){
        urlList.push(chunk.substr(form+5,to - form-6))
      }
    }
    urlList = _.uniq( urlList.map(_url => _url.split("#")[0]) )
    count = urlList.length
    urlList.forEach(_url => {
      let __url = _url.split("?")[0]
      let {ext} = path.parse(__url)
      let fileName = "iconfont"+ext
      let filePath = path.join(dir,fileName)
      fs.existsSync(filePath) && fs.unlinkSync(filePath)
      if(__url[0] !== '/') return
      let download = wget.download("https:"+__url, filePath, {})
      chunk.split(_url).join("")
      download.on('error', function(err) {
        throw err
      })
    })
    urlList.forEach(_url => {
      let strs = _url.split('?')[0].split('.')
      let type = strs[strs.length - 1]
      if(_url[0] !== '/') return
      chunk = chunk.replace(_url, './iconfont.' + type)
      chunk = chunk.replace(_url, './iconfont.' + type)
    })
    fs.writeFileSync(path.join(dir, 'iconfont.css'),chunk)
  })
}
for(let item of icon){
  downIcon(item.aliUrl,path.resolve(item.dir))
}

注意这段代码

此就与项目上的文件路径相对应，只需你更新图标的时候，将新的路径重新覆盖aliUrl即可，当然，icon的配置是一个数组，代表可以配置多个，一般都会有两个，一个是所有项目都共用的，属于生态代码中基础的图标组件，一个是本项目使用的图标组件。

如果是按照上面给的模版封装图标组件的化，请注意：

prefixCls跟阿里图标项目属性中的FontClass/Symbol 前缀保持一致。
图标组件在使用时,组件的type设置为需要展示图标的Font Class / Symbol

我们将require(./icon.js)记载到配置文件启动即可以在文件启动的时候每次自动拉去最新代码，当然嫌麻烦的话，我们可以在package.json中配置，npm run uzi-icon即可更新本地iconfont库。

使用：

vue项目中自动拉取更新阿里巴巴图标库

猜你喜欢