以下方法来自 http://jxnblk.com/react-geomicons/ 。
鉴于 React 构造组件的方便性，实现一个基于 SVG 的 Icon Component 只要下面区区几行：
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 ',
// ... 根据你自己的需要添加 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 到你的项目中，只需要放入你自己需要的 Icon Path。还有更轻更快速的方法吗？
