建议：支持外层控制兼容（小程序示例） about mini-program-iconfont-cli

[fwh1990]

你的意思是不输入size而是通过样式 就能处理icon的尺寸？size应是必须的，因为模板里size传给svg了，不是用来生成样式。

实际需求，图标宽度、高度需要在外层样式控制的较多

这个是怎么理解？能否截个图之类的说明一下？

[lulanyin]

我先说改造的过程吧（微信小程序为例）：

一、 把生成的图标代码样式里边的高和宽去掉

//也就是 libs/grenerateWechatComponent.js 里边
width: {{svgSize}}px; height: {{svgSize}}px; 
//去掉后，生成的代码，图标的代码view的style里不会有width, height。

二、在样式模板里，添加可外层控制的样式，最终改造为：

.icon {
  background-repeat: no-repeat;
  width: var(--iconfont-width, #size#px);
  height: var(--iconfont-height, #size#px);
  background-size: 100% auto;//这里看需要吧， 我的项目图标使用的都是正方式的多，如果有特殊的宽高比例，可能需要调整。
}

三、 为了能够编译样式模板里的#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);

--------- 以上改造完成， 可以 npx iconfont-wechat 了。

四、 应用（小程序为例）：

定义默认图标大小：
page{
  --iconfont-width: 36rpx;
  --iconfont-height: 36rpx;
}

也可以在特别的地方用样式定义图标的宽高：

//LESS
.middle-text-with-icon{
  display: flex;
  flex-flow: row;
  font-size: 28rpx;
  .icon, .text{
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
  .icon{
    margin-right: 15rpx;
    //重定义图标大小
    --iconfont-width: 28rpx;
    --iconfont-height: 28rpx;
  }
}

WXML代码：

<view class="middle-text-with-icon">
    <view class="icon">
      <iconfont name="iconName"></iconfont>
    </view>
    <view class="text">与图标大小一致的文字</view>
</view>

----------- 结束！！！

[lulanyin]

对了，svg里边的width和height不用去掉，对应：

var template = "<svg viewBox='" + data.$.viewBox + "' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'>";

上方代码中的width，和height无需去掉。