Icon 图标

() => {
  const [datas, setdatas] = React.useState([
    'star',
    'star-o',
    'user',
    'check',
    'remove',
    'search-plus',
    'search-minus',
    'trash-o',
    'download',
    'repeat',
    'chevron-left',
    'chevron-right',
    'plus-circle',
    'minus-circle',
    'times-circle',
    'check-circle',
    'github',
    'linkedin',
    'smile',
    'apple',
    'android',
  ])
  const ulStyle = {
    position: 'relative',
    width: '1200px',
    left: '55px',
    overflow: 'hidden',
    'list-style': 'none',
    color: '#8492a6',
  }
  const liStyle = {
    width: '200px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    height: '100px',
    border: '1px solid #dddddd',
    float: 'left',
  }
  return (
    <ul style={ulStyle}>
      {datas.map((data, index) => {
        return (
          <li key={index} style={liStyle}>
            <Icon name={data} style={{ fontSize: '28px' }} />
            <p style={{ padding: '0', margin: '0' }}>{data}</p>
          </li>
        )
      })}
    </ul>
  )
}