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

在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 = 0let to = formlet urlList = []let count = 0while (form !== -1 && to !== -1){count++if(count > 3000) throw new Error("gen icon failed")form = to + 1form = 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.lengthurlList.forEach(_url => {let __url = _url.split("?")[0]let {ext} = path.parse(__url)let fileName = "iconfont"+extlet filePath = path.join(dir,fileName)fs.existsSync(filePath) && fs.unlinkSync(filePath)if(__url[0] !== '/') returnlet 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] !== '/') returnchunk = 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项目中自动拉取更新Iconfont（阿里巴巴图标库）相关推荐

vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
vue项目中自动跳转到外部链接
今天在写一个web项目的时候,发现有一个功能需要点击导出,然后弹出框选择下载在本地,并且要求下的文件是xlsx类型的.首先我的思路是,点击导出,然后后端查询数据库的数据,把数据写入本地xlsx表中,然 ...
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
Vue本地引用Iconfont(阿里巴巴图标库) SVG及普通图标
1.本地src目录下,新建xxx文件夹,自定义文件夹名称.目录结构如下:fontSy对应svg,fontUn对应普通图标. 2.在iconfont上下载对应zip(正常icon和SVG),zip中包含 ...
微信小程序如何使用iconfont阿里巴巴图标库？
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...

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

vue项目中自动拉取更新Iconfont（阿里巴巴图标库）相关推荐

最新文章

热门文章