combination/miniprogram/packageExtend/pages/base/icons/icons.js

import CustomPage from '../../../base/CustomPage'

const colorLight = 'rgba(0, 0, 0, .9)'
const colorDark = 'rgba(255, 255, 255, .8)'

CustomPage({
  onShareAppMessage() {
    return {
      title: 'icons',
      path: 'page/weui/example/icons/icons'
    }
  },
  data: {
    iconList: [
      {
        icon: 'add-friends',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'add',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'add2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'album',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'arrow',
        color: colorLight,
        size: 12,
        name: ''
      },
      {
        icon: 'at',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'back',
        color: colorLight,
        size: 12,
        name: ''
      },
      {
        icon: 'back2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'bellring-off',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'bellring-on',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'camera',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'cellphone',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'clip',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'close',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'close2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'comment',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'contacts',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'copy',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'delete-on',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'delete',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'discover',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'display',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'done',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'done2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'download',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'email',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'error',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'eyes-off',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'eyes-on',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'folder',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'group-detail',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'help',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'home',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'imac',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'info',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'keyboard',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'like',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'link',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'location',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'lock',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'max-window',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'me',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'mike',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'mike2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'mobile-contacts',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'more',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'more2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'mosaic',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'music-off',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'music',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'note',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'pad',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'pause',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'pencil',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'photo-wall',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'play',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'play2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'previous',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'previous2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'qr-code',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'refresh',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'report-problem',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'search',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'sending',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'setting',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'share',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'shop',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'star',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'sticker',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'tag',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'text',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'time',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'transfer-text',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'transfer2',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'translate',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'tv',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'video-call',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'voice',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'volume-down',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'volume-off',
        color: colorLight,
        size: 25,
        name: ''
      },
      {
        icon: 'volume-up',
        color: colorLight,
        size: 25,
        name: ''
      }
    ]
  },
  onLoad() {
    this.setIconColor(this.data.theme)
    const app = getApp()
    if (app.watchThemeChange) {
      app.watchThemeChange(this.setIconColor)
    }
  },
  setIconColor(theme) {
    const color = theme === 'dark' ? colorDark : colorLight

    this.setData({
      iconList: this.data.iconList.map((icon) => {
        icon.color = color
        return icon
      })
    })
  }
})