小程序：LinUI组件库2

地址：https://doc.mini.talelin.com/

使用LinUI的Icon组件代替图片ICON

配置图标

{
  "usingComponents": {
    "l-icon" : "/miniprogram_npm/lin-ui/icon/index"    
  }
}

引用图标

    <l-icon name="cart" size="128" color="#34BFA3" />

设置Icon组件的大小和颜色

初始版

        <view class="post-like">
            <!-- <image  class="post-like-image" src=" /images/icon/chat.png"></image> -->
            <l-icon name="favor" size="32" color="#666" />
            <text class="post-like-font">02</text> 
            <l-icon name="eye" size="32" color="#666" />
            <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
            <text class="post-like-font">100</text> 
        </view>

改进版

WXML:

<view class="post-like">
            <!-- <image  class="post-like-image" src=" /images/icon/chat.png"></image> -->
            <l-icon name="favor" size="32" color="#666" class="post-like-image" />
            <text class="post-like-font">02</text> 
            <l-icon name="eye" size="32" color="#666" class="post-like-image" />
            <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
            <text class="post-like-font">100</text> 
        
    </view>

WXSS:

  .post-like-image{
    /* height : 32rpx;
    width: 32rpx; */
    margin-right : 16rpx;
  }

全局设置Icon组件

为了在全局中自由使用Icon组件，

可以在app.json中定义Icon组件，如下所示：

{
  "pages": [
    "pages/posts/posts",
    "pages/welcome/welcome",
    "pages/index/index",
    "pages/logs/logs",
    "pages/today/today",
    "pages/test/test"
  ],
  "entryPagePath": "pages/test/test",
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "l-icon" : "/miniprogram_npm/lin-ui/icon/index"    
  }
}

效果图