查看“小程序：LinUI组件库2”的源代码

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

==使用LinUI的Icon组件代替图片ICON==
===配置图标===
 <nowiki>
{
  "usingComponents": {
    "l-icon" : "/miniprogram_npm/lin-ui/icon/index"    
  }
}
</nowiki>

===引用图标===
     <nowiki><l-icon name="cart" size="128" color="#34BFA3" /></nowiki>

==设置Icon组件的大小和颜色==

===初始版===
 <nowiki>
        <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></nowiki>

===改进版===
WXML:

 <nowiki>
<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></nowiki>

WXSS:

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

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

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

 <nowiki>
{
  "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"    
  }
}</nowiki>

==效果图==
[[文件:wexin21043001.png|400px]]