小程序封装自定义图标组件

自定义一个icon图标组件 好用 好管理 

组件 wxml 呆🐎

<!--组件/icon/icon.wxml-->
<view style='height:{
  {size}}px;width:{
  {size}}px'>
  <block wx:for='{
  {icon}}' wx:key='index' wx:if='{
  {type==item.type}}'>
    <image src='{
  {item.img}}' />
  </block>
</view>

组件 wxss 呆🐎

/* 组件/icon/icon.wxss */
image {
  height: 100%;
  width: 100%;
}

组件 js 呆🐎

// 组件/icon/icon.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //图标大小
    size: {
      type: Number,
      value: 30
    },
    //图标名称
    type: {
      type: String,
      value: '右箭头',
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    icon: [{
      type: '右箭头',
      img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxG