iconfont-cli / mini-program-iconfont-cli Goto Github PK
View Code? Open in Web Editor NEW把iconfont图标批量转换成多个平台小程序的标准组件。支持多色彩,支持自定义颜色
License: MIT License
把iconfont图标批量转换成多个平台小程序的标准组件。支持多色彩,支持自定义颜色
License: MIT License
1.目前是把需要的iconfont集中放在一个文件中
2.需求是不同页面需要大量的iconfont,如果集中到一个文件中不方便使用和管理,容易混乱
3.能否各自管理自己页面的iconfont
执行 npx iconfont-init
,报错如下:
mini-program-iconfont/node_modules/.bin/iconfont-init: line 1: use strict: command not found
mini-program-iconfont/node_modules/.bin/iconfont-init: line 2: syntax error near unexpected token `exports,'
mini-program-iconfont/node_modules/.bin/iconfont-init: line 2: `Object.defineProperty(exports, "__esModule", { value: true });'
原因:
.node_modules/bin/
下的 node 脚本没有在文件开始写Shebang
命令行,所以会被误为shell
脚本执行而导致错误
解决:在文件头加上 #!/usr/bin/env node
即可
随着项目的需要的icon越来越多,现在已经太大了。如何能压缩一下
{
"use_rpx": true
}
// iconfont.wxml
width='{{svgSize}}px' height='{{svgSize}}px'
建议支持color传入var变量
PS D:\gxjzFolder\painterDemo\painter> npx iconfont-init
npx: 1 安装成功,用时 5.933 秒
'prefix' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
D:\gxjzFolder\painterDemo\painter\node_modules\mini-program-iconfont-cli\commands\createJson.js:13
fs_1.default.copyFileSync(path_1.default.join(__dirname, '../libs/iconfont.json'), targetFile);
^
TypeError: fs_1.default.copyFileSync is not a function
at Object. (D:\gxjzFolder\painterDemo\painter\node_modules\mini-program-iconfont-cli\commands\createJson.js:13:18)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:598:3
node版本 V8.4.0
设置color="{{['#333', ''#999'']}}"图片不显示,
设置为color="{{['rgb(255,183,85)', 'rgb(103,255,97)']}}",就可以正常显示。
实测不影响使用,图标还是可以正常显示,但是会报几个问题,如果能修复那就更棒了
大佬有空看一下呗
at-rule or selector expectedcss(css-ruleorselectorexpected)
wxml文件内容是这样的
<!--down-square-->
<view wx:if="{{name === 'down-square'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M505.5 658.7c3.2 4.4 9.7 4.4 12.9 0l178-246c3.8-5.3 0-12.7-6.5-12.7H643c-10.2 0-19.9 4.9-25.9 13.2L512 558.6 406.8 413.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246z' fill='{{(isStr ? colors : colors[0]) || 'rgb(51,51,51)'}}' /%3E%3Cpath d='M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z' fill='{{(isStr ? colors : colors[1]) || 'rgb(51,51,51)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--up-square-->
<view wx:if="{{name === 'up-square'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M334 624h46.9c10.2 0 19.9-4.9 25.9-13.2L512 465.4l105.2 145.4c6 8.3 15.6 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.5-12.7l-178-246c-3.2-4.4-9.7-4.4-12.9 0l-178 246c-3.9 5.3-0.1 12.7 6.4 12.7z' fill='{{(isStr ? colors : colors[0]) || 'rgb(51,51,51)'}}' /%3E%3Cpath d='M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z' fill='{{(isStr ? colors : colors[1]) || 'rgb(51,51,51)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
如题,Taro可以做多端应用,使用您的cli的时候,调用组件时不是很方便,不能多端使用,如果能够有生成Taro的cli,我感觉会很赞。
因快手小程序没有测试版的appid,注册也只能企业注册,所以请在使用当前插件的小伙伴帮忙测试一下。
目前配置了,好像没效果。
能力有限,不知如何编译源码,由于实际需求,图标宽度、高度需要在外层样式控制的较多,键入size属性可能较麻烦后期调整。
--- css模板修改(微信小程序):
.icon {
background-repeat: no-repeat;
width: var(--width, #size#px);
height: var(--height, #size#px);
background-size: 100%;
}
--- 编译处理size(微信小程序示例)
var wxssFile = getTemplate_1.getTemplate('wechat.wxss');
wxssFile = replace_1.replaceSize(wxssFile, config.default_icon_size);
fs_1.default.writeFileSync(path_1.default.join(saveDir, fileName + '.wxss'), wxssFile);
外层控制 iconfont ,(这里需要用户使用时自行处理):
iconfont{
--width: 11pt;
--height: 11pt;
}
真的太好用了,没想到还可以这样,解决了小程序不能用svg的问题! 有个提议,可不可以传某个值把所有图标都显示出来,需求是都显示出来,点某个获取到icon值
我用mpvue开发,按照你的步骤弄了,微信端可以正常使用,但是支付宝端却无法显示
微信推出的kbone框架支持吗?如果不支持,之后会考虑支持吗?
不知道有办法支持设置图标渐变色,目前SVG设置渐变色好像只有<linearGradient>
标签方式,这个比较难搞。
不考虑支持下h5吗,原理差不多吧?
补充下,我说的是vue组件,刚看到有生成react组件的库
如题
强烈建议在mini-program-iconfont-cli\templates\wechat.json.template文件中加入一行:
"styleIsolation": "apply-shared"
这样才能在外部通过css修改icon的样式,例如给icon添加阴影等。
//at.alicdn.com/t/font_2209619_rcawpyz7t.js 这是我的
iconhongbao
并没有展示
也每次都出现生成的
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/iconfont-wechat - Not found
npm ERR! 404
npm ERR! 404 'iconfont-wechat@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/****/.npm/_logs/2022-01-19T02_39_20_041Z-debug.log
安装 [ 'iconfont-wechat@latest' ] 失败,错误代码:1
生成的组件里是否可以把下载至本地文件里的iconfont.json文件
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.