iconfont-cli / mini-program-iconfont-cli Goto Github PK

微信推出的kbone框架支持吗？如果不支持，之后会考虑支持吗？

目前配置了，好像没效果。

我用mpvue开发，按照你的步骤弄了，微信端可以正常使用，但是支付宝端却无法显示

执行 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 即可

生成的组件里是否可以把下载至本地文件里的iconfont.json文件

强烈建议在mini-program-iconfont-cli\templates\wechat.json.template文件中加入一行：
"styleIsolation": "apply-shared"

这样才能在外部通过css修改icon的样式，例如给icon添加阴影等。

因快手小程序没有测试版的appid，注册也只能企业注册，所以请在使用当前插件的小伙伴帮忙测试一下。

1.目前是把需要的iconfont集中放在一个文件中
2.需求是不同页面需要大量的iconfont，如果集中到一个文件中不方便使用和管理，容易混乱
3.能否各自管理自己页面的iconfont

不知道有办法支持设置图标渐变色，目前SVG设置渐变色好像只有<linearGradient>标签方式，这个比较难搞。

如题

实测不影响使用，图标还是可以正常显示，但是会报几个问题，如果能修复那就更棒了
大佬有空看一下呗
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" />

不考虑支持下h5吗，原理差不多吧?
补充下，我说的是vue组件，刚看到有生成react组件的库

真的太好用了，没想到还可以这样，解决了小程序不能用svg的问题！ 有个提议，可不可以传某个值把所有图标都显示出来，需求是都显示出来，点某个获取到icon值

如题，Taro可以做多端应用，使用您的cli的时候，调用组件时不是很方便，不能多端使用，如果能够有生成Taro的cli，我感觉会很赞。

建议支持color传入var变量

能力有限，不知如何编译源码，由于实际需求，图标宽度、高度需要在外层样式控制的较多，键入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;
}

//at.alicdn.com/t/font_2209619_rcawpyz7t.js 这是我的

iconhongbao

并没有展示

也每次都出现生成的

随着项目的需要的icon越来越多，现在已经太大了。如何能压缩一下

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)']}}"，就可以正常显示。

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