Icon 图标

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-icon": "wuss-weapp/w-icon/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Icon" desc="图标" />
  2. <w-pane desc="Default" />
  3. <scroll-view class="wuss-icon-example" scroll-y="true" >
  4. <view
  5. class="wuss-icon-items"
  6. hover-class="none"
  7. hover-stop-propagation="false"
  8. catchtap="copyIconName"
  9. data-name="{{ item.name }}"
  10. wx:for="{{ iconData }}"
  11. wx:key="index"
  12. >
  13. <w-icon
  14. type="{{ item.name }}"
  15. />
  16. <text class="wuss-icon-text" >{{ item.text }}</text>
  17. </view>
  18. </scroll-view>
  1. data: {
  2. iconData: [
  3. { text: 'checked', name: 'checked' },
  4. { text: 'close', name: 'close' },
  5. { text: 'location', name: 'location' },
  6. { text: 'location-o', name: 'location-o' },
  7. { text: 'success', name: 'success' },
  8. { text: 'success-o', name: 'success-o' },
  9. { text: 'arrow-down', name: 'arrow-down' },
  10. { text: 'camera', name: 'camera' },
  11. { text: 'camera-o', name: 'camera-o' },
  12. { text: 'comment', name: 'comment' },
  13. { text: 'comment-o', name: 'comment-o' },
  14. { text: 'voice', name: 'voice' },
  15. { text: 'voice-o', name: 'voice-o' },
  16. { text: 'order', name: 'order' },
  17. { text: 'question', name: 'question' },
  18. { text: 'question-o', name: 'question-o' },
  19. { text: 'filter', name: 'filter' },
  20. { text: 'top', name: 'top' },
  21. { text: 'add', name: 'add' },
  22. { text: 'arrow-top', name: 'arrow-top' },
  23. { text: 'info', name: 'info' },
  24. { text: 'info2-o', name: 'info2-o' },
  25. { text: 'forward', name: 'forward' },
  26. { text: 'forward-o', name: 'forward-o' },
  27. { text: 'record-o', name: 'record-o' },
  28. { text: 'record', name: 'record' },
  29. { text: 'wifi', name: 'wifi' },
  30. { text: 'share', name: 'share' },
  31. { text: 'wechat-zone', name: 'wechat-zone' },
  32. { text: 'wechat', name: 'wechat' },
  33. { text: 'female', name: 'female' },
  34. { text: 'male', name: 'male' },
  35. { text: 'system-o', name: 'system-o' },
  36. { text: 'cart', name: 'cart' },
  37. { text: 'delete', name: 'delete' },
  38. { text: 'edit', name: 'edit' },
  39. { text: 'form', name: 'form' },
  40. { text: 'pic', name: 'pic' },
  41. { text: 'refresh', name: 'refresh' },
  42. { text: 'search', name: 'search' },
  43. { text: 'repeal', name: 'repeal' },
  44. { text: 'calendar', name: 'calendar' },
  45. { text: 'user', name: 'user' },
  46. { text: 'user-o', name: 'user-o' },
  47. { text: 'scanning', name: 'scanning' },
  48. { text: 'pin', name: 'pin' },
  49. { text: 'weibo', name: 'weibo' },
  50. { text: 'bell', name: 'bell' },
  51. { text: 'twitter', name: 'twitter' },
  52. { text: 'bar-chart', name: 'bar-chart' },
  53. { text: 'signal', name: 'signal' },
  54. { text: 'good2-o', name: 'good2-o' },
  55. { text: 'android', name: 'android' },
  56. { text: 'apple', name: 'apple' },
  57. { text: 'phone-o', name: 'phone-o' },
  58. { text: 'like-o', name: 'like-o' },
  59. { text: 'star-o', name: 'star-o' },
  60. { text: 'menu', name: 'menu' },
  61. { text: 'star', name: 'star' },
  62. { text: 'home', name: 'home' },
  63. { text: 'home-o', name: 'home-o' },
  64. { text: 'like', name: 'like' },
  65. { text: 'chart', name: 'chart' },
  66. { text: 'facebook', name: 'facebook' },
  67. { text: 'attention-forbid-o', name: 'attention-forbid-o' },
  68. { text: 'attention-forbid', name: 'attention-forbid' },
  69. { text: 'bluetooth2', name: 'bluetooth2' },
  70. { text: 'bell-o', name: 'bell-o' },
  71. { text: 'address-card', name: 'address-card' },
  72. { text: 'bluetooth1', name: 'bluetooth1' },
  73. { text: 'google', name: 'google' },
  74. { text: 'bar-code', name: 'bar-code' },
  75. { text: 'popular', name: 'popular' },
  76. { text: 'more-dot', name: 'more-dot' },
  77. { text: 'down', name: 'down' },
  78. { text: 'address-card-o', name: 'address-card-o' },
  79. { text: 'battery', name: 'battery' },
  80. { text: 'good2', name: 'good2' },
  81. { text: 'mobile', name: 'mobile' },
  82. { text: 'add-user', name: 'add-user' },
  83. { text: 'delete-team', name: 'delete-team' },
  84. { text: 'api', name: 'api' },
  85. { text: 'disconnect', name: 'disconnect' },
  86. { text: 'shrink', name: 'shrink' },
  87. { text: 'fullscreen', name: 'fullscreen' },
  88. { text: 'doubleleft', name: 'doubleleft' },
  89. { text: 'double-arrow-right', name: 'double-arrow-right' },
  90. { text: 'stop', name: 'stop' },
  91. { text: 'github', name: 'github' },
  92. { text: 'decrement', name: 'decrement' },
  93. { text: 'added', name: 'added' },
  94. { text: 'arrow-left', name: 'arrow-left' },
  95. { text: 'arrow-right', name: 'arrow-right' },
  96. { text: 'arrow-left-l', name: 'arrow-left-l' },
  97. { text: 'arrow-right-l', name: 'arrow-right-l' },
  98. { text: 'zoomout', name: 'zoomout' },
  99. { text: 'zoomin', name: 'zoomin' },
  100. { text: 'position', name: 'position' },
  101. { text: 'checkbox', name: 'checkbox' },
  102. { text: 'checkbox-o', name: 'checkbox-o' },
  103. ],
  104. },
  105. copyIconName(e) {
  106. const { name } = e.currentTarget.dataset;
  107. wx.setClipboardData({
  108. data: String(name),
  109. });
  110. },
  1. page {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. .wuss-icon-example {
  6. width: 100%;
  7. height: 80%;
  8. }
  9. .wuss-icon-example {
  10. display: flex;
  11. flex-direction: row;
  12. flex-wrap: wrap;
  13. align-items: center;
  14. }
  15. .wuss-icon-items {
  16. display: inline-flex;
  17. width: 33.33%;
  18. padding: 20px 0;
  19. justify-content: center;
  20. align-items: center;
  21. flex-direction: column;
  22. font-size: 50rpx;
  23. flex-wrap: wrap;
  24. }
  25. .wuss-icon-text {
  26. margin-top: 10px;
  27. font-size: 14px;
  28. color: #999999;
  29. }

API

Attribute 属性

属性说明类型默认值
type图标类型string-
size图标大小number-
color图标颜色string-

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类