用于iconfont.cn生成外链的小工具

348 阅读1分钟

解决什么问题

iconfont.cn升级之后,生成外链css、js的功能被砍掉了。开发阶段经常增减icon,现在的流程需要下载,没以前简便,而且之前写的一些依赖外链自动生成组件的小工具也要改。为了达到和之前类似的体验,编写了一个小工具github.com/addelete/ic…

最终效果

iShot_2022-07-07_17.09.14.png

用到的技术

使用油猴插件,写了个脚本,在页面位置插入一个下载并上传至云的按钮。点击之后,读取最新的图标包下载地址,请求并生成blob文件。然后上传至后端,后端解压,保存,生成外链。油猴脚本再把返回的外链插入页面展示出来。

特性

  • 支持上传并生成外链
  • 支持上传到阿里云oss并生成外链

使用方法:

1.安装油猴管理器

管理器有很多种,如果装过可以忽略此步骤。我用的是tampermonkey

2.添加新脚本

在管理器里面添加脚本,复制greasemonkey.js里面的内容粘贴进去,保存。
搜“上传地址”找到上传地址,可以改成自己的服务地址。
或者按下一步操作启动一个我写好的服务。

3.启动上传服务

复制.env.example到.env

cp .env.example .env

.env文件如下:

PORT=8888 # 端口号
OSS_ENABLE=true # 是否开启上传至oss
OSS_REGION='oss-cn-chengdu' # 区域,例如oss-cn-chengdu
OSS_ACCESS_KEY_ID='Your accessKeyId'
OSS_ACCESS_KEY_SECRET='Your accessKeySecret'
OSS_BUCKET='Your bucket name'
OSS_PATH_PREFIX='/iconfonts/' // 上传至oss的位置

如果换端口可以改PORT,记得同时改油猴脚本里面的上传地址。
如果想上传至oss,请配置oss相关的变量。

启动服务

# 安装依赖
yarn
# 构建
yarn build
# 运行
yarn start