图标 Icon

语义化的矢量图形

图标库

1

更多图标请移步示例小程序中查看

图标类型

通过在<l-icon/>上设置图标组件的name属性,来指定要使用的图标。

TIP

提示:name属性为必填。

示例代码

  1. <l-icon name="add"/>

默认

图标样式

您还可以通过colorsize属性分别设置不同颜色和大小的图标,以适用于不同的场景。

示例代码

  • 修改图标颜色
  1. <l-icon name="setting" color="#34BFA3"/>
  2. <l-icon name="setting" color="#F4516C"/>
  3. <l-icon name="setting" color="#FFE57F"/>

修改图标颜色

  • 修改图标大小(单位:rpx)
  1. <l-icon name="user" size="30"/>
  2. <l-icon name="user" size="40"/>
  3. <l-icon name="user" size="50"/>

修改图标大小

自定义图标

通过外部样式类的方式来实现自定义图标:

1 将从iconfont下载的 css 代码放进 wxss 中;通过@font-face定义字体, font-family必须为:iconfont

2 设置带有content属性的 class 名为 l-icon-name:before的格式,(name是用来设置icon组件的name属性的,),如:.l-icon-duihao:before

3 在wxml中设置l-class属性为iconfontname为在步骤2中设置的name,以步骤2为例,在wxml中的name需要设置为duihao

4 如果在项目中遇到自定义iconfont与lin-ui内置iconfont相冲突问题,请看这里

示例代码

  1. @font-face {
  2. font-family: "iconfont";
  3. src: url('iconfont.eot?t=1569576441125');
  4. /* IE9 */
  5. src: url('iconfont.eot?t=1569576441125#iefix') format('embedded-opentype'),
  6. /* IE6-IE8 */
  7. url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABmQAAAJ2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQ0BNgIkAwgLBgAEIAWEbQczG7YFEdWLabK/IpJj9xskBUKoNvS0NL2fGoOTvFXum2pguSRiYn8/GG5DaXACAAAAAMTDf/ul9/2Zv5kQKkCVrAwqghIpRFWhgFWrXGVlhOrxLIGE3s4HAJLZEzyAsxqH7ZCZ1Y6uPUw0KtBmEvkAkyShINPA8ugzLM226lvgQfR1phk9NgnO77V0DrTvr8ffawGQQyYJVm4WHaNOmNAk48F/85Q9Sr/sNwUOp12gQO6Acrnn8rkUB5YGdM6xKLICCb1h7IIXeJ9Ah3FNsd2xc4rMXhaIh+5cUwoBWWbpIjQa9mbxjmqleoPzNvp+/F0UKnViV526vXPT+g/rZPHj38WAQEECOlwjoYlMnGtMnJAEoyUdiWyaY5UHP/ytwCSOqhfsr7NLu8AoFDyT0BM9amkFcjI8jtVJZ1J1DfRL54S9/b01Hi5CWczxymP7LhTcwuEGfTAbP82iFb0ao/lSICNCT4BZdNCSGv+03/hQPnmRGXx60YKWTAnKrp3BLxIO7MiG2DZWWRM2uirjk5ZW6NCBVtgz4PtUzfD9ZEIxfFeuNmMZkmKWmKlN1DotoKFYQ4d5e4c7DXokidyOOS8AQp/3qPQ4RNLnIzFTv6E24j8a+iKhw4XgzE7UwTM0RC/tX6bu2NU108flNwzvtbG8OKK/YHEKS55k5XSNHbbEhvgZClJF7dikAo9hXQ857ZjRMRnJs0xTbXpT0h2b8xgaohftX0zdsWswmL7y+RuG99pYR02d8wWL0+gil8gGEGvFPqjmUV6Jn6FAqlA7NlGBWVjXQ5zNs2Z0TIwTYmcpdXrpUEWyvWr7gXzWgK0Vjj3pyfMDEekcAAAA') format('woff2'),
  8. url('iconfont.woff?t=1569576441125') format('woff'),
  9. url('iconfont.ttf?t=1569576441125') format('truetype'),
  10. /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  11. url('iconfont.svg?t=1569576441125#iconfont') format('svg');
  12. /* iOS 4.1- */
  13. }
  14. .iconfont {
  15. font-family: "iconfont" !important;
  16. font-size: 16px;
  17. font-style: normal;
  18. }
  19. .l-icon-duihao:before {
  20. content: "\e63c";
  21. }
  1. <!-- 下面的示例代码,虽然两个icon的name都为duihao
  2. 但是由于第二个设置了l-class属性,所以显示为不同的icon
  3. 只是做个示例,不要纠结name和图标相对应的问题 -->
  4. <!-- lin-ui组件的duihao icon -->
  5. <l-icon name='duihao' />
  6. <!-- 自己从iconfont下载的duihao icon -->
  7. <l-icon name='duihao' l-class='iconfont' />

图标属性(Icon Attributes)

参数说明类型可选值默认值
name图标的名称,必填String--
color图标的颜色String-默认为主题色
size图标的大小(单位:rpx)Number-40rpx

图标外部样式类 (Icon ExternalClasses)

外部样式类名说明备注
l-class覆盖图标的外部样式类—-