├── snapshots ├── alipay │ ├── alipay.json │ ├── alipay.acss │ ├── alipay.js │ └── alipay.axml ├── kuaishou │ ├── kuaishou.json │ ├── kuaishou.css │ ├── kuaishou.js │ └── kuaishou.ksml ├── toutiao │ ├── toutiao.json │ ├── toutiao.ttss │ ├── toutiao.js │ └── toutiao.ttml ├── qq │ ├── qq.qss │ ├── qq.json │ ├── qq.js │ └── qq.qml ├── baidu │ ├── baidu.css │ ├── baidu.json │ ├── baidu.js │ └── baidu.swan └── wechat │ ├── wechat.wxss │ ├── wechat.json │ ├── wechat.js │ └── wechat.wxml ├── src ├── templates │ ├── alipay.json.template │ ├── kuaishou.json.template │ ├── toutiao.json.template │ ├── qq.qss.template │ ├── alipay.acss.template │ ├── baidu.css.template │ ├── wechat.wxss.template │ ├── kuaishou.css.template │ ├── toutiao.ttss.template │ ├── baidu.json.template │ ├── qq.json.template │ ├── wechat.json.template │ ├── qq.js.template │ ├── kuaishou.js.template │ ├── wechat.js.template │ ├── toutiao.js.template │ ├── baidu.js.template │ └── alipay.js.template ├── libs │ ├── whitespace.ts │ ├── iconfont.json │ ├── getTemplate.ts │ ├── replace.ts │ ├── fetchXml.ts │ ├── getConfig.ts │ ├── utils.ts │ ├── generateKuaishouComponent.ts │ ├── generateQqComponent.ts │ ├── generateBaiduComponent.ts │ ├── generateAlipayComponent.ts │ ├── generateToutiaoComponent.ts │ └── generateWechatComponent.ts └── commands │ ├── createQqIcon.ts │ ├── createBaiduIcon.ts │ ├── createAlipayIcon.ts │ ├── createWechatIcon.ts │ ├── createKuaishouIcon.ts │ ├── createToutiaoIcon.ts │ ├── help.ts │ └── createJson.ts ├── .gitignore ├── images ├── symbol-url.png └── multi-color-icon.jpg ├── scripts ├── config │ ├── qq.json │ ├── baidu.json │ ├── alipay.json │ ├── toutiao.json │ ├── wechat.json │ └── kuaishou.json └── update-snapshot.sh ├── .editorconfig ├── publish.sh ├── CHANGELOG.md ├── tsconfig.json ├── LICENSE ├── package.json ├── README.md └── yarn.lock /snapshots/alipay/alipay.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/kuaishou/kuaishou.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/toutiao/toutiao.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/qq/qq.qss: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/alipay.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/kuaishou.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/toutiao.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/alipay/alipay.acss: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/baidu/baidu.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/wechat/wechat.wxss: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/qq.qss.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.log 3 | .idea/ 4 | build/ 5 | /iconfont.json 6 | .DS_Store -------------------------------------------------------------------------------- /snapshots/kuaishou/kuaishou.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/qq/qq.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /snapshots/toutiao/toutiao.ttss: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/alipay.acss.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/baidu.css.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/wechat.wxss.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /snapshots/baidu/baidu.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /snapshots/wechat/wechat.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/templates/kuaishou.css.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/toutiao.ttss.template: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/baidu.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/templates/qq.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/templates/wechat.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /images/symbol-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/mini-program-iconfont-cli/HEAD/images/symbol-url.png -------------------------------------------------------------------------------- /src/libs/whitespace.ts: -------------------------------------------------------------------------------- 1 | export const whitespace = (repeat: number) => { 2 | return ' '.repeat(repeat); 3 | }; 4 | -------------------------------------------------------------------------------- /images/multi-color-icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/mini-program-iconfont-cli/HEAD/images/multi-color-icon.jpg -------------------------------------------------------------------------------- /src/libs/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", 3 | "save_dir": "./iconfont", 4 | "use_rpx": false, 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/qq.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": false, 4 | "save_dir": "./snapshots/qq", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 24 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/baidu.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": false, 4 | "save_dir": "./snapshots/baidu", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/alipay.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": false, 4 | "save_dir": "./snapshots/alipay", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/toutiao.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": true, 4 | "save_dir": "./snapshots/toutiao", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/wechat.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": false, 4 | "save_dir": "./snapshots/wechat", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 20 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/kuaishou.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_rpx": false, 4 | "save_dir": "./snapshots/kuaishou", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18 7 | } 8 | -------------------------------------------------------------------------------- /src/libs/getTemplate.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path from 'path'; 3 | 4 | export const getTemplate = (fileName: string) => { 5 | return fs.readFileSync(path.join(__dirname, `../templates/${fileName}.template`)).toString(); 6 | }; 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [.*] 12 | insert_final_newline = false 13 | -------------------------------------------------------------------------------- /src/commands/createQqIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateQqComponent } from '../libs/generateQqComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateQqComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /src/commands/createBaiduIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateBaiduComponent } from '../libs/generateBaiduComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateBaiduComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /src/commands/createAlipayIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateAlipayComponent } from '../libs/generateAlipayComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateAlipayComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /src/commands/createWechatIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateWechatComponent } from '../libs/generateWechatComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateWechatComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /src/commands/createKuaishouIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateKuaishouComponent } from '../libs/generateKuaishouComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateKuaishouComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /src/commands/createToutiaoIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | import { getConfig } from '../libs/getConfig'; 5 | import { fetchXml } from '../libs/fetchXml'; 6 | import { generateToutiaoComponent } from '../libs/generateToutiaoComponent'; 7 | 8 | const config = getConfig(); 9 | 10 | fetchXml(config.symbol_url).then((result) => { 11 | generateToutiaoComponent(result, config); 12 | }).catch((e) => { 13 | console.error(colors.red(e.message || 'Unknown Error')); 14 | process.exit(1); 15 | }); 16 | -------------------------------------------------------------------------------- /scripts/update-snapshot.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | npx ts-node src/commands/createQqIcon.ts --config ./scripts/config/qq.json 4 | npx ts-node src/commands/createToutiaoIcon.ts --config ./scripts/config/toutiao.json 5 | npx ts-node src/commands/createKuaishouIcon.ts --config ./scripts/config/kuaishou.json 6 | npx ts-node src/commands/createBaiduIcon.ts --config ./scripts/config/baidu.json 7 | npx ts-node src/commands/createAlipayIcon.ts --config ./scripts/config/alipay.json 8 | npx ts-node src/commands/createWechatIcon.ts --config ./scripts/config/wechat.json 9 | -------------------------------------------------------------------------------- /snapshots/qq/qq.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // alipay | user | setup 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | isStr: typeof color === 'string', 13 | }); 14 | } 15 | }, 16 | size: { 17 | type: Number, 18 | value: 24, 19 | observer: function(size) { 20 | this.setData({ 21 | svgSize: size, 22 | }); 23 | }, 24 | }, 25 | }, 26 | data: { 27 | svgSize: 24, 28 | quot: '"', 29 | isStr: true, 30 | }, 31 | }); 32 | -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | rm -rf ./build 4 | rm -rf ./src/iconfont 5 | 6 | ./node_modules/.bin/tsc 7 | 8 | mv ./build/src/* ./build 9 | rm -r ./build/src 10 | cp README.md package.json LICENSE ./build 11 | cp -rf src/templates ./build/templates 12 | 13 | old_registry=$(npm config get registry) 14 | npm config set registry https://registry.npmjs.org 15 | set +e 16 | whoami=$(npm whoami 2>/dev/null) 17 | set -e 18 | 19 | if [ -z "$whoami" ] 20 | then 21 | echo "login plz..." 22 | npm login 23 | fi 24 | echo "I am: $(npm whoami)" 25 | 26 | sleep 1 27 | echo "Begin publish..." 28 | npm publish ./build/ --access=public "$@" 29 | 30 | npm config set registry ${old_registry} 31 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.6.1 2 | 修复部分平台图标展示失败问题 3 | 4 | # 0.6.0 5 | [feat] npx iconfont-init 增加 `--output` 选项，可传入配置输出路径，默认为 iconfont.json 6 |
7 | [feat] npx iconfont-XXXXX 增加 `--config` 选项，可传入配置文件路径，默认为 iconfont.json 8 | 9 | # 0.5.5 10 | [fix] 修复 node 8.4.0 和之前版本无法初始化的问题 11 | 12 | # 0.5.4 13 | [fix] 修复rpx格式中，容器和svg尺寸不一致导致线条溢出问题 14 |
15 | [fix] 修复图标名称前缀有多个符号时无法彻底清除的问题 16 | 17 | # 0.5.3 18 | [fix] 修复rpx在各个小程序导致图标靠顶的问题 19 | 20 | # 0.5.0 21 | [feature] 增加QQ小程序 22 | 23 | # 0.4.0 24 | [feature] 增加头条小程序（字节跳动） 25 | 26 | # 0.3.4 27 | [fix] 执行文件头部增加蛇棒 28 | 29 | # 0.3.2 30 | [fix] 删除图标名称的边界符号 31 | 32 | # 0.3.0 33 | [feature] 增加百度小程序 34 | 35 | # 0.2.0 36 | [feature] 增加支付宝小程序 37 | 38 | # 0.1.0 39 | [fix] 修复微信不支持16进制颜色格式的写法 40 | -------------------------------------------------------------------------------- /src/templates/qq.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // #names# 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | isStr: typeof color === 'string', 13 | }); 14 | } 15 | }, 16 | size: { 17 | type: Number, 18 | value: #size#, 19 | observer: function(size) { 20 | this.setData({ 21 | svgSize: #rpx-1:size / 750 * qq.getSystemInfoSync().windowWidth:##rpx-0:size:#, 22 | }); 23 | }, 24 | }, 25 | }, 26 | data: { 27 | svgSize: #rpx-1:#size# / 750 * qq.getSystemInfoSync().windowWidth:##rpx-0:#size#:#, 28 | quot: '"', 29 | isStr: true, 30 | }, 31 | }); 32 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "allowJs": false, 6 | "declaration": true, 7 | "removeComments": false, 8 | "outDir": "./build", 9 | "rootDir": "./", 10 | "jsx": "react", 11 | "importHelpers": true, 12 | "downlevelIteration": true, 13 | "strict": true, 14 | "noImplicitAny": false, 15 | "strictNullChecks": true, 16 | "strictFunctionTypes": true, 17 | "strictBindCallApply": true, 18 | "strictPropertyInitialization": true, 19 | "noImplicitThis": true, 20 | "alwaysStrict": true, 21 | 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "noImplicitReturns": true, 25 | "noFallthroughCasesInSwitch": true, 26 | "moduleResolution": "node", 27 | "allowSyntheticDefaultImports": true, 28 | "esModuleInterop": true, 29 | "resolveJsonModule": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/commands/help.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | 5 | console.log([ 6 | '', 7 | 'Usage:', 8 | '', 9 | ' ' + colors.green.bold('npx iconfont-init [--output]') + ' : Generate configuration file, default file name is iconfont.json', 10 | ' ' + colors.green.bold('npx iconfont-wechat [--config]') + ' : Generate wechat icon component', 11 | ' ' + colors.green.bold('npx iconfont-alipay [--config]') + ' : Generate alipay icon component', 12 | ' ' + colors.green.bold('npx iconfont-baidu [--config]') + ' : Generate baidu icon component', 13 | ' ' + colors.green.bold('npx iconfont-toutiao [--config]') + ' : Generate toutiao icon component', 14 | ' ' + colors.green.bold('npx iconfont-kuaishou [--config]') + ' : Generate kuaishou icon component', 15 | ' ' + colors.green.bold('npx iconfont-qq [--config]') + ' : Generate qq icon component', 16 | '', 17 | ].join('\n')); 18 | -------------------------------------------------------------------------------- /src/commands/createJson.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import path from 'path'; 4 | import fs from 'fs'; 5 | import fse from 'fs-extra'; 6 | import colors from 'colors'; 7 | import minimist from 'minimist'; 8 | 9 | const args = minimist<{ output: string }>(process.argv.slice(2)); 10 | 11 | let outputPath = 'iconfont.json'; 12 | 13 | if (args.output && typeof args.output === 'string') { 14 | outputPath = args.output; 15 | 16 | if (outputPath.split('.').pop() !== 'json') { 17 | outputPath += '.json'; 18 | } 19 | } 20 | 21 | const targetFile = path.resolve(outputPath); 22 | 23 | if (fs.existsSync(targetFile)) { 24 | console.error(colors.red(`File "${outputPath}" was created before.`)); 25 | } else { 26 | // fs.copyFileSync only can be used above node v8.5.0+ 27 | fse.copySync(path.join(__dirname, '../libs/iconfont.json'), targetFile); 28 | console.log(colors.green(`File "${outputPath}" is created now. We recommend you add it to version control.`)); 29 | } 30 | -------------------------------------------------------------------------------- /src/libs/replace.ts: -------------------------------------------------------------------------------- 1 | export const replaceSize = (content: string, size: number) => { 2 | return content.replace(/#size#/g, String(size)); 3 | }; 4 | 5 | export const replaceNames = (content: string, names: string[]) => { 6 | return content.replace(/#names#/g, names.join(' | ')); 7 | }; 8 | 9 | export const replaceHexToRgb = (hex) => { 10 | const rgb: number[] = []; 11 | 12 | //去除前缀 # 号 13 | hex = hex.substr(1); 14 | 15 | if (hex.length === 3) { 16 | // 处理 '#abc' 成 '#aabbcc' 17 | hex = hex.replace(/(.)/g, '$1$1'); 18 | } 19 | 20 | hex.replace(/../g, (color: string) => { 21 | // 按16进制将字符串转换为数字 22 | rgb.push(parseInt(color, 0x10)); 23 | 24 | return color; 25 | }); 26 | 27 | return 'rgb(' + rgb.join(',') + ')'; 28 | }; 29 | 30 | export const replaceIsRpx = (content: string, useRpx: boolean) => { 31 | return content 32 | .replace(/#rpx-1:(.+?):#/g, useRpx ? '$1' : '') 33 | .replace(/#rpx-0:(.+?):#/g, useRpx ? '' : '$1'); 34 | }; 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 原罪 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/libs/fetchXml.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { parseString } from 'xml2js'; 3 | import colors from 'colors'; 4 | 5 | export interface XmlData { 6 | svg: { 7 | symbol: Array<{ 8 | $: { 9 | viewBox: string; 10 | id: string; 11 | }; 12 | path: Array<{ 13 | $: { 14 | d: string; 15 | fill?: string; 16 | }; 17 | }>; 18 | }>; 19 | } 20 | } 21 | 22 | export const fetchXml = async (url): Promise => { 23 | console.log('Fetching iconfont data...'); 24 | 25 | try { 26 | const { data } = await axios.get(url); 27 | const matches = String(data).match(/'(.+?)<\/svg>'/); 28 | 29 | if (matches) { 30 | return new Promise((resolve, reject) => { 31 | parseString(`${matches[1]}`, { rootName: 'svg' }, (err: Error, result: XmlData) => { 32 | if (err) { 33 | reject(err); 34 | } else { 35 | resolve(result); 36 | } 37 | }); 38 | }); 39 | } 40 | 41 | throw new Error('You provide a wrong symbol url'); 42 | } catch (e) { 43 | console.error(colors.red(e.message || 'Unknown Error')); 44 | process.exit(1); 45 | throw e; 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /snapshots/kuaishou/kuaishou.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // alipay | user | setup 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | colors: this.fixColor(), 13 | isStr: typeof color === 'string', 14 | }); 15 | } 16 | }, 17 | size: { 18 | type: Number, 19 | value: 18, 20 | observer: function(size) { 21 | this.setData({ 22 | svgSize: size, 23 | }); 24 | }, 25 | }, 26 | }, 27 | data: { 28 | colors: '', 29 | svgSize: 18, 30 | quot: '"', 31 | isStr: true, 32 | }, 33 | methods: { 34 | fixColor: function() { 35 | var color = this.data.color; 36 | var hex2rgb = this.hex2rgb; 37 | 38 | if (typeof color === 'string') { 39 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 40 | } 41 | 42 | return color.map(function (item) { 43 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 44 | }); 45 | }, 46 | hex2rgb: function(hex) { 47 | var rgb = []; 48 | 49 | hex = hex.substr(1); 50 | 51 | if (hex.length === 3) { 52 | hex = hex.replace(/(.)/g, '$1$1'); 53 | } 54 | 55 | hex.replace(/../g, function(color) { 56 | rgb.push(parseInt(color, 0x10)); 57 | return color; 58 | }); 59 | 60 | return 'rgb(' + rgb.join(',') + ')'; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /snapshots/wechat/wechat.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // alipay | user | setup 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | colors: this.fixColor(), 13 | isStr: typeof color === 'string', 14 | }); 15 | } 16 | }, 17 | size: { 18 | type: Number, 19 | value: 20, 20 | observer: function(size) { 21 | this.setData({ 22 | svgSize: size, 23 | }); 24 | }, 25 | }, 26 | }, 27 | data: { 28 | colors: '', 29 | svgSize: 20, 30 | quot: '"', 31 | isStr: true, 32 | }, 33 | methods: { 34 | fixColor: function() { 35 | var color = this.data.color; 36 | var hex2rgb = this.hex2rgb; 37 | 38 | if (typeof color === 'string') { 39 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 40 | } 41 | 42 | return color.map(function (item) { 43 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 44 | }); 45 | }, 46 | hex2rgb: function(hex) { 47 | var rgb = []; 48 | 49 | hex = hex.substr(1); 50 | 51 | if (hex.length === 3) { 52 | hex = hex.replace(/(.)/g, '$1$1'); 53 | } 54 | 55 | hex.replace(/../g, function(color) { 56 | rgb.push(parseInt(color, 0x10)); 57 | return color; 58 | }); 59 | 60 | return 'rgb(' + rgb.join(',') + ')'; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /snapshots/baidu/baidu.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // alipay | user | setup 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | value: '', 11 | observer: function(color) { 12 | this.setData({ 13 | colors: this.fixColor(color), 14 | isStr: typeof color === 'string', 15 | }); 16 | } 17 | }, 18 | size: { 19 | type: Number, 20 | value: 18, 21 | observer: function(size) { 22 | this.setData({ 23 | svgSize: size, 24 | }); 25 | }, 26 | }, 27 | }, 28 | data: { 29 | colors: '', 30 | svgSize: 18, 31 | quot: '"', 32 | isStr: true, 33 | }, 34 | methods: { 35 | fixColor: function() { 36 | var color = this.data.color; 37 | var hex2rgb = this.hex2rgb; 38 | 39 | if (typeof color === 'string') { 40 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 41 | } 42 | 43 | return color.map(function (item) { 44 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 45 | }); 46 | }, 47 | hex2rgb: function(hex) { 48 | var rgb = []; 49 | 50 | hex = hex.substr(1); 51 | 52 | if (hex.length === 3) { 53 | hex = hex.replace(/(.)/g, '$1$1'); 54 | } 55 | 56 | hex.replace(/../g, function(color) { 57 | rgb.push(parseInt(color, 0x10)); 58 | return color; 59 | }); 60 | 61 | return 'rgb(' + rgb.join(',') + ')'; 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mini-program-iconfont-cli", 3 | "version": "0.6.1", 4 | "main": "index.js", 5 | "keywords": [ 6 | "mini-program", 7 | "iconfont", 8 | "iconfont-cli", 9 | "xiaochengxu", 10 | "wechat-program", 11 | "alipay-program", 12 | "baidu-program", 13 | "toutiao-program", 14 | "kuaishou-program", 15 | "qq-program" 16 | ], 17 | "repository": "git@github.com:fwh1990/mini-program-iconfont-cli.git", 18 | "author": "范文华 <531362022@qq.com>", 19 | "license": "MIT", 20 | "bin": { 21 | "iconfont": "./commands/help.js", 22 | "iconfont-init": "./commands/createJson.js", 23 | "iconfont-wechat": "./commands/createWechatIcon.js", 24 | "iconfont-alipay": "./commands/createAlipayIcon.js", 25 | "iconfont-baidu": "./commands/createBaiduIcon.js", 26 | "iconfont-toutiao": "./commands/createToutiaoIcon.js", 27 | "iconfont-kuaishou": "./commands/createKuaishouIcon.js", 28 | "iconfont-qq": "./commands/createQqIcon.js" 29 | }, 30 | "dependencies": { 31 | "axios": "^0.19.0", 32 | "colors": "^1.3.3", 33 | "fs-extra": "^8.1.0", 34 | "glob": "^7.1.4", 35 | "minimist": "^1.2.5", 36 | "mkdirp": "^0.5.1", 37 | "tslib": "^1.10.0", 38 | "xml2js": "^0.4.19" 39 | }, 40 | "devDependencies": { 41 | "@types/fs-extra": "^8.0.0", 42 | "@types/glob": "^7.1.1", 43 | "@types/minimist": "^1.2.0", 44 | "@types/mkdirp": "^0.5.2", 45 | "@types/node": "^12.7.2", 46 | "@types/xml2js": "^0.4.4", 47 | "ts-node": "^8.9.0", 48 | "typescript": "^3.8.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/libs/getConfig.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import fs from 'fs'; 3 | import colors from 'colors'; 4 | import defaultConfig from './iconfont.json'; 5 | import minimist from 'minimist'; 6 | 7 | export interface Config { 8 | symbol_url: string; 9 | save_dir: string; 10 | use_rpx: boolean; 11 | trim_icon_prefix: string; 12 | default_icon_size: number; 13 | } 14 | 15 | let cacheConfig: Config; 16 | 17 | export const getConfig = () => { 18 | if (cacheConfig) { 19 | return cacheConfig; 20 | } 21 | 22 | 23 | const args = minimist<{ config: string }>(process.argv.slice(2)); 24 | let configFilePath = 'iconfont.json'; 25 | 26 | if (args.config && typeof args.config === 'string') { 27 | configFilePath = args.config; 28 | } 29 | 30 | const targetFile = path.resolve(configFilePath); 31 | 32 | if (!fs.existsSync(targetFile)) { 33 | console.warn(colors.red(`File "${configFilePath}" doesn't exist, did you forget to generate it?`)); 34 | process.exit(1); 35 | } 36 | 37 | const config = require(targetFile) as Config; 38 | 39 | if (!config.symbol_url || !/^(https?:)?\/\//.test(config.symbol_url)) { 40 | console.warn(colors.red('You are required to provide symbol_url')); 41 | process.exit(1); 42 | } 43 | 44 | if (config.symbol_url.indexOf('//') === 0) { 45 | config.symbol_url = 'http:' + config.symbol_url; 46 | } 47 | 48 | config.save_dir = config.save_dir || defaultConfig.save_dir; 49 | config.default_icon_size = config.default_icon_size || defaultConfig.default_icon_size; 50 | 51 | cacheConfig = config; 52 | 53 | return config; 54 | }; 55 | -------------------------------------------------------------------------------- /snapshots/toutiao/toutiao.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // alipay | user | setup 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | value: '', 11 | observer: function(color) { 12 | this.setData({ 13 | colors: this.fixColor(), 14 | isStr: typeof color === 'string', 15 | }); 16 | } 17 | }, 18 | size: { 19 | type: Number, 20 | value: 18, 21 | observer: function(size) { 22 | this.setData({ 23 | svgSize: size / 750 * tt.getSystemInfoSync().windowWidth, 24 | }); 25 | }, 26 | }, 27 | }, 28 | data: { 29 | colors: '', 30 | svgSize: 18 / 750 * tt.getSystemInfoSync().windowWidth, 31 | quot: '"', 32 | isStr: true, 33 | }, 34 | methods: { 35 | fixColor: function() { 36 | var color = this.data.color; 37 | var hex2rgb = this.hex2rgb; 38 | 39 | if (typeof color === 'string') { 40 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 41 | } 42 | 43 | return color.map(function (item) { 44 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 45 | }); 46 | }, 47 | hex2rgb: function(hex) { 48 | var rgb = []; 49 | 50 | hex = hex.substr(1); 51 | 52 | if (hex.length === 3) { 53 | hex = hex.replace(/(.)/g, '$1$1'); 54 | } 55 | 56 | hex.replace(/../g, function(color) { 57 | rgb.push(parseInt(color, 0x10)); 58 | return color; 59 | }); 60 | 61 | return 'rgb(' + rgb.join(',') + ')'; 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /src/templates/kuaishou.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // #names# 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | colors: this.fixColor(), 13 | isStr: typeof color === 'string', 14 | }); 15 | } 16 | }, 17 | size: { 18 | type: Number, 19 | value: #size#, 20 | observer: function(size) { 21 | this.setData({ 22 | svgSize: #rpx-1:size / 750 * ks.getSystemInfoSync().windowWidth:##rpx-0:size:#, 23 | }); 24 | }, 25 | }, 26 | }, 27 | data: { 28 | colors: '', 29 | svgSize: #rpx-1:#size# / 750 * ks.getSystemInfoSync().windowWidth:##rpx-0:#size#:#, 30 | quot: '"', 31 | isStr: true, 32 | }, 33 | methods: { 34 | fixColor: function() { 35 | var color = this.data.color; 36 | var hex2rgb = this.hex2rgb; 37 | 38 | if (typeof color === 'string') { 39 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 40 | } 41 | 42 | return color.map(function (item) { 43 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 44 | }); 45 | }, 46 | hex2rgb: function(hex) { 47 | var rgb = []; 48 | 49 | hex = hex.substr(1); 50 | 51 | if (hex.length === 3) { 52 | hex = hex.replace(/(.)/g, '$1$1'); 53 | } 54 | 55 | hex.replace(/../g, function(color) { 56 | rgb.push(parseInt(color, 0x10)); 57 | return color; 58 | }); 59 | 60 | return 'rgb(' + rgb.join(',') + ')'; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /src/templates/wechat.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // #names# 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | colors: this.fixColor(), 13 | isStr: typeof color === 'string', 14 | }); 15 | } 16 | }, 17 | size: { 18 | type: Number, 19 | value: #size#, 20 | observer: function(size) { 21 | this.setData({ 22 | svgSize: #rpx-1:size / 750 * wx.getSystemInfoSync().windowWidth:##rpx-0:size:#, 23 | }); 24 | }, 25 | }, 26 | }, 27 | data: { 28 | colors: '', 29 | svgSize: #rpx-1:#size# / 750 * wx.getSystemInfoSync().windowWidth:##rpx-0:#size#:#, 30 | quot: '"', 31 | isStr: true, 32 | }, 33 | methods: { 34 | fixColor: function() { 35 | var color = this.data.color; 36 | var hex2rgb = this.hex2rgb; 37 | 38 | if (typeof color === 'string') { 39 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 40 | } 41 | 42 | return color.map(function (item) { 43 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 44 | }); 45 | }, 46 | hex2rgb: function(hex) { 47 | var rgb = []; 48 | 49 | hex = hex.substr(1); 50 | 51 | if (hex.length === 3) { 52 | hex = hex.replace(/(.)/g, '$1$1'); 53 | } 54 | 55 | hex.replace(/../g, function(color) { 56 | rgb.push(parseInt(color, 0x10)); 57 | return color; 58 | }); 59 | 60 | return 'rgb(' + rgb.join(',') + ')'; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /src/templates/toutiao.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // #names# 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | value: '', 11 | observer: function(color) { 12 | this.setData({ 13 | colors: this.fixColor(), 14 | isStr: typeof color === 'string', 15 | }); 16 | } 17 | }, 18 | size: { 19 | type: Number, 20 | value: #size#, 21 | observer: function(size) { 22 | this.setData({ 23 | svgSize: #rpx-1:size / 750 * tt.getSystemInfoSync().windowWidth:##rpx-0:size:#, 24 | }); 25 | }, 26 | }, 27 | }, 28 | data: { 29 | colors: '', 30 | svgSize: #rpx-1:#size# / 750 * tt.getSystemInfoSync().windowWidth:##rpx-0:#size#:#, 31 | quot: '"', 32 | isStr: true, 33 | }, 34 | methods: { 35 | fixColor: function() { 36 | var color = this.data.color; 37 | var hex2rgb = this.hex2rgb; 38 | 39 | if (typeof color === 'string') { 40 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 41 | } 42 | 43 | return color.map(function (item) { 44 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 45 | }); 46 | }, 47 | hex2rgb: function(hex) { 48 | var rgb = []; 49 | 50 | hex = hex.substr(1); 51 | 52 | if (hex.length === 3) { 53 | hex = hex.replace(/(.)/g, '$1$1'); 54 | } 55 | 56 | hex.replace(/../g, function(color) { 57 | rgb.push(parseInt(color, 0x10)); 58 | return color; 59 | }); 60 | 61 | return 'rgb(' + rgb.join(',') + ')'; 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /src/templates/baidu.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // #names# 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | value: '', 11 | observer: function(color) { 12 | this.setData({ 13 | colors: this.fixColor(color), 14 | isStr: typeof color === 'string', 15 | }); 16 | } 17 | }, 18 | size: { 19 | type: Number, 20 | value: #size#, 21 | observer: function(size) { 22 | this.setData({ 23 | svgSize: #rpx-1:size / 750 * swan.getSystemInfoSync().windowWidth:##rpx-0:size:#, 24 | }); 25 | }, 26 | }, 27 | }, 28 | data: { 29 | colors: '', 30 | svgSize: #rpx-1:#size# / 750 * swan.getSystemInfoSync().windowWidth:##rpx-0:#size#:#, 31 | quot: '"', 32 | isStr: true, 33 | }, 34 | methods: { 35 | fixColor: function() { 36 | var color = this.data.color; 37 | var hex2rgb = this.hex2rgb; 38 | 39 | if (typeof color === 'string') { 40 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 41 | } 42 | 43 | return color.map(function (item) { 44 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 45 | }); 46 | }, 47 | hex2rgb: function(hex) { 48 | var rgb = []; 49 | 50 | hex = hex.substr(1); 51 | 52 | if (hex.length === 3) { 53 | hex = hex.replace(/(.)/g, '$1$1'); 54 | } 55 | 56 | hex.replace(/../g, function(color) { 57 | rgb.push(parseInt(color, 0x10)); 58 | return color; 59 | }); 60 | 61 | return 'rgb(' + rgb.join(',') + ')'; 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /snapshots/alipay/alipay.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | // alipay | user | setup 4 | name: null, 5 | // string | string[] 6 | color: '', 7 | size: 18, 8 | }, 9 | data: { 10 | colors: '', 11 | quot: '"', 12 | svgSize: 18, 13 | isStr: true, 14 | }, 15 | didMount() { 16 | const size = this.props.size; 17 | const color = this.props.color; 18 | 19 | this.setData({ 20 | colors: this.fixColor(color), 21 | isStr: typeof color === 'string', 22 | }); 23 | 24 | if (size !== this.data.svgSize) { 25 | this.setData({ 26 | svgSize: size, 27 | }); 28 | } 29 | }, 30 | disUpdate(prevProps) { 31 | const size = this.props.size; 32 | const color = this.props.color; 33 | 34 | if (color !== prevProps.color) { 35 | this.setData({ 36 | colors: this.fixColor(color), 37 | isStr: typeof color === 'string', 38 | }); 39 | } 40 | 41 | if (size !== prevProps.size) { 42 | this.setData({ 43 | svgSize: size, 44 | }); 45 | } 46 | }, 47 | methods: { 48 | fixColor: function() { 49 | var color = this.props.color; 50 | var hex2rgb = this.hex2rgb; 51 | 52 | if (typeof color === 'string') { 53 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 54 | } 55 | 56 | return color.map(function (item) { 57 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 58 | }); 59 | }, 60 | hex2rgb: function(hex) { 61 | var rgb = []; 62 | 63 | hex = hex.substr(1); 64 | 65 | if (hex.length === 3) { 66 | hex = hex.replace(/(.)/g, '$1$1'); 67 | } 68 | 69 | hex.replace(/../g, function(color) { 70 | rgb.push(parseInt(color, 0x10)); 71 | return color; 72 | }); 73 | 74 | return 'rgb(' + rgb.join(',') + ')'; 75 | } 76 | } 77 | }); 78 | -------------------------------------------------------------------------------- /src/templates/alipay.js.template: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | // #names# 4 | name: null, 5 | // string | string[] 6 | color: '', 7 | size: #size#, 8 | }, 9 | data: { 10 | colors: '', 11 | quot: '"', 12 | svgSize: #size#, 13 | isStr: true, 14 | }, 15 | didMount() { 16 | const size = this.props.size; 17 | const color = this.props.color; 18 | 19 | this.setData({ 20 | colors: this.fixColor(color), 21 | isStr: typeof color === 'string', 22 | }); 23 | 24 | if (size !== this.data.svgSize) { 25 | this.setData({ 26 | svgSize: #rpx-1:size / 750 * my.getSystemInfoSync().windowWidth:##rpx-0:size:#, 27 | }); 28 | } 29 | }, 30 | disUpdate(prevProps) { 31 | const size = this.props.size; 32 | const color = this.props.color; 33 | 34 | if (color !== prevProps.color) { 35 | this.setData({ 36 | colors: this.fixColor(color), 37 | isStr: typeof color === 'string', 38 | }); 39 | } 40 | 41 | if (size !== prevProps.size) { 42 | this.setData({ 43 | svgSize: #rpx-1:size / 750 * my.getSystemInfoSync().windowWidth:##rpx-0:size:#, 44 | }); 45 | } 46 | }, 47 | methods: { 48 | fixColor: function() { 49 | var color = this.props.color; 50 | var hex2rgb = this.hex2rgb; 51 | 52 | if (typeof color === 'string') { 53 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 54 | } 55 | 56 | return color.map(function (item) { 57 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 58 | }); 59 | }, 60 | hex2rgb: function(hex) { 61 | var rgb = []; 62 | 63 | hex = hex.substr(1); 64 | 65 | if (hex.length === 3) { 66 | hex = hex.replace(/(.)/g, '$1$1'); 67 | } 68 | 69 | hex.replace(/../g, function(color) { 70 | rgb.push(parseInt(color, 0x10)); 71 | return color; 72 | }); 73 | 74 | return 'rgb(' + rgb.join(',') + ')'; 75 | } 76 | } 77 | }); 78 | -------------------------------------------------------------------------------- /src/libs/utils.ts: -------------------------------------------------------------------------------- 1 | import {XmlData} from "./fetchXml"; 2 | import {replaceHexToRgb} from "./replace"; 3 | 4 | const ATTRIBUTE_FILL_MAP = ['path']; 5 | 6 | 7 | export const generateCase = (data: XmlData['svg']['symbol'][number], config?: { 8 | hexToRgb:boolean, 9 | }) => { 10 | let template = ``; 11 | 12 | for (const domName of Object.keys(data)) { 13 | if (domName === '$') { 14 | continue; 15 | } 16 | 17 | const counter = { 18 | colorIndex: 0, 19 | }; 20 | 21 | if (data[domName].$) { 22 | template += `<${domName}${addAttribute(domName, data[domName], counter, config)} />`; 23 | } else if (Array.isArray(data[domName])) { 24 | data[domName].forEach((sub) => { 25 | template += `<${domName}${addAttribute(domName, sub, counter, config)} />`; 26 | }); 27 | } 28 | } 29 | 30 | template += ``; 31 | 32 | return template.replace(/<|>/g, (matched) => encodeURIComponent(matched)); 33 | }; 34 | 35 | const addAttribute = (domName: string, sub: XmlData['svg']['symbol'][number]['path'][number], counter: { colorIndex: number }, config?: { 36 | hexToRgb:boolean 37 | }) => { 38 | let template = ''; 39 | 40 | if (sub && sub.$) { 41 | if (ATTRIBUTE_FILL_MAP.includes(domName)) { 42 | // Set default color same as in iconfont.cn 43 | // And create placeholder to inject color by user's behavior 44 | sub.$.fill = sub.$.fill || '#333333'; 45 | } 46 | 47 | for (const attributeName of Object.keys(sub.$)) { 48 | if (attributeName === 'fill') { 49 | let color :string | undefined; 50 | let keyword: string; 51 | if(config?.hexToRgb){ 52 | color = replaceHexToRgb(sub.$[attributeName]); 53 | keyword = 'colors' 54 | }else { 55 | keyword = 'color' 56 | color = sub.$[attributeName] 57 | } 58 | template += ` ${attributeName}='{{(isStr ? ${keyword} : ${keyword}[${counter.colorIndex}]) || '${color}'}}'`; 59 | counter.colorIndex += 1; 60 | } else { 61 | template += ` ${attributeName}='${sub.$[attributeName]}'`; 62 | } 63 | } 64 | } 65 | 66 | return template; 67 | }; 68 | -------------------------------------------------------------------------------- /src/libs/generateKuaishouComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { Config } from './getConfig'; 7 | import { XmlData } from './fetchXml'; 8 | import { getTemplate } from './getTemplate'; 9 | import { generateCase } from "./utils" 10 | import { 11 | replaceNames, 12 | replaceSize, 13 | replaceIsRpx, 14 | } from './replace'; 15 | 16 | 17 | export const generateKuaishouComponent = (data: XmlData, config: Config) => { 18 | const names: string[] = []; 19 | const svgTemplates: string[] = []; 20 | 21 | const saveDir = path.resolve(config.save_dir); 22 | const fileName = basename(config.save_dir) || 'iconfont'; 23 | 24 | mkdirp.sync(saveDir); 25 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 26 | 27 | data.svg.symbol.forEach((item) => { 28 | const iconId = item.$.id; 29 | const iconIdAfterTrim = config.trim_icon_prefix 30 | ? iconId.replace( 31 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 32 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 33 | ) 34 | : iconId; 35 | 36 | names.push(iconIdAfterTrim); 37 | svgTemplates.push( 38 | `\n' 42 | ); 43 | 44 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 45 | }); 46 | 47 | fs.writeFileSync(path.join(saveDir, fileName + '.ksml'), svgTemplates.join('\n\n')); 48 | fs.writeFileSync(path.join(saveDir, fileName + '.css'), getTemplate('kuaishou.css')); 49 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('kuaishou.json')); 50 | 51 | let jsFile = getTemplate('kuaishou.js'); 52 | jsFile = replaceNames(jsFile, names); 53 | jsFile = replaceSize(jsFile, config.default_icon_size); 54 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 55 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 56 | 57 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 58 | }; 59 | -------------------------------------------------------------------------------- /src/libs/generateQqComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { XmlData } from './fetchXml'; 7 | import { Config } from './getConfig'; 8 | import { getTemplate } from './getTemplate'; 9 | import { generateCase } from "./utils" 10 | import { 11 | replaceIsRpx, 12 | replaceNames, 13 | replaceSize, 14 | } from './replace'; 15 | // import { whitespace } from './whitespace'; 16 | 17 | 18 | export const generateQqComponent = (data: XmlData, config: Config) => { 19 | const svgTemplates: string[] = []; 20 | const names: string[] = []; 21 | const saveDir = path.resolve(config.save_dir); 22 | const fileName = basename(config.save_dir) || 'iconfont'; 23 | 24 | mkdirp.sync(saveDir); 25 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 26 | 27 | data.svg.symbol.forEach((item) => { 28 | const iconId = item.$.id; 29 | const iconIdAfterTrim = config.trim_icon_prefix 30 | ? iconId.replace( 31 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 32 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 33 | ) 34 | : iconId; 35 | 36 | names.push(iconIdAfterTrim); 37 | svgTemplates.push( 38 | `\n' 40 | ); 41 | 42 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 43 | }); 44 | 45 | fs.writeFileSync(path.join(saveDir, fileName + '.qss'), getTemplate('qq.qss')); 46 | fs.writeFileSync( 47 | path.join(saveDir, fileName + '.qml'), 48 | svgTemplates.join('\n\n') 49 | ); 50 | 51 | let jsFile = getTemplate('qq.js'); 52 | 53 | jsFile = replaceSize(jsFile, config.default_icon_size); 54 | jsFile = replaceNames(jsFile, names); 55 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 56 | 57 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 58 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('qq.json')); 59 | 60 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 61 | }; 62 | -------------------------------------------------------------------------------- /src/libs/generateBaiduComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { XmlData } from './fetchXml'; 7 | import { Config } from './getConfig'; 8 | import { generateCase } from "./utils" 9 | import { getTemplate } from './getTemplate'; 10 | import { 11 | replaceIsRpx, 12 | replaceNames, 13 | replaceSize, 14 | } from './replace'; 15 | 16 | 17 | export const generateBaiduComponent = (data: XmlData, config: Config) => { 18 | const svgTemplates: string[] = []; 19 | const names: string[] = []; 20 | const saveDir = path.resolve(config.save_dir); 21 | const fileName = basename(config.save_dir) || 'iconfont'; 22 | 23 | mkdirp.sync(saveDir); 24 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 25 | 26 | data.svg.symbol.forEach((item) => { 27 | const iconId = item.$.id; 28 | const iconIdAfterTrim = config.trim_icon_prefix 29 | ? iconId.replace( 30 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 31 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 32 | ) 33 | : iconId; 34 | 35 | names.push(iconIdAfterTrim); 36 | svgTemplates.push( 37 | `\n' 41 | ); 42 | 43 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 44 | }); 45 | 46 | fs.writeFileSync(path.join(saveDir, fileName + '.css'), getTemplate('baidu.css')); 47 | fs.writeFileSync( 48 | path.join(saveDir, fileName + '.swan'), 49 | svgTemplates.join('\n\n') 50 | ); 51 | 52 | let jsFile = getTemplate('baidu.js'); 53 | 54 | jsFile = replaceSize(jsFile, config.default_icon_size); 55 | jsFile = replaceNames(jsFile, names); 56 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 57 | 58 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 59 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('baidu.json')); 60 | 61 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 62 | }; 63 | -------------------------------------------------------------------------------- /src/libs/generateAlipayComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { XmlData } from './fetchXml'; 7 | import { Config } from './getConfig'; 8 | import { getTemplate } from './getTemplate'; 9 | import { generateCase } from "./utils" 10 | import { 11 | replaceIsRpx, 12 | replaceNames, 13 | replaceSize, 14 | } from './replace'; 15 | 16 | 17 | export const generateAlipayComponent = (data: XmlData, config: Config) => { 18 | const svgTemplates: string[] = []; 19 | const names: string[] = []; 20 | const saveDir = path.resolve(config.save_dir); 21 | const fileName = basename(config.save_dir) || 'iconfont'; 22 | 23 | mkdirp.sync(saveDir); 24 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 25 | 26 | data.svg.symbol.forEach((item) => { 27 | const iconId = item.$.id; 28 | const iconIdAfterTrim = config.trim_icon_prefix 29 | ? iconId.replace( 30 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 31 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 32 | ) 33 | : iconId; 34 | 35 | names.push(iconIdAfterTrim); 36 | svgTemplates.push( 37 | `\n' 41 | ); 42 | 43 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 44 | }); 45 | 46 | fs.writeFileSync(path.join(saveDir, fileName + '.acss'), getTemplate('alipay.acss')); 47 | fs.writeFileSync( 48 | path.join(saveDir, fileName + '.axml'), 49 | svgTemplates.join('\n\n') 50 | ); 51 | 52 | let jsFile = getTemplate('alipay.js'); 53 | 54 | jsFile = replaceSize(jsFile, config.default_icon_size); 55 | jsFile = replaceNames(jsFile, names); 56 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 57 | 58 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 59 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('alipay.json')); 60 | 61 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 62 | }; 63 | 64 | -------------------------------------------------------------------------------- /src/libs/generateToutiaoComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { XmlData } from './fetchXml'; 7 | import { Config } from './getConfig'; 8 | import { getTemplate } from './getTemplate'; 9 | import { generateCase } from "./utils" 10 | import { 11 | replaceIsRpx, 12 | replaceNames, 13 | replaceSize, 14 | } from './replace'; 15 | 16 | 17 | export const generateToutiaoComponent = (data: XmlData, config: Config) => { 18 | const svgTemplates: string[] = []; 19 | const names: string[] = []; 20 | const saveDir = path.resolve(config.save_dir); 21 | const fileName = basename(config.save_dir) || 'iconfont'; 22 | 23 | mkdirp.sync(saveDir); 24 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 25 | 26 | data.svg.symbol.forEach((item) => { 27 | const iconId = item.$.id; 28 | const iconIdAfterTrim = config.trim_icon_prefix 29 | ? iconId.replace( 30 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 31 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 32 | ) 33 | : iconId; 34 | 35 | names.push(iconIdAfterTrim); 36 | svgTemplates.push( 37 | `\n' 41 | ); 42 | 43 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 44 | }); 45 | 46 | fs.writeFileSync(path.join(saveDir, fileName + '.ttss'), getTemplate('toutiao.ttss')); 47 | fs.writeFileSync( 48 | path.join(saveDir, fileName + '.ttml'), 49 | svgTemplates.join('\n\n') 50 | ); 51 | 52 | let jsFile = getTemplate('toutiao.js'); 53 | 54 | jsFile = replaceSize(jsFile, config.default_icon_size); 55 | jsFile = replaceNames(jsFile, names); 56 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 57 | 58 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 59 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('toutiao.json')); 60 | 61 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 62 | }; 63 | -------------------------------------------------------------------------------- /src/libs/generateWechatComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path, { basename } from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { XmlData } from './fetchXml'; 7 | import { Config } from './getConfig'; 8 | import { getTemplate } from './getTemplate'; 9 | import { generateCase } from "./utils" 10 | import { 11 | replaceIsRpx, 12 | replaceNames, 13 | replaceSize, 14 | } from './replace'; 15 | // import { whitespace } from './whitespace'; 16 | 17 | 18 | export const generateWechatComponent = (data: XmlData, config: Config) => { 19 | const svgTemplates: string[] = []; 20 | const names: string[] = []; 21 | const saveDir = path.resolve(config.save_dir); 22 | const fileName = basename(config.save_dir) || 'iconfont'; 23 | 24 | mkdirp.sync(saveDir); 25 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 26 | 27 | data.svg.symbol.forEach((item) => { 28 | const iconId = item.$.id; 29 | const iconIdAfterTrim = config.trim_icon_prefix 30 | ? iconId.replace( 31 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 32 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 33 | ) 34 | : iconId; 35 | 36 | names.push(iconIdAfterTrim); 37 | svgTemplates.push( 38 | `\n' 42 | ); 43 | 44 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 45 | }); 46 | 47 | fs.writeFileSync(path.join(saveDir, fileName + '.wxss'), getTemplate('wechat.wxss')); 48 | fs.writeFileSync( 49 | path.join(saveDir, fileName + '.wxml'), 50 | svgTemplates.join('\n\n') 51 | ); 52 | 53 | let jsFile = getTemplate('wechat.js'); 54 | 55 | jsFile = replaceSize(jsFile, config.default_icon_size); 56 | jsFile = replaceNames(jsFile, names); 57 | jsFile = replaceIsRpx(jsFile, config.use_rpx); 58 | 59 | fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile); 60 | fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('wechat.json')); 61 | 62 | console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`); 63 | }; 64 | 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mini-program-iconfont-cli 2 | 3 | 把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。 4 | 5 | ![](https://github.com/fwh1990/mini-program-iconfont-cli/blob/master/images/multi-color-icon.jpg?raw=true) 6 | 7 | # 支持平台： 8 | - 微信小程序 9 | - 支付宝小程序 10 | - 百度小程序 11 | - 头条小程序（字节跳动） 12 | - 快手小程序 13 | - QQ小程序 14 | - ... 15 | 16 | # 特性 17 | 1、纯组件 18 |
19 | 2、不依赖字体文件 20 |
21 | 3、支持px和rpx两种格式 22 |
23 | 4、原样渲染多色彩图标 24 |
25 | 5、图标颜色可定制 26 | 27 | # Step 1 28 | 安装插件 29 | ```bash 30 | # Yarn 31 | yarn add mini-program-iconfont-cli --dev 32 | 33 | # Npm 34 | npm install mini-program-iconfont-cli --save-dev 35 | ``` 36 | 37 | # Step 2 38 | 生成配置文件 39 | ```bash 40 | npx iconfont-init 41 | 42 | # 可传入配置文件输出路径 43 | # npx iconfont-init --output iconfont.json 44 | ``` 45 | 46 | 此时项目根目录会生成一个`iconfont.json`的文件，内容如下： 47 | ```json 48 | { 49 | "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", 50 | "save_dir": "./iconfont", 51 | "use_rpx": false, 52 | "trim_icon_prefix": "icon", 53 | "default_icon_size": 18 54 | } 55 | ``` 56 | 57 | ### 配置参数说明： 58 | #### symbol_url 59 | 请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是`.css`后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js`。 60 | 61 | ![](https://github.com/fwh1990/mini-program-iconfont-cli/blob/master/images/symbol-url.png?raw=true) 62 | 63 | #### save_dir 64 | 根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。 65 | 66 | #### use_rpx 67 | 使用微信提供的[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为false，即使用`px`。 68 | 69 | #### trim_icon_prefix 70 | 如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过配置这个选项把前缀统一去掉。 71 | 72 | #### default_icon_size 73 | 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。 74 | 75 | # Step 3 76 | 生成小程序标准组件 77 | ```bash 78 | # 可传入配置文件路径 79 | # npx iconfont-XXXXX --config iconfont.json 80 | 81 | # 微信小程序 82 | npx iconfont-wechat 83 | 84 | # 支付宝小程序 85 | npx iconfont-alipay 86 | 87 | # 百度小程序 88 | npx iconfont-baidu 89 | 90 | # 头条小程序 91 | npx iconfont-toutiao 92 | 93 | # 快手小程序 94 | npx iconfont-kuaishou 95 | 96 | # QQ小程序 97 | npx iconfont-qq 98 | ``` 99 | 生成后查看您设置的保存目录中是否含有所有的图标 100 | 101 | ------- 102 | 103 | 在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/mini-program-iconfont-cli/tree/master/snapshots)自动生成的快照文件。 104 | 105 | # Step 4 106 | #### 微信小程序 | QQ小程序 107 | 在根目录的`app.json`文件中引入全局图标组件，避免每个page都引入（麻烦）。 108 | ```json5 109 | // 绝对路径 110 | { 111 | "usingComponents": { 112 | "iconfont": "/iconfont/iconfont" 113 | } 114 | } 115 | ``` 116 | 117 | #### 支付宝小程序 | 百度小程序 | 头条小程序 ｜ 快手小程序 118 | 不支持全局引入，您需要在各自page的`.json`文件中引入。 119 | ```json5 120 | // 绝对路径 121 | { 122 | "usingComponents": { 123 | "iconfont": "/iconfont/iconfont" 124 | } 125 | } 126 | ``` 127 | 128 | # 使用 129 | 在page中使用图标。 130 | ```jsx harmony 131 | // 原色彩 132 | 133 | 134 | // 单色：红色 135 | 136 | 137 | // 多色：红色+橘色 138 | 139 | 140 | // 不同格式的颜色写法 141 | 142 | 143 | // 与文字对齐 144 | 145 | Hello 146 | 147 | 148 | ``` 149 | 150 | # 更新图标 151 | 当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件。 152 | ```bash 153 | # 修改 symbol_url 配置后执行： 154 | 155 | # 微信小程序 156 | npx iconfont-wechat 157 | 158 | # 支付宝小程序 159 | npx iconfont-alipay 160 | 161 | # 百度小程序 162 | npx iconfont-baidu 163 | 164 | # 头条小程序 165 | npx iconfont-toutiao 166 | 167 | # 快手小程序 168 | npx iconfont-kuaishou 169 | 170 | # QQ小程序 171 | npx iconfont-qq 172 | ``` 173 | 174 | -------- 175 | 176 | 欢迎使用，并给我一些反馈和建议，让这个库做的更好。 177 | -------------------------------------------------------------------------------- /snapshots/qq/qq.qml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /snapshots/baidu/baidu.swan: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /snapshots/alipay/alipay.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /snapshots/kuaishou/kuaishou.ksml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /snapshots/wechat/wechat.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /snapshots/toutiao/toutiao.ttml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@types/events@*": 6 | version "3.0.0" 7 | resolved "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" 8 | integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== 9 | 10 | "@types/fs-extra@^8.0.0": 11 | version "8.0.0" 12 | resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.0.0.tgz#d3e2c313ca29f95059f198dd60d1f774642d4b25" 13 | integrity sha512-bCtL5v9zdbQW86yexOlXWTEGvLNqWxMFyi7gQA7Gcthbezr2cPSOb8SkESVKA937QD5cIwOFLDFt0MQoXOEr9Q== 14 | dependencies: 15 | "@types/node" "*" 16 | 17 | "@types/glob@^7.1.1": 18 | version "7.1.1" 19 | resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575" 20 | integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w== 21 | dependencies: 22 | "@types/events" "*" 23 | "@types/minimatch" "*" 24 | "@types/node" "*" 25 | 26 | "@types/minimatch@*": 27 | version "3.0.3" 28 | resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" 29 | integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA== 30 | 31 | "@types/minimist@^1.2.0": 32 | version "1.2.0" 33 | resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6" 34 | integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY= 35 | 36 | "@types/mkdirp@^0.5.2": 37 | version "0.5.2" 38 | resolved "https://registry.npmjs.org/@types/mkdirp/-/mkdirp-0.5.2.tgz#503aacfe5cc2703d5484326b1b27efa67a339c1f" 39 | integrity sha512-U5icWpv7YnZYGsN4/cmh3WD2onMY0aJIiTE6+51TwJCttdHvtCYmkBNOobHlXwrJRL0nkH9jH4kD+1FAdMN4Tg== 40 | dependencies: 41 | "@types/node" "*" 42 | 43 | "@types/node@*", "@types/node@^12.7.2": 44 | version "12.7.2" 45 | resolved "https://registry.npmjs.org/@types/node/-/node-12.7.2.tgz#c4e63af5e8823ce9cc3f0b34f7b998c2171f0c44" 46 | integrity sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg== 47 | 48 | "@types/xml2js@^0.4.4": 49 | version "0.4.4" 50 | resolved "https://registry.npmjs.org/@types/xml2js/-/xml2js-0.4.4.tgz#2093d94359a201806d997dccefc80153db311c66" 51 | integrity sha512-O6Xgai01b9PB3IGA0lRIp1Ex3JBcxGDhdO0n3NIIpCyDOAjxcIGQFmkvgJpP8anTrthxOUQjBfLdRRi0Zn/TXA== 52 | dependencies: 53 | "@types/node" "*" 54 | 55 | arg@^4.1.0: 56 | version "4.1.1" 57 | resolved "https://registry.npmjs.org/arg/-/arg-4.1.1.tgz#485f8e7c390ce4c5f78257dbea80d4be11feda4c" 58 | integrity sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw== 59 | 60 | axios@^0.19.0: 61 | version "0.19.0" 62 | resolved "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8" 63 | integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ== 64 | dependencies: 65 | follow-redirects "1.5.10" 66 | is-buffer "^2.0.2" 67 | 68 | balanced-match@^1.0.0: 69 | version "1.0.0" 70 | resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" 71 | integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= 72 | 73 | brace-expansion@^1.1.7: 74 | version "1.1.11" 75 | resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" 76 | integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== 77 | dependencies: 78 | balanced-match "^1.0.0" 79 | concat-map "0.0.1" 80 | 81 | buffer-from@^1.0.0: 82 | version "1.1.1" 83 | resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" 84 | integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== 85 | 86 | colors@^1.3.3: 87 | version "1.3.3" 88 | resolved "https://registry.npmjs.org/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d" 89 | integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg== 90 | 91 | concat-map@0.0.1: 92 | version "0.0.1" 93 | resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" 94 | integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= 95 | 96 | debug@=3.1.0: 97 | version "3.1.0" 98 | resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" 99 | integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== 100 | dependencies: 101 | ms "2.0.0" 102 | 103 | diff@^4.0.1: 104 | version "4.0.1" 105 | resolved "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff" 106 | integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q== 107 | 108 | follow-redirects@1.5.10: 109 | version "1.5.10" 110 | resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" 111 | integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== 112 | dependencies: 113 | debug "=3.1.0" 114 | 115 | fs-extra@^8.1.0: 116 | version "8.1.0" 117 | resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" 118 | integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== 119 | dependencies: 120 | graceful-fs "^4.2.0" 121 | jsonfile "^4.0.0" 122 | universalify "^0.1.0" 123 | 124 | fs.realpath@^1.0.0: 125 | version "1.0.0" 126 | resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" 127 | integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= 128 | 129 | glob@^7.1.4: 130 | version "7.1.4" 131 | resolved "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" 132 | integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== 133 | dependencies: 134 | fs.realpath "^1.0.0" 135 | inflight "^1.0.4" 136 | inherits "2" 137 | minimatch "^3.0.4" 138 | once "^1.3.0" 139 | path-is-absolute "^1.0.0" 140 | 141 | graceful-fs@^4.1.6, graceful-fs@^4.2.0: 142 | version "4.2.2" 143 | resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02" 144 | integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q== 145 | 146 | inflight@^1.0.4: 147 | version "1.0.6" 148 | resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" 149 | integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= 150 | dependencies: 151 | once "^1.3.0" 152 | wrappy "1" 153 | 154 | inherits@2: 155 | version "2.0.4" 156 | resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" 157 | integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== 158 | 159 | is-buffer@^2.0.2: 160 | version "2.0.3" 161 | resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725" 162 | integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw== 163 | 164 | jsonfile@^4.0.0: 165 | version "4.0.0" 166 | resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" 167 | integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= 168 | optionalDependencies: 169 | graceful-fs "^4.1.6" 170 | 171 | make-error@^1.1.1: 172 | version "1.3.5" 173 | resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8" 174 | integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g== 175 | 176 | minimatch@^3.0.4: 177 | version "3.0.4" 178 | resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" 179 | integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== 180 | dependencies: 181 | brace-expansion "^1.1.7" 182 | 183 | minimist@0.0.8: 184 | version "0.0.8" 185 | resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" 186 | integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= 187 | 188 | minimist@^1.2.5: 189 | version "1.2.5" 190 | resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" 191 | integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== 192 | 193 | mkdirp@^0.5.1: 194 | version "0.5.1" 195 | resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" 196 | integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM= 197 | dependencies: 198 | minimist "0.0.8" 199 | 200 | ms@2.0.0: 201 | version "2.0.0" 202 | resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" 203 | integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= 204 | 205 | once@^1.3.0: 206 | version "1.4.0" 207 | resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" 208 | integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= 209 | dependencies: 210 | wrappy "1" 211 | 212 | path-is-absolute@^1.0.0: 213 | version "1.0.1" 214 | resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" 215 | integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= 216 | 217 | sax@>=0.6.0: 218 | version "1.2.4" 219 | resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" 220 | integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== 221 | 222 | source-map-support@^0.5.17: 223 | version "0.5.18" 224 | resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.18.tgz#f5f33489e270bd7f7d7e7b8debf283f3a4066960" 225 | integrity sha512-9luZr/BZ2QeU6tO2uG8N2aZpVSli4TSAOAqFOyTO51AJcD9P99c0K1h6dD6r6qo5dyT44BR5exweOaLLeldTkQ== 226 | dependencies: 227 | buffer-from "^1.0.0" 228 | source-map "^0.6.0" 229 | 230 | source-map@^0.6.0: 231 | version "0.6.1" 232 | resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" 233 | integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== 234 | 235 | ts-node@^8.9.0: 236 | version "8.9.0" 237 | resolved "https://registry.npmjs.org/ts-node/-/ts-node-8.9.0.tgz#d7bf7272dcbecd3a2aa18bd0b96c7d2f270c15d4" 238 | integrity sha512-rwkXfOs9zmoHrV8xE++dmNd6ZIS+nmHHCxcV53ekGJrxFLMbp+pizpPS07ARvhwneCIECPppOwbZHvw9sQtU4w== 239 | dependencies: 240 | arg "^4.1.0" 241 | diff "^4.0.1" 242 | make-error "^1.1.1" 243 | source-map-support "^0.5.17" 244 | yn "3.1.1" 245 | 246 | tslib@^1.10.0: 247 | version "1.10.0" 248 | resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" 249 | integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== 250 | 251 | typescript@^3.8.3: 252 | version "3.8.3" 253 | resolved "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061" 254 | integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w== 255 | 256 | universalify@^0.1.0: 257 | version "0.1.2" 258 | resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" 259 | integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== 260 | 261 | wrappy@1: 262 | version "1.0.2" 263 | resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" 264 | integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= 265 | 266 | xml2js@^0.4.19: 267 | version "0.4.19" 268 | resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7" 269 | integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q== 270 | dependencies: 271 | sax ">=0.6.0" 272 | xmlbuilder "~9.0.1" 273 | 274 | xmlbuilder@~9.0.1: 275 | version "9.0.7" 276 | resolved "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d" 277 | integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0= 278 | 279 | yn@3.1.1: 280 | version "3.1.1" 281 | resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" 282 | integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q== 283 | --------------------------------------------------------------------------------