以下方法來(lái)自 http://jxnblk.com/react-geomicons/ 。

鑒于 React 構(gòu)造組件的方便性，實(shí)現(xiàn)一個(gè)基于 SVG 的 Icon Component 只要下面區(qū)區(qū)幾行：

const paths = {
  bookmark: 'M6 2 L26 2 L26 30 L16 24 L6 30 Z  ',
  calendar: 'M2 4 L6 4 L6 2 A2 2 0 0 1 10 2 L10 4 L22 4 L22 2 A2 2 0 0 1 26 2 L26 4 L30 4 L30 10 L2 10 M2 12 L30 12 L30 30 L2 30  ',
  camera: 'M0 6 L8 6 L10 2 L22 2 L24 6 L32 6 L32 28 L0 28 z M9 17 A7 7 0 0 0 23 17 A7 7 0 0 0 9 17  ',
  // ... 根據(jù)你自己的需要添加 SVG path
}

const Icon = ({ name, ...props }) => {
  const path = paths[name] || false
  return (
    <svg
      {...props}
      viewBox="0 0 32 32"
    >
      <path d={path} />
    </svg>
  )
}

Icon.defaultProps = {
  name: 'warning',
  width: '1em',
  height: '1em',
  fill: 'black',
}

用法就是：

React.render(<Icon name='bookmark' />, document.querySelector('#container'))

你不需要引入像 Font-Awesome 這樣完整的 Icon Font/Set 到你的項(xiàng)目中，只需要放入你自己需要的 Icon Path。還有更輕更快速的方法嗎？