Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

建议:支持外层控制兼容(小程序示例) #13

Open
lulanyin opened this issue Jun 11, 2020 · 3 comments
Open

建议:支持外层控制兼容(小程序示例) #13

lulanyin opened this issue Jun 11, 2020 · 3 comments
Labels
enhancement New feature or request

Comments

@lulanyin
Copy link

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

@fwh1990 fwh1990 added the enhancement New feature or request label Jun 11, 2020
@fwh1990
Copy link
Member

fwh1990 commented Jun 15, 2020

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

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

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

@lulanyin
Copy link
Author

我先说改造的过程吧(微信小程序为例):

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

//也就是 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
Copy link
Author

对了,svg里边的width和height不用去掉,对应:

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants